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

A veces, mejorar la UX puede costar mucho dinero.

Y a menudo, algunos de los problemas que tienen los visitantes del sitio web son soluciones fáciles y simples.

Eso plantea la pregunta: ¿Cómo puede averiguar si los clientes disfrutan de su experiencia en el sitio web?

La respuesta puede ser más simple de lo que crees.

Tener formularios en su sitio web es una forma efectiva de obtener comentarios de los clientes sobre su experiencia durante su visita. Estos formularios le brindan información sobre cómo mejorar la UX de su sitio web para obtener mayores conversiones a largo plazo.

De hecho, el 74 % de los especialistas en marketing utilizan formularios para generar clientes potenciales y, de esos especialistas, más de la mitad dice que es la herramienta que conduce a la conversión con más frecuencia.

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.

En última instancia, los formularios son fundamentales para resolver la insatisfacción en la experiencia del cliente, lo que garantiza relaciones más sólidas con el cliente. 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.

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

Cómo crear un formulario en HTML y enviarlo por correo electrónico

Eso es Es posible crear un formulario HTML que envíe correos electrónicos, pero depende de cómo trabaje y en qué plataforma esté trabajando. Esto quiere decir que las cosas son un poco diferentes si el plan es usar una mezcla de HTML y diferentes scripts.

Uso de los conceptos básicos

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

 
<form action=”mailto:contact@yourdomain.com”
method=”POST”
enctype=”multipart/form-data”
name=”EmailForm”>
Name:<br>
<input type=”text” size=”19″ name=”ContactName”><br><br>
Message:<br> <textarea name=”ContactCommentt” rows=”6″ cols=”20″>
</textarea><br><br> <input type=”submit” value=”Submit”> </form>

Este código creará un formulario que solicita el nombre del contacto, el mensaje e incluye un botón de envío. 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.

Otra cosa a tener en cuenta con este código es que no se envía directamente a las direcciones de correo electrónico, pero se puede abrir en un cliente de correo electrónico o en una ventana de herramientas para enviar el formulario.

Mientras tu lata use solo HTML básico, esta no es la opción ideal.

La dificultad de los formularios de correo electrónico en HTML

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.

Si bien el código HTML anterior puede activar el cliente de correo predeterminado en la computadora del usuario, el navegador web lo hace enviando una solicitud al proveedor de servicios de correo electrónico, no a la dirección especificada.

Hay algunos problemas con el correo a: opción. 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. 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 que el formulario pueda funcionar con su servidor de correo electrónico y enviarlo a un buzón, PHP es la respuesta: exploremos esa opción ahora.

Hacer un formulario completo

Para crear un formulario con el que los suscriptores puedan contactarlo, el script PHP será su mejor amigo. 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: .

Luego, el servidor pasa los datos al script especificado en la URL de acción: miformulario-procesador.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 necesita hacer un formulario completo, siga los pasos a continuación.

1. Usa PHP para crear una página.

Cuando estés creando una página web, en lugar de usar la extensión «.html», escribe «.php». 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.

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 Perro HTML recurso para una introducción a los conceptos básicos.

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

 
<form method="post" action="subscriberform.php">
<textarea name="message"></textarea>
<input type="submit">
</form>

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=contact.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.

3. Haz que los formularios se envíen por 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 esto, vas a desplazarte hasta el principio de la página (el muy principio, incluso antes de definir el Doctype 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
if($_POST["message"]) {
mail("your@email.address", "Here is the subject line",
$_POST["insert your message here"]. "From: an@email.address");
}
?>

Recuerde que todo lo que está dentro de la primera y la última línea le indicará a la página web que haga que estas funciones se realicen 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 completado como un correo electrónico a «su@dirección.de.correo», 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 dentro de las comillas, para que se envíe desde la dirección de correo electrónico que elija.

Para resumir el proceso para crear formularios de correo electrónico HTML:

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 hacerlo; alternativamente, también puede crear un formulario usando un CRM como HubSpot.

Si eres cliente de HubSpot, sigue leyendo para aprender a usar la herramienta de HubSpot para crear un formulario HTML que te envíe un correo electrónico.

Usar HubSpot

HubSpot Forms es parte de Marketing Hub y no requiere ningún conocimiento técnico previo.

Si desea saber 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.

Cuando usas Formularios de HubSpot, puedes crear formularios personalizados que se conectan a tu 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. Hacer clic aquí para obtener más información sobre los formularios de HubSpot.

Los formularios HTML son un proceso bastante simple y una excelente manera de conectarse con los suscriptores. Tenerlos en su sitio brinda a los clientes una manera fácil de comunicarse con su empresa o registrarse para recibir correos electrónicos.

Los formularios que le envían un correo electrónico mantienen la información en su bandeja de entrada como referencia y facilidad. Recuerde que estas no son sus únicas opciones para crear formularios. Si desea una lista de herramientas que ayudan a crear formularios, consulte nuestra publicación aquí.

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

Publicado originalmente el 23 de junio de 2020 a las 4:00:00 a. m., actualizado el 10 de junio de 2021