¿Alguna vez has configurado un formulario en tu sitio web, solo para perder el rastro de la información? Crear un formulario de correo electrónico en HTML es una forma efectiva de resolver este problema.
A continuación, aprenderás a crear un formulario que envía un correo electrónico tanto a ti como al cliente después de enviarlo. Este sencillo truco te ayudará a desarrollar una estrategia de entrada sin complicaciones.
- Qué es un formulario HTML
- Cómo hacer un formulario HTML que envíe correo electrónico
- La importancia de los formularios HTML que envían correos electrónicos
- Cómo verificar que el formulario HTML es seguro
- Qué medidas de seguridad se deben tomar para proteger un formulario contra el spam
- Cómo puedo realizar un seguimiento de las respuestas de mi formulario
Qué es un formulario HTML
Un formulario HTML se utiliza en un sitio web para recopilar información ingresada por los visitantes. Si deseas ser notificado cuando alguien haya enviado su información, puedes configurar un proceso que envíe correos electrónicos desde un formulario HTML.
Idealmente, los navegadores permitirían dirigir las presentaciones de formularios directamente a una dirección de correo electrónico. Sin embargo, la razón por la que no lo hacen es que enviar correos electrónicos directamente desde un formulario web HTML revelaría la dirección de correo electrónico del visitante, lo que haría que el usuario fuera vulnerable a actividades maliciosas, como el phishing.
Además, HTML no ofrece una opción para crear un formulario que envíe un correo electrónico después de su presentación. En su lugar, puedes usar el elemento de acción del formulario para establecer una dirección mailto: (en este caso, la tuya propia), lo que hace que el cliente de correo del remitente se abra.
Esta es una opción de último recurso si no puedes crear un formulario basado en PHP.
Sin embargo, hay algunos problemas con la opción mailto:
-
No es 100 % compatible con todos los navegadores.
-
El proceso no es muy amigable para el usuario.
- No puedes controlar el formato de los datos cuando el formulario es enviado por el navegador.
- Aparecerá un mensaje de advertencia cuando el usuario envíe el formulario, informándoles que la información que están a punto de enviar no estará encriptada para la privacidad.
- En lugar de eso, querrás buscar formas alternativas de enviar un correo electrónico desde un formulario, que discutiremos a continuación.
Ventajas de un formulario HTML
- Son fáciles de implementar y gestionar en una página web. Solo se necesita conocimiento básico de HTML para crear y editar formularios.
- Son compatibles con la mayoría de los navegadores web modernos, lo que garantiza que los usuarios puedan interactuar con ellos sin problemas.
- Ofrecen una amplia gama de controles de entrada, como campos de texto, botones de opción, casillas de verificación y menús desplegables, lo que permite recopilar una variedad de tipos de datos.
- Pueden personalizarse fácilmente mediante CSS para que se ajusten al diseño y estilo de la página web en la que se encuentran.
- Pueden ser validados y procesados en el lado del cliente utilizando JavaScript, lo que proporciona una experiencia de usuario más dinámica y receptiva.
Desventajas de un formulario HTML
- La validación de datos en los formularios HTML se realiza principalmente en el lado del cliente, lo que puede ser menos seguro que la validación en el lado del servidor.
- Pueden estar expuestos a ataques de seguridad, como ataques de inyección de código y ataques de CSRF (Cross-Site Request Forgery), si no se implementan adecuadamente medidas de seguridad.
- Aunque los formularios HTML son personalizables con CSS, pueden presentar limitaciones en términos de diseño y disposición, especialmente en comparación con las soluciones de formularios más avanzadas.
- Algunas características avanzadas de los formularios HTML pueden no ser compatibles con todos los navegadores, lo que puede limitar la funcionalidad en ciertos casos.
- Aunque el procesamiento del lado del cliente puede mejorar la experiencia del usuario, también puede aumentar la carga en el navegador del usuario y exponer los datos a manipulación indebida si no se implementan medidas de seguridad adecuadas.
Cómo hacer un formulario HTML que envíe correo electrónico
Hay varias opciones para crear un formulario HTML que te envíe un correo electrónico cuando se envía una nueva entrada. La opción que elijas depende de cómo trabajes y qué plataforma estés utilizando.
Esto quiere decir que las cosas son un poco diferentes si el plan es usar una combinación de HTML y diferentes scripts.
Elige la opción que mejor se adapte al conjunto de habilidades de tu equipo:
Método 1: crea un formulario de envío de correo electrónico utilizando HTML (no recomendado)
¿Solo usando HTML? Si estás empezando desde cero, nuestro equipo está aquí para ayudarte. Este código te ayudará a crear un formulario que te notificará por correo electrónico.
El formulario me pide el nombre y el mensaje del contacto. También incluye un botón de enviar (no visible en CodePen) que los usuarios hacer clic para enviar su información.
Ten en cuenta que este código es básico. No se verá súper elegante. Para obtener un formulario más visualmente atractivo que se ajuste a mi marca, tendría que agregar líneas de código específicas a mis necesidades.
Recuerda: si bien puedes usar solo HTML básico, esta no es la opción ideal. Este formulario no envía directamente a direcciones de correo electrónico, sino que abre una ventana de cliente de correo electrónico o herramienta para enviar el formulario. Esto puede hacer que el usuario se asuste y no envíe el formulario en absoluto.
Consejo profesional: Es posible que veas el mensaje de un cliente cuando envíes un correo electrónico desde un formulario web HTML. Lamentablemente, tus visitantes están en riesgo de phishing debido a esta brecha de seguridad.
Entonces, ¿qué código HTML te permite enviar envíos de formularios directamente a una dirección de correo electrónico?
Para hacer que el formulario funcione con tu servidor de correo electrónico y enviarlo a un buzón, PHP es la respuesta. Vamos a explorar esa opción ahora.
Método 2: crear un formulario de envío de correo electrónico usando PHP (avanzado)
Para crear un formulario que envíe un correo electrónico, PHP va a ser tu mejor amigo. PHP significa Procesador de Hipertexto, y este lenguaje colabora con HTML para procesar el formulario.
Antes de sumergirnos en el proceso, desglosemos algunos conceptos básicos del formulario.
Formularios de PHP: lo que necesitas saber
Un formulario web tiene dos lados: el front end, que los visitantes ven en el navegador, y un script de backend que se ejecuta en el servidor.
El navegador web del visitante utiliza código HTML para mostrar el formulario. Cuando se envía el formulario, el navegador envía la información al backend utilizando el enlace mencionado en el atributo "action" de la etiqueta de formulario, enviando los datos del formulario a esa URL.
Por ejemplo: <form action=https://tusitio.com/mi-procesador-de-formularios.php> .
El servidor luego pasa los datos al script especificado en la URL de acción: mi-procesador-de-formularios.php en este caso. Utilizando estos datos, el script de backend puede crear una base de datos de envíos de formularios, dirigir al usuario a otra página (por ejemplo, de pago) y enviar un correo electrónico.
Existen otros lenguajes de scripting que puedes utilizar en la programación de backend, como Ruby, Perl o ASP para Windows. Sin embargo, PHP es el más popular y es utilizado por casi todos los proveedores de servicios de alojamiento web.
Si estás creando un formulario desde cero, aquí están los pasos que puedes seguir. Voy a trabajar en ellos a continuación.
Paso 1: usa PHP para crear una página
Para este paso, necesito tener acceso al cPanel de mi sitio web en mi plataforma de alojamiento.
Cuando creo una página web, en lugar de usar la extensión ".html", escribo ".php" en su lugar. Esto es similar a lo que sucede cuando guardo una imagen como "jpg" en lugar de "png".
Al hacer esto, el servidor sabrá que debe alojar el PHP que escribí. En lugar de guardar la página HTML vacía como tal, la guardé como "formulario-de-suscriptor.php". Después de crear y guardar mi página, puedo crear el formulario.
Paso 2: crea el formulario usando código
En este paso, escribo el código para crear el formulario.
Si no estás seguro de cómo crear formularios en HTML, consulta el recurso de HTML Dog para obtener una introducción a lo básico.
El siguiente código es lo que se necesita para un formulario básico:
Debido a que esto es similar a la explicación que incluye solo HTML, estas líneas también crearán un espacio para el nombre del formulario y un área para que los suscriptores escriban un mensaje personalizado y lo envíen hacia mí.
Una diferencia importante es la parte action=“subscriberform.php”. Esta parte del código es la que hará que la página envíe el formulario cuando se envíe.
Paso 3: hacer que el formulario envíe un correo electrónico
Después de crear el formulario y agregar todos los arreglos adecuados según mis preferencias de diseño, es hora de crear la parte del correo electrónico.
Para esto, voy a desplazarme hasta el principio de la página (al principio mismo, incluso antes de definir el Doctype HTML). Para habilitar el envío de datos por correo electrónico, tengo que agregar código que procesará los datos. Copié este código:
Todo lo que está dentro de las primeras y últimas líneas indicará a la página web que realice estas funciones como PHP. Este código también verifica si un suscriptor usa el formulario. A partir de ahí, verifica si el formulario fue enviado.
Desglosándolo aún más, "mail" envía el formulario completado como un correo electrónico a "tu@email.address," y el asunto es lo que sigue. En la siguiente línea, puedo escribir una copia del mensaje de correo electrónico dentro de las comillas, para ser enviado desde la dirección de correo electrónico que elijas.
Una vez que se envía el formulario, la página envía los datos a sí misma. Si los datos se han enviado correctamente, la página los envía como un correo electrónico. Luego, el navegador carga el HTML de la página, incluido el formulario.
Con eso, tengo el código básico que necesito para crear el formulario.
Ten en cuenta que esta es solo una forma de hacerlo. Alternativamente, también puedes crear un formulario utilizando un generador y luego incrustarlo en tu sitio web.
Lo que necesitas saber: crear un formulario PHP desde cero no es fácil para principiantes. Si estás pensando en usar PHP, te sugiero que consideres usar una plataforma backend sin dependencia de lenguaje. De lo contrario, puede ser difícil administrar formularios de envío de correo electrónico.
Método 3: crear un formulario de envío de correo electrónico utilizando un constructor de formularios
Si no estás utilizando WordPress para construir tu sitio web y no tienes conocimientos de codificación, es posible que te sientas perdido en cuanto a cómo crear un formulario. Esto es especialmente cierto si tu CMS no ofrece un editor de páginas de arrastrar y soltar.
Cada una de las herramientas a continuación te permiten construir un formulario que envía un correo electrónico sin necesidad de codificación. La mejor parte es que no necesitas cambiar de sistema de gestión de contenidos si no quieres. En su lugar, puedes incrustar el formulario en tu sitio web utilizando el código de incrustación de cada herramienta.
Echa un vistazo a mis creadores de formularios favoritos y mis opiniones a continuación.
(Consejo profesional: un editor de arrastrar y soltar puede hacer que sea mucho más fácil y sencillo crear un formulario de envío de correo electrónico. Prueba CMS Hub. ¡Puedes comenzar a usarlo ahora mismo gratis!)
1. HubSpot: el mejor creador de formularios de correo electrónico en general
Comienza a usar la herramienta gratuita Form Builder de HubSpot.
HubSpot incluye un creador de formularios en el nivel gratuito de todos sus productos. Dado que HubSpot ya tiene mi correo electrónico, automáticamente me enviará un mensaje cuando se envíe una nueva entrada.
El constructor de formularios de HubSpot está vinculado con otras herramientas en la plataforma, incluyendo Marketing Hub y CMS Hub. Además, no necesito ningún conocimiento técnico especial. Si quiero extender el formulario para incluir capacidades de marketing, también puedo hacerlo.
Por ejemplo, puedo crear formularios personalizados que se conecten con mi lista de contactos. También puedo personalizar esos formularios y activar correos electrónicos automáticos en función de la finalización de mis formularios. (Ten en cuenta que esto último requiere una actualización premium).
Si quieres aprender cómo recibir un correo electrónico después de enviar un formulario, echa un vistazo a nuestro artículo en la Base de Conocimientos.
La herramienta de creación de formularios de HubSpot es la mejor opción si estás comenzando y no quieres gastar mucho. Con la ayuda de la herramienta, cualquier persona, independientemente de su nivel de habilidad, puede desarrollar formularios visualmente atractivos que conviertan efectivamente a los visitantes del sitio web en clientes potenciales y amplíen su negocio.
2. Forms.io: el mejor constructor de formularios de correo electrónico rápido
Forms.io me permitió crear rápidamente un formulario en su interfaz de arrastrar y soltar. Luego, pude incrustar el formulario en mi sitio utilizando un código de inserción HTML. Recibía una alerta o notificación cuando se completaba el formulario. Luego, pude gestionar las respuestas en el backend de la herramienta.
Es gratuito para 10 usuarios.
Si tu empresa necesita más asientos, puedes acceder por $14.99 al mes.
Ya sea que estés buscando crear un formulario de un solo paso o de múltiples pasos, Forms.io puede hacerlo en segundos. Al utilizar sus plantillas predefinidas, puedes elegir fácilmente logotipos, colores y fuentes para reflejar tu marca.
3. Jotform: el mejor creador de formularios por correo electrónico para múltiples formularios
Si necesitas más de un formulario, Jotform es una excelente elección. Cuando probé Jotform, tenía varias opciones para incrustar formularios en mi sitio web: JavaScript, iFrame o el código fuente completo del formulario. También tenía la opción de crear un formulario de lightbox o emergente. Jotform es gratuito con su marca. Los precios comienzan en $24 al mes si deseas un formulario sin marcas de agua.
Mira cómo puedes personalizar tus notificaciones para su formulario de retroalimentación:
Con Jotform, deberías poder acceder a tus formularios por correo electrónico desde cualquier dispositivo, así como puedes acceder a tus correos normalmente. Cada formulario es receptivo por defecto, por lo que puedes completarlo fácilmente en una computadora, tableta o teléfono.
Lo que encuentro útil es que la aplicación ayuda a verificar las contribuciones sobre la marcha, incluso cuando estás sin conexión.
Método 4: crea un formulario de envío de correo electrónico usando un Plugin
Si estás ejecutando un sitio web de WordPress, tenemos buenas noticias: tienes una gran cantidad de plugins de constructores de formularios disponibles, la mayoría de los cuales son gratuitos, incluido el plugin de WordPress de HubSpot. Estas herramientas te enviarán un correo electrónico al recibir una presentación.
Plugin de WordPress de HubSpot: el mejor para generar leads
Si planeas utilizar tu formulario como una herramienta de generación de leads, entonces te recomiendo encarecidamente que uses el plugin de formulario de HubSpot. Se vincula directamente a tu cuenta de HubSpot, lo que te permite usarlo en conjunto con HubSpot CRM, Marketing Hub, Sales Hub y más.
Aquí tienes cómo se verá cuando añadas el plugin a tu sitio de WordPress:
Insertar el formulario a través de un plugin de Hubspot puede ser necesario para asegurarte de que el código de inserción permanezca intacto si descubres que tu formulario de WordPress no está funcionando correctamente.
WPForms: la mejor herramienta para incrustar en cualquier lugar
WPForms es un constructor de formularios de arrastrar y soltar que te permite configurarlo para que te envíe un correo electrónico al recibir una presentación. También puedes incrustar el formulario en cualquier lugar de tu sitio, incluidos la barra lateral y el pie de página.
Con WPForms, recibirás de inmediato una notificación por correo electrónico tan pronto como se envíe un formulario, como se muestra a continuación. Incluso puedes crear notificaciones para varios destinatarios y utilizar funciones de confirmación para enviar al usuario a una página de agradecimiento personalizada o mostrar un mensaje de éxito personalizado.
ARForms: la mejor en adaptabilidad
ARForms te permite recibir notificaciones por correo electrónico según las condiciones que hayas establecido, pero también puedes obtener notificaciones por correo electrónico para todas las presentaciones.
También puedes integrarlo con otras herramientas en tu conjunto tecnológico, incluyendo HubSpot, PayPal y Google Sheets.
Incluso con sus plantillas, puedes personalizar tu formulario agregando múltiples campos, como se muestra a continuación:
Las capacidades integradas de formulario emergente de ARForms y su variedad de desencadenantes son lo que lo hacen tan poderoso. Puedes aumentar las tasas de conversión de tus formularios utilizando acciones de desencadenador para hacer que tus formularios sean más visibles para los usuarios del sitio.
La importancia de los formularios HTML que envían correos electrónicos
Ya sea que desees convertir más visitantes en clientes potenciales, recopilar información para tu equipo de ventas o crear defensores leales de la marca, los formularios son imperativos para una estrategia de entrada. Si no tienes un formulario que envíe correos electrónicos, podrías estar perdiendo más clientes potenciales, conversiones aumentadas y clientes comprometidos. Comienza a mejorar tus formularios hoy mismo.
Cómo verificar que el formulario HTML es seguro
Al seguir estas prácticas recomendadas, puedes mejorar la seguridad de tu formulario HTML y proteger los datos sensibles de tus usuarios:
Qué medidas de seguridad se deben tomar para proteger un formulario contra el spam
Al implementar estas medidas de seguridad, puedes reducir significativamente la cantidad de spam que recibe tu formulario HTML y garantizar que solo recibas respuestas legítimas y relevantes.
Cómo puedo realizar un seguimiento de las respuestas de mi formulario
El método que elijas dependerá de tus necesidades específicas y de la cantidad de datos que esperes recopilar. Puedes combinar varias de estas opciones para obtener un seguimiento completo y eficaz de las respuestas de tu formulario. Para ello puedes considerar las siguientes opciones:
Por qué es importante realizar un seguimiento a un formulario HTML
Realizar un seguimiento a un formulario HTML es fundamental para garantizar su funcionamiento adecuado, analizar su efectividad y optimizar su rendimiento continuamente.
Razones importantes por las cuales realizarle un seguimiento a tu formulario HTML
-
Verificación de datos: el seguimiento te permite verificar que el formulario esté funcionando correctamente y que esté recopilando la información esperada de manera precisa.
-
Monitoreo de respuestas: te permite monitorear las respuestas recibidas para asegurarte de que estén siendo recibidas y almacenadas adecuadamente. Esto es crucial para garantizar que no se pierda ninguna respuesta importante.
- Análisis de datos: el seguimiento te proporciona datos sobre la cantidad de respuestas recibidas, las tasas de conversión y otros métricos relevantes. Estos datos son valiosos para evaluar la efectividad del formulario y hacer ajustes si es necesario.
- Optimización continua: al analizar los datos recopilados, puedes identificar áreas de mejora en el formulario, como campos confusos o tasas de abandono elevadas. Esto te permite optimizar el formulario para aumentar la tasa de conversión y mejorar la experiencia del usuario.
- Seguridad: el seguimiento también puede ayudar a detectar y prevenir actividades fraudulentas, como el envío masivo de respuestas automatizadas (spam). Al monitorear las respuestas recibidas, puedes identificar patrones sospechosos y tomar medidas adecuadas para mitigar el riesgo de spam.
Preguntas frecuentes sobre los formularios HTML que envían correos electrónicos
A continuación encontrarás algunas de las preguntas más comunes que recibimos en la comunidad de HubSpot sobre este tema:
Qué debo hacer si mi formulario no envía correos electrónicos correctamente
Si tienes problemas para enviar correos electrónicos desde tu formulario, verifica que la configuración del servidor de correo electrónico sea correcta y que el script del lado del servidor esté procesando correctamente los datos del formulario y enviando el correo electrónico.
¿Puedo enviar archivos adjuntos desde mi formulario HTML?
Sí, puedes permitir a los usuarios adjuntar archivos a través de un campo de entrada de tipo file en tu formulario HTML y luego procesar y enviar esos archivos como parte del correo electrónico en el lado del servidor.
Cómo puedo agregar una confirmación de envío exitoso a mi formulario
Puedes agregar una página de confirmación de envío exitoso que se muestre después de que el usuario envíe el formulario. Esta página puede ser una página HTML estática o dinámica generada por el script del lado del servidor.
En resumen, crear un formulario HTML que envíe un correo electrónico es una excelente manera de facilitar la comunicación con tus usuarios o clientes. Con solo unas pocas líneas de código y la configuración adecuada del servidor, puedes implementar esta funcionalidad de manera sencilla y efectiva. ¡No dudes en probarlo y ver cómo mejora la interacción con tu audiencia!
