Cómo crear un formulario HTML que te envíe un correo electrónico

Descarga aquí más de 190 prompts de IA para impulsar tu negocio
Claudio Frisoli
Claudio Frisoli

Publicado:

¿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.

formulario email html

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.

<< Descubre el creador gratuito de formularios online de HubSpot >> 

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. 

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:Código de HTMLDebido 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:
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:

Prácticas recomendadas para un HTML seguro
Validación de entrada en el lado del cliente
Utiliza HTML5 para la validación de entrada en el lado del cliente. Esto ayuda a garantizar que los usuarios ingresen datos válidos en los campos del formulario antes de enviarlo, reduciendo la posibilidad de errores y ataques maliciosos.
Validación de entrada en el lado del servidor
Realiza una validación adicional en el lado del servidor utilizando un lenguaje de programación del lado del servidor, como PHP, Python o Node.js. Esto es fundamental para prevenir ataques de inyección de código, como ataques de SQL y XSS, al procesar los datos del formulario.
Filtrado de datos
Filtra y sanitiza todos los datos del formulario antes de procesarlos o almacenarlos en una base de datos. Esto ayuda a prevenir la ejecución de código malicioso o la inserción de contenido no deseado en tu aplicación.
Utiliza HTTPS
Asegúrate de que tu sitio web utilice HTTPS en lugar de HTTP para cifrar la comunicación entre el navegador del usuario y tu servidor. Esto ayuda a proteger la privacidad y la integridad de los datos del formulario durante la transmisión.
Limita la cantidad de datos enviados
Solo solicita la información necesaria en tu formulario y limita la cantidad de datos que los usuarios pueden enviar. Esto reduce el riesgo de abuso y mejora la eficiencia del procesamiento del formulario.
Implementa medidas de seguridad en el servidor
Asegúrate de que tu servidor esté configurado correctamente y utilice medidas de seguridad, como cortafuegos, software antivirus y actualizaciones regulares del sistema operativo y del software del servidor, para proteger tus datos y tu aplicación contra posibles amenazas.

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.

Algunas medidas de seguridad
Agrega un CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) al formulario. Esto obligará a los usuarios a completar una tarea, como identificar letras o números distorsionados, para demostrar que son humanos y no bots automatizados.
Implementa un sistema de verificación de humanos que requiera que los usuarios completen una acción que los bots no pueden realizar fácilmente, como hacer clic en una casilla o responder una pregunta simple.
Utiliza filtros de correo no deseado en el lado del servidor para detectar y bloquear correos electrónicos sospechosos o no deseados antes de que lleguen a tu bandeja de entrada.
Mantén una lista negra de direcciones IP conocidas por enviar spam y bloquea cualquier intento de envío de formulario desde esas direcciones.
Implementa una validación estricta en los campos del formulario para asegurarte de que solo se envíen datos válidos. Esto puede incluir verificar direcciones de correo electrónico, números de teléfono y otros campos relevantes.
Limita el número de envíos que se pueden hacer desde una dirección IP específica en un período de tiempo determinado para evitar envíos masivos de spam.
Utiliza tokens CSRF (Cross-Site Request Forgery) para proteger tu formulario contra ataques de falsificación de solicitudes entre sitios que podrían ser utilizados por bots para enviar spam.
Implementa un filtro de palabras clave para detectar y bloquear contenido sospechoso o no deseado en los campos del formulario, como enlaces a sitios web de spam o contenido ofensivo.
Utiliza herramientas de análisis de comportamiento para detectar patrones sospechosos de envío de formulario, como velocidades de envío anormalmente altas o entradas consistentes de direcciones de correo electrónico falsas.

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:

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

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:

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!

Formularios online
Temas: HTML

Artículos relacionados

Pop up para DESCARGA AQUÍ MÁS DE 190 PROMPTS DE IA PARA IMPULSAR TU NEGOCIO 190 PROMPTS PARA EMPRESAS

Plantilla gratuita con 190 prompts para escalar tu negocio con inteligencia artificial

    Pop up para DESCARGA AQUÍ MÁS DE 190 PROMPTS DE IA PARA IMPULSAR TU NEGOCIO 190 PROMPTS PARA EMPRESAS

    CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

    START FREE OR GET A DEMO