Cómo crear un formulario de contacto usando Formspree

Puede usar muchos métodos en su sitio web para permitir que los usuarios le envíen correos electrónicos de manera segura. Un ejemplo es usar el atributo mailto en un formulario de contacto. El atributo mailto abre una aplicación de correo instalada para que el usuario ingrese un mensaje.

Para una mejor experiencia, considera integrar una herramienta como Formspree. Formspree actúa como intermediario, registrando los datos del formulario y enviándolos a su dirección de correo electrónico especificada.

¿Qué es Formspree y cómo funciona?

Formspree es un servicio de correo electrónico que puede integrar en un formulario de contacto personalizado. Cuando inicia sesión en Formspree, puede especificar su dirección de correo electrónico de destino para un formulario. Formspree maneja los envíos de formularios en tu nombre. te permite

Formspree generará un punto final, que deberá agregar a su formulario personalizado. Cuando un usuario presiona el botón "Enviar", el formulario utilizará el punto final para llamar al servicio API de Formspree. Esto generará un correo electrónico con el contenido del formulario de contacto.

Formspree enviará este correo electrónico al correo electrónico de destino que enumeró en su cuenta de Formspree. A continuación, recibirá el correo electrónico en su bandeja de entrada. Su cuenta de Formspree también tiene un lugar donde puede ver los envíos de su formulario de contacto.

Para registrar su correo electrónico con Formspree, inicie sesión e ingrese la dirección de correo electrónico de destino para su formulario.

1. Iniciar sesión en juerga. Si no tiene una cuenta, deberá ingresar su dirección de correo electrónico y una contraseña. Regístrese utilizando la dirección de correo electrónico a la que desea que el formulario de contacto envíe los envíos. Es posible que también deba verificar esta dirección de correo electrónico durante el proceso de registro.
2. Una vez que se complete el proceso de registro, se abrirá la página "Formularios". Haga clic en Nueva forma.
3. Ingrese cualquier nombre para su formulario de contacto y deje la configuración predeterminada del proyecto. Ingrese la dirección de correo electrónico de destino en el campo "Enviar correos electrónicos a". Aquí es donde Formspree enviará los envíos de su formulario de contacto. Una vez completado, haga clic en Crear formulario.
4. Formspree le proporcionará un punto final y ejemplos de cómo usarlo. Deberá agregar este punto final a su formulario de contacto personalizado en su sitio web (más sobre esto más adelante).
5. De forma predeterminada, Formspree almacena su formulario en un proyecto llamado "Mi primer proyecto". Si desea cambiar el nombre de este, vuelva a la página "Formularios". Haga clic en Ajustes junto al nombre del proyecto.
6. Aquí, puede cambiar el nombre de su proyecto a otra cosa. Por ejemplo, puede cambiarle el nombre para que tenga el mismo nombre que su sitio web. También puede agregar la URL de su sitio web.

Deberá agregar el punto final proporcionado por Formspree en el formulario de contacto en el código de su sitio web.

1. Agregue el punto final en el atributo "acción" para el formulario. Esto hará que el navegador de un usuario envíe el formulario a esa URL cuando lo envíe.

   <acción de formulario ="https://formspree.io/f/xjvlaqpe" método="CORREO">
   <!-- Tu formulario aquí -->
   <tipo de botón ="entregar" clase="botón"> Entregar </button>
   </form>

2. Agregue entradas a su formulario. Puede utilizar este formulario de ejemplo que utiliza el marco Bootstrap CSS:

   <acción de formulario ="https://formspree.io/f/mbjqjrdl" clase="relleno extra" método="CORREO">
   <clase div="grupo de forma">
   <etiqueta para ="responder a"> Su dirección de correo electrónico </label>
   <tipo de entrada ="Email" clase="control de forma" identificación ="responder a" nombre="_responder a" ngModel="respuesta" aria-descrita por="correo electrónicoAyuda" marcador de posición ="[email protected]">
   <identificación pequeña ="correo electrónicoAyuda" clase="formulario-texto texto-silenciado"> Su correo electrónico no se compartirá con nadie más. </small>
   </div>
   <clase div="grupo de forma">
   <etiqueta para ="mensaje"> Tu mensaje </label>
   <nombre del área de texto ="mensaje" estilo="altura: 200px" clase="control de forma" identificación ="mensaje" marcador de posición ="¡Hola! yo'Me comunico contigo porque..."></textarea>
   </div>
   <tipo de botón ="entregar" clase="botón"> Entregar </button>
   </form>
   

Para probar si Formspree está funcionando, envíese un mensaje usando el formulario de contacto, presione Entregary revisa la bandeja de entrada de tu correo electrónico.

1. Ejecute su sitio web y abra la página que tiene el formulario de contacto. Ingrese un mensaje en el formulario de contacto y presione Entregar.
2. Recibirás el mensaje del formulario de contacto en tu bandeja de entrada.
3. Si vuelves a Formspree, haz clic en el Presentaciones pestaña. Aquí también podrá ver los mensajes enviados desde su formulario de contacto.

Formspree es uno de los muchos servicios que puede utilizar para integrar un formulario de contacto personalizado en su sitio. Le permite comenzar a aceptar rápidamente los comentarios de los usuarios sin tener que preocuparse por los detalles del backend.

Si es nuevo en la creación de formularios con HTML y JavaScript, también puede obtener más información sobre la validación de formularios del lado del cliente. Esto ayuda a garantizar que sus formularios de contacto puedan validar todas las entradas de los usuarios.

Sobre el Autor

Sharlene Von Drehnen (9 artículos publicados)

Sharlene es redactora técnica en MUO y también trabaja a tiempo completo en desarrollo de software. Es Licenciada en TI y tiene experiencia previa en Aseguramiento de la Calidad y tutoría Universitaria. Sharlene ama jugar y tocar el piano.

Más de Sharlene Von Drehnen