Share
En este tutorial, veremos una forma sencilla de agregar formularios dinámicos y flexibles a sus sitios web estáticos..
Imagine que acaba de crear un sitio web con páginas estáticas, ya sea con la ayuda de Jekyll o simplemente utilizando algunos archivos HTML, pero ahora desea agregar un formulario de contacto. Puede vincularse a un servicio en línea, instalar algo creado previamente en su servidor o crear algo desde cero utilizando PHP. Esto significa que está totalmente restringido en el diseño, o está haciendo un mayor esfuerzo en un solo formulario que en todo el sitio.
¿Qué sucede si pudiera usar un servicio que le da control total sobre el formulario y que, sin embargo, no requiera que instale nada en su servidor? Ingrese a Formspree, un servicio en línea que le brinda la capacidad de crear formularios HTML funcionales sin el uso de PHP o JavaScript.
Permítame darle un breve resumen de los pasos necesarios para que su propio formulario esté en funcionamiento..
Lo primero que necesitarás es un formulario, que construiremos desde cero en HTML. Mi formulario será una forma muy sencilla para que las personas se pongan en contacto conmigo. 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 añadido un enviar de entrada y envuelto todos los campos con una elemento.
Podemos diseñar esta forma como queramos. No hay iframe o cualquier otra cosa para restringir lo que parece.
Para que Formspree maneje su formulario, deberá agregar el siguiente atributo de acción a su elemento:
Tenga en cuenta que los campos Nombre y Mensaje se nombran adecuadamente, pero he usado el especial "_responder a"Valor para el campo de correo electrónico. Formspree reconocerá este valor de atributo y, por lo tanto, me permitirá responder directamente al correo electrónico que se ingresa en el formulario cuando se envía.
Tambien puedo agregar _siguiente a otra entrada oculta para especificar qué URL me gustaría que se enviara a los usuarios a los que enviaron el formulario.
Para que sepa de dónde viene el envío, agregaré una línea de asunto. Puedo hacer esto agregando la siguiente entrada oculta:
Este campo no aparecerá cuando un usuario vea el formulario, pero el valor se usará para la línea de asunto cuando reciba un envío.
Construido en Formspree es un método "honeypot" de prevención de spam. La técnica de honeypot es bastante simple; oculta un campo dentro de su formulario que los usuarios no ven, pero los robots de spam lo hacen. El spambot llenará el campo, mientras que los usuarios no lo harán. Cualquier envío con este campo completado será considerado spam..
Puedes usar esta técnica agregando lo siguiente a tu formulario:
Es importante que uses un atributo de estilo para ocultar el campo. El navegador de los usuarios ocultará el campo usando CSS, pero el robot de acceso (probablemente) ignorará el CSS por completo y continuará llenando el campo. Al nombrar el campo "_gotcha”, Formspree lo reconocerá e ignorará cualquier envío hecho con este formulario.
Para mayor seguridad puede envolver su correo electrónico en JavaScript. Esto reducirá la probabilidad de que los robots de spam vean y seleccionen su correo electrónico del HTML. Echa un vistazo a lo que he hecho a continuación:
Aquí he quitado el acción atributo de la elemento, y luego utiliza un pequeño trozo de JavaScript para configurarlo en su lugar. También he desglosado la cadena de correo electrónico en segmentos para que sea aún más oscuro para los robots de spam. Siéntase libre de copiar esto y reemplazar los segmentos del correo electrónico con los suyos..
El último paso es asegurarse de que su formulario funcione. Visite la página que contiene su formulario en su navegador web, complete el formulario y envíelo como lo haría un usuario normal. Debería recibir un correo electrónico de Formspree pidiéndole que confirme su correo electrónico..
Haga clic en el enlace de confirmación y estará todo listo!
Nota: tendrá que pasar por este proceso de confirmación cada vez que agregue el formulario a una nueva página.
La API de Formspree ofrece una forma fácil y muy flexible de agregar formularios a una página web. Perfecto para sitios estáticos!
Accentsconagua