Advertisement
  1. Web Design
  2. Form Design
Webdesign

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

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Javier Salesi (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:

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>:

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.

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.

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:

É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:

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:

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.

¡Da click en el enlace de confirmación y habrás terminado!

Nota: necesitarás cumplir con éste proceso de confirmación cada vez que agregues el formulario a una nueva página.

Conclusión

La API de Formspree ofrece una forma muy fácil y flexible de agregar formularios a tu página web. ¡Perfecto para sitios estáticos!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.