Envía Emails desde HTML5 con FormSubmit
Corría mayo del 2021 cuando escribí un artículo en mi perfil de LinkedIn sobre como enviar datos desde un formulario de tu web utilizando solo frontend con la librería SmtpJS.
Puedes recordarlo aquí .
La había utilizado varias veces durante la pandemia por COVID19 por ser muy sencilla y rápida de implementar.
Incluso la utilicé en mi primer sitio web.
Por desgracia hubo cambios importantes con los servidores admitidos, y muchos dejamos de aprovechar sus bondades.
Hace no mucho conocí un nuevo proyecto, y tras varias pruebas, decidí usarlo para mi sitio web: FormSubmit.
FormSubmit?
Así es. Desde este proyecto han conseguido crear una herramienta con la que puedas enviar emails con solo crear un formulario en Html. Sólo debemos vincular nuestro email a su endpoint y que ellos manden el correo de forma gratuita.
¿Cómo es este proceso entonces?
Muy sencillo.
Puedes diseñarlo desde cero, aprovechar el ejemplo que ellos tienen en su documentación para poder probarlo desde la web, o aprovechar plantillas.
Para ello debes vincular el atributo action a su sitio, y añadir el email donde quieres que se envíen los datos.
También, nos aseguramos que todos nuestros elementos del formulario tengan el atributo name para asociar a los datos a enviar.
Aquí nos muestran un ejemplo.
Lo siguiente, es darle al botón de enviar y probarlo 🧙!
Y ahora, ¿qué?
Lo primero que veremos, es que nos redirige a la url que hayamos puesto en el action y nos mostrará un Captcha que debemos resolver.
Tras aceptar o resolver el Captcha propuesto, nos mostrará una página de agradecimiento, y nos devolverá a la url original.
En nuestra bandeja, podremos ver ya el envío del formulario.
Bien. En el primer envío, nos mostrará un aviso para que activemos nuestro formulario en su sitio web.
Si revisamos nuestra bandeja de entrada, podremos ver el correo que nos han enviado (para el ejemplo, está en local).
Si tras activar, copiamos el código random que nos ha generado para asociarlo a nuestro formulario, podemos sustituir nuestra cuenta de correo por este string en el action, para que no sea visible a terceros.
¿Qué más podemos hacer?
Es bastante personalizable y en la documentación te muestran varias cosas muy interesantes para añadir a tu formulario.
¿Quieres que no se muestre el captcha porque ya implementas otra seguridad?. Se puede.
Añade esta línea y resuelto:
¿Quieres que envíe a otra página o url en la redirección?
El atributo name con valor _next se encarga de ello.
¿Qué envíe un correo automáticamente al remitente?
Con _autoresponse y el mensaje personalizado, está hecho.
Hay más, pero creo que es mejor que las explores directamente!.
¿Vas a utilizarlo?
Dejar una Respuesta