Consejo rápido: agrega un formulario Formspree a tus sitios estáticos

() translation by (you can also view the original English article)

En éste tutorial vamos a ver una forma sencilla de añadir formularios flexibles y dinámicos a tus sitios web estáticos.

El Problema

Imagina que has creado un sitio web usando páginas estáticas, ya sea con la ayuda de Jekyll o simplemente usando algunos archivos HTML, pero ahora quieres agregar un formulario de contacto. Puedes enlazar a un servicio online, instalar algo pre-elaborado a tu servidor, o crear algo desde cero usando PHP. Ésto significa que estás completamente limitado en el diseño, o estás poniendo más esfuerzo en un simple formulario del que pusiste en hacer todo tu sitio.

La Solución

¿Qué tal si pudiéramos usar un servicio que te da total control sobre el formulario, y que no requiere que instales algo en tu servidor? Ingresa a Formspree, un servicio online que te da la posibilidad de crear formularios HTML funcionales, sin el uso de PHP o Javascript.

Permíteme darte una breve descripción de los pasos requeridos para tener tu propio formulario funcionando.

Crea Tu Formulario

Lo primero que vas a necesitar es un formulario, que construiremos desde cero en HTML. Mi formulario va a ser una manera muy sencilla de que la gente me contacte-voy a tener un campo para su nombre, correo electrónico y su mensaje. Aquí está el marcado para mi formulario:

<form id="contactform" method="POST">
    <input type="text" placeholder="Your name">
    <input type="email" placeholder="Your email">
    <textarea placeholder="Your message"></textarea>
    <input type="submit" value="Send">
</form>

Verás que he agregado un input submit y encerrado todos los campos con un elemento <form>.

Podemos aplicar estilo a éste formulario como queramos. No hay un iframe o alguna otra cosa para limitar como se ve.

Agregar Atributos

Para que Formspree maneje tu formulario, necesitarás agregar el siguiente atributo action a tu elemento <form>:

1	<form id="contactform" action="//formspree.io/your@email.com" method="POST">

Necesitarás cambiar "your@email.com" con el correo electrónico que quieres recibir los mensajes.

Lo siguiente es dar a cada campo un atributo name; éstos serán las etiquetas que aparecen cada vez que recibes un envío del formulario. Puedes usar también valores especiales de Formspree que se les antepone un guión bajo.

<form id="contactform" action="//formspree.io/your@email.com" method="POST">
    <input type="text" name="name" placeholder="Your name">
    <input type="email" name="_replyto" placeholder="Your email">
    <textarea name="message" placeholder="Your message"></textarea>
    <input type="submit" value="Send">
</form>

Nota que los campos de Nombre y Mensaje son nombrados apropiadamente, pero he usado el valor especial "_replyto" para el campo de correo electrónico. Formspree reconocerá éste valor de atributo, y por lo tanto me permite responder directamente al correo electrónico que es ingresado en el formulario cuando es enviado.

Recuerda Tus Maneras

Puedo también agregar _next a otro input oculto para especificar a que url quisiera que los usuarios fueran enviados una vez que han enviado el formulario.

1	<input type="hidden" name="_next" value="//mywebsite.com/thanks.html" />

Asunto

Para que yo sepa de donde viene el mensaje voy a agregar una línea de asunto. Puedo hacer ésto al agregar el siguiente input oculto:

1	<input type="hidden" name="_subject" value="Website contact" />

Éste campo no aparecerá cuando un usuario ve el formulario, pero el valor será usado para la línea del asunto cuando reciba un envío.

Hacer Tu Formulario Seguro

Crearlo con Formspree es un método "honeypot" para evitar spam. La técnica honeypot es muy simple; ocultas un campo dentro de tu formulario que los usuarios no ven, pero si los spambots o enviadores de spam. El spambot llenará el campo, mientras que los usuarios no lo llenarán. Cualquier envío con éste campo llenado será considerado spam.

Puedes utilizar ésta técnica al agregar lo siguiente a tu formulario:

1	<input type="text" name="_gotcha" style="display:none" />

Es importante usar un atributo de estilo para ocultar el campo. El navegador de los usuarios ocultará el campo usando CSS, pero el spambot (probablemente) ingnorará todo el CSS y continuará para llenar el campo. Al nombrar el campo "_gotcha", Formspree lo reconocerá e ignorará cualquier evío hecho con éste campo llenado.

Para mayor seguridad puedes encerrar tu correo electrónico en JavaScript. Ésto reducirá la probabilidad de que spambots busquen y seleccionen tu correo electrónico desde el HTML. Observa lo que he hecho debajo:

<form id="contactform" method="POST">
    <input type="text" name="name" placeholder="Your name">
    <input type="email" name="_replyto" placeholder="Your email">
    <input type="hidden" name="_subject" value="Website contact" />
    <textarea name="message" placeholder="Your message"></textarea>
    <input type="text" name="_gotcha" style="display:none" />
    <input type="submit" value="Send">
</form>
<script>
    var contactform =  document.getElementById('contactform');
    contactform.setAttribute('action', '//formspree.io/' + 'your' + '@' + 'email' + '.' + 'com');
</script>

Aquí he removido el atributo action del elemento <form>, y luego he usado un pequeño fragmento de JavaScript para establecerlo. También he dividido el string del correo electrónico en segmentos para hacerlo aún más oscuro para los spambots. Con toda confianza copia ésto y remplaza los segmetos del correo electrónico con el tuyo.

Probar tu Formulario

El paso final es asegurarte de que tu formulario funciona. Visita la página que contiene tu formulario en tu navegador web, llena el formulario y envíalo como lo haría cualquier usuario. Deberías recibir un correo electrónico de Formspree pidiéndote que confirmes tu correo electrónico.