Formularios Netlify en páginas estáticas

Feb 9, 2021.

Con el anterior post pudiste publicar una página web en Netlify y con este post podrás recibir los mensajes de cotacto.

Para lograrlo existen varios servicios que permiten lograrlo en sitios estáticos a mi me gusta Formspree aunque en este caso utilizaremos el propio Netlify.

Vamos preparar el código. En la página veremos un formulario en la parte inferior:

Edita el index.html y busca la etiqueta del formulario <form action="https://formspree.io/your@email.com" method="POST" y sustituyela con el siquiente código.

  <form 
netlify
name="contact"
method="POST">

Verás que solamente estamos agregando el atributo netlify que también puede ser 'data-netlify="true"' para indicarle a Netlify que este formulario es dinámico.

Y para darle un poco de seguridad incluye una solución aplicando el mecanismo de honeypost, que se basa en incluir un input oculto para que las personas no puedan completarlo. En caso que este campo honeypots contenga algun valor indicará que ha sido completado por un bot que si pueden verlo.

Puedes leer en la doc si quieres agregar un poco más de seguridad con Akismet o reCAPTCHA 2.

Entonces dentro de la etiqueta form incluimos el honeypots:

  <p style="display: none;">
<label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
</p>

Actualizamos el repo.

git add .
git commit -am "add netlify form"
git push

Esperamos qe netlify termine el deploy y en entonces podemos ir a Forms veremos que netlify ha detectado el formulario.

formulario en netlify

Solo falta decirle que hacer cuando reciba un submit para esto vamos a Form notifications

formulario en netlify

Vemos que tenemos tres opciones: webhook, email, slack; escogemos Email notificación y completamos con la dirección de correos donde queremos recibir los contactos.

formulario en netlify

Solo nos falta probar así completamos el formulario en la página y luego de enviar te debe mostrar:

formulario en netlify

Puedes leer en la doc si quieres aprender como personalizar este mensaje.

Luego de enviar el formulario puedes ver en Netlify que nos ha llegado la notificación y si revisas tu correo debes tener el mensaje.

formulario en netlify

Está bueno eh?

🚀 Listo !! Ya tenemos la página que nos gusta donde pueden contactarnos y todo rápido, sencillo y gratis. ¿Que esperas para montar tu página?

Nos vemos en la próxima aventura y si te gusta no seas tacaño y comparte.

Siguiente

Descarga el PDF de tu curriculum online

Anterior

Publica tu página web en tres pasos.