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

¿Alguna vez configuró un formulario en su sitio, solo para olvidarse de verificar las entradas que se enviaron? Crear un formulario HTML que envíe un correo electrónico después del envío es una de las formas más simples y efectivas de resolver este problema.

Aquí, lo guiaremos a través de cómo crear un formulario que le envíe un correo electrónico a usted, así como al cliente, para garantizar que se recibió el formulario.

Idealmente, los navegadores le permitirían enrutar los envíos 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 un correo electrónico directamente desde un formulario web HTML revelaría la dirección de correo electrónico del visitante, lo que lo haría vulnerable a actividades maliciosas, como el phishing.

Agregar una dirección mailto: al formulario puede ser una forma potencial de eludir este desafío. Esta opción activa el cliente de correo predeterminado en la computadora del usuario y le pide que envíe el formulario por correo electrónico. El navegador web envía una solicitud al proveedor de servicios de correo electrónico, no a la dirección especificada.

Hay algunos problemas con la opción mailto:. Por ejemplo, no es 100% compatible con todos los navegadores, no es muy fácil de usar y es imposible controlar el formato de los datos cuando el navegador envía el formulario.

Más allá de eso, aparecerá un mensaje de advertencia cuando el usuario envíe el formulario, haciéndole saber que la información que está a punto de enviar no estará encriptada por motivos de privacidad.

A continuación, revisamos algunas opciones para crear un formulario HTML que le envíe un correo electrónico cuando se envíe una nueva entrada.

La opción que elija depende de cómo trabaje y qué plataforma esté utilizando. Esto quiere decir que las cosas son un poco diferentes si el plan es usar una mezcla de HTML y diferentes scripts. A continuación, repasamos las diferentes opciones disponibles.

Método 1: crear un formulario de envío de correo electrónico utilizando HTML (no recomendado)

¿Usando solo HTML? Para comenzar de nuevo, aquí hay un código de muestra para usar:

Consulta el Pen Cómo crear un formulario HTML que te envíe un correo electrónico de HubSpot (@hubspot) en CodePen.

Este código creará un formulario que solicita el nombre del contacto, el mensaje e incluye un botón de envío (no visible en CodePen). Tenga en cuenta que este código es básico: no se verá muy elegante. Para una más hermosa, deberá agregar algunas líneas de código más específicas para sus necesidades.

Si bien puede usar solo HTML básico, esta no es la opción ideal. Este formulario no se envía directamente a las direcciones de correo electrónico, sino que abre un cliente de correo electrónico o una ventana de herramientas para enviar el formulario. Esto puede asustar al usuario para que no envíe el formulario.

Entonces, ¿qué código HTML le permite enviar envíos de formularios directamente a una dirección de correo electrónico?

Para hacer que el formulario funcione con su servidor de correo electrónico y enviarlo a un buzón, PHP es la respuesta. Exploremos esa opción ahora.

Método 2: Cree un formulario de envío de correo electrónico usando PHP (avanzado)

Para crear un formulario con el que los suscriptores puedan contactarlo, el script PHP será su mejor amigo. Lo sé, otro acrónimo. Este significa preprocesador de hipertexto, y este lenguaje colabora con HTML para procesar el formulario.

Antes de saltar al proceso, analicemos algunos conceptos básicos de formularios.

Un formulario web tiene dos lados: el front-end, visto en el navegador por los visitantes, y un script de back-end 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 "acción" de la etiqueta del formulario, enviando los datos del formulario a esa URL.

Por ejemplo: <form action=https://yourwebsite.com/myform-processor.php> .

Luego, el servidor pasa los datos al script especificado en la URL de acción: myform-processor.php en este caso. Usando estos datos, el script de back-end puede crear una base de datos de envíos de formularios, dirigir al usuario a otra página (por ejemplo, pago) y enviar un correo electrónico.

Hay otros lenguajes de secuencias de comandos que puede usar en la programación de back-end, como Ruby, Perl o ASP para Windows. Sin embargo, PHP es el más popular y lo utilizan casi todos los proveedores de servicios de alojamiento web.

Si está creando un formulario desde cero, estos son los pasos que puede seguir.

Paso 1: usa PHP para crear una página.

Para este paso, deberá tener acceso al cPanel de su sitio web en su plataforma de alojamiento.

Cuando estés creando una página web, en lugar de usar la extensión “.html”, escribe “.php” en su lugar. Esto es similar a lo que sucede cuando guarda una imagen como "jpg" en lugar de "png".

Al hacer esto, el servidor sabrá alojar el PHP que escribes. En lugar de guardar la página HTML vacía como tal, guárdela como algo como esto: "formulario de suscripción.php". Después de crear y guardar su página, podrá crear el formulario.

Paso 2: Haz el formulario usando código.

En este paso, escribirá el código para crear el formulario.

Si no está seguro de cómo crear formularios en HTML, consulte el recurso de HTML Dog para obtener una introducción a los conceptos básicos.

El siguiente código es lo que se necesita para un formulario básico:

<método de formulario="publicar" acción="formulario de suscriptor.php">
		


<textarea name="mensaje"></textarea>
<tipo de entrada="enviar">
</formulario>

Debido a que esto es similar a la redacción solo en HTML, estas líneas también crearán un nombre para el formulario y un área para que los suscriptores escriban un mensaje personalizado y se lo envíen.

Una diferencia importante es la parte action=”subscriberform.php”. Esta parte del código es lo que hará que la página envíe el formulario cuando se envíe. Recuerde que en el primer ejemplo, esa no era una opción.

Paso 3: Haz que el formulario envíe un correo electrónico.

Después de crear el formulario y agregar todas las fijaciones adecuadas según sus preferencias de diseño, es hora de crear la parte del correo electrónico.

Para ello, se desplazará hasta el principio de la página (el principio mismo, incluso antes de definir el tipo de documento HTML). Para habilitar el envío de datos en el correo electrónico, debemos agregar un código que procesará los datos. Copie este código o cree algo similar:

<?php
si ($_POST["mensaje"])
mail("[email protected]", "Esta es la línea de asunto",
$_POST["inserte su mensaje aquí"]. "De: [correo electrónico protegido]");

?>

Todo lo que se encuentra dentro de la primera y la última línea le indicará a la página web que haga que estas funciones funcionen como PHP. Este código también verifica si un suscriptor usa el formulario. A partir de ahí, comprueba si se envió el formulario.

Desglosándolo aún más, "correo" envía el formulario completo como un correo electrónico a "[email protected]", y la línea de asunto es lo que sigue. En la siguiente línea, puede escribir una copia del mensaje de correo electrónico entre comillas, para que se envíe desde la dirección de correo electrónico que elija.

Una vez que se envía el formulario, la página se 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, tienes el código básico que necesitas para crear el formulario.

Tenga en cuenta que esta es solo una forma de hacer esto; alternativamente, también puede crear un formulario usando un constructor y luego incrustarlo en su sitio web.

Método 3: Cree un formulario de envío de correo electrónico utilizando un generador de formularios

Si no está utilizando WordPress para crear su sitio web y no tiene conocimientos de codificación, es posible que no sepa cómo puede crear un formulario, especialmente si su CMS no ofrece un editor de páginas de arrastrar y soltar.

(Consejo importante: un editor de arrastrar y soltar puede hacer que sea mucho más fácil y simple crear un formulario de envío de correo electrónico. Pruebe CMS Hub, es 100% gratis).

Cada una de las siguientes herramientas le permite crear un formulario que envía un correo electrónico sin necesidad de codificación por su parte. La mejor parte es que no necesita cambiar los sistemas de administración de contenido si no lo desea. En su lugar, puede insertar el formulario en su sitio web utilizando el código de inserción de cada herramienta.

1. HubSpot: el mejor generador de formularios de correo electrónico en general

HubSpot incluye un generador de formularios en el nivel gratuito de todos sus productos. Debido a que HubSpot ya tiene tu correo electrónico, automáticamente te enviará un mensaje cuando se envíe una nueva entrada.

El creador de formularios de HubSpot está vinculado con otras herramientas de la plataforma, incluidos Marketing Hub y CMS Hub, y no requiere ningún conocimiento técnico previo. Si desea ampliar el formulario para incluir funciones de marketing, también puede hacerlo.

Por ejemplo, puede crear formularios personalizados que se conecten a su lista de contactos. También puede personalizar esos formularios y activar correos electrónicos automáticos en función de la finalización de sus formularios. Tenga en cuenta que este último requiere una actualización premium.

Si desea obtener información sobre cómo recibir un correo electrónico después de enviar un formulario, eche un vistazo a nuestro artículo de la base de conocimientos.

2. Forms.io: el mejor generador rápido de formularios de correo electrónico

Forms.io le permite crear rápidamente un formulario en su interfaz de arrastrar y soltar, luego incrustarlo en su sitio usando el código de inserción HTML. Recibirá una alerta o notificación y luego podrá administrar las respuestas en el backend de la herramienta. Es gratis para 10 usuarios, pero si su empresa necesita más puestos, puede tener acceso por $14.99/mes.

3. Jotform: el mejor correo electrónico para el creador de formularios múltiples

Si espera necesitar más de un formulario, Jotform es una excelente opción. Le brinda varias opciones para incrustar formularios en su sitio web: JavaScript, iFrame o el código fuente completo del formulario. También tiene la opción de crear una caja de luz o un formulario emergente.

Jotform es gratis con su marca. El precio comienza en $ 24 / mes.

Echa un vistazo a más herramientas de creación de formularios aquí.

Método 4: cree un formulario de envío de correo electrónico usando un complemento

Si está ejecutando un sitio web de WordPress, tenemos buenas noticias: tiene una gran cantidad de complementos de creación de formularios disponibles para usted, la mayoría de los cuales tienen un excelente costo de forma gratuita. Todas estas herramientas enviarán un correo electrónico al recibir un envío.

1. Complemento de formulario de HubSpot: lo mejor para la generación de prospectos

Si planeas usar tu formulario como una herramienta de generación de prospectos, te recomendamos usar el complemento de formulario de HubSpot. Se vincula directamente a su cuenta de HubSpot, lo que le permite usarla junto con HubSpot CRM, Marketing Hub, Sales Hub y más.

2. WPForms: lo mejor para incrustar en cualquier lugar

WPForms es un generador de formularios de arrastrar y soltar que le permite configurarlo para que le envíe un correo electrónico al recibir un envío. También puede incrustar el formulario en cualquier lugar de su sitio, incluida la barra lateral y el pie de página.

3. Formularios AR

ARForms le permite recibir notificaciones por correo electrónico según las condiciones que haya establecido, pero también puede recibir notificaciones por correo electrónico para todos los envíos. También puede integrarlo con otras herramientas en su pila tecnológica, incluidos HubSpot, PayPal y Google Sheets.

Las ventajas de los formularios HTML que envían correos electrónicos

Ya sea que desee convertir más visitantes en clientes potenciales, recopilar información para su equipo de ventas o crear defensores de la marca más leales, los formularios son imprescindibles para una estrategia de entrada. Si no tiene un formulario en su sitio web, podría estar perdiendo más clientes potenciales, mayores conversiones y clientes más felices a largo plazo.

El problema es que es fácil olvidarse de revisar las respuestas, e incluso más fácil obtener envíos pero no tener un registro de búsqueda de ellos. Los formularios que le envían un correo electrónico mantienen la información en su bandeja de entrada como referencia y facilidad.

Nota del editor: esta publicación se publicó originalmente en diciembre de 2019 y se actualizó para que sea más completa.