Cómo manejar formularios estáticos: la forma del lado del cliente

Programación

Los formularios son elementos interactivos que se utilizan para obtener información del usuario para su posterior procesamiento. La mayoría de las veces, los formularios solo se utilizan para recibir información que no requiere procesamiento, sino solo recibir datos, esto podría ser un formulario de contacto, confirmar su asistencia, obtener una cotización, etc.

Tradicionalmente, los formularios se administran con la ayuda de un servidor (también conocido como lado del servidor), pero esto es más eficiente cuando procesa los datos del formulario, tal vez un formulario de registro de usuario donde los datos del formulario se validan, autentican y guardan. en una base de datos.

Cuando crea un formulario simple en el que solo recibe datos del usuario y no los procesa (es decir, formulario de contacto), el objetivo es obtener los datos del formulario y enviarlos al correo electrónico de soporte de su empresa (por ejemplo, info @ ..., soporte @…)

Usar un servidor aquí no es ideal y es solo una exageración, una forma muy común de hacerlo es a través de PHPMailer (la biblioteca clásica de envío de correo electrónico para PHP). PHPMailer se usa con PHP y requiere muchas configuraciones de servidor aburridas. ¿Qué pasa si solo está creando un sitio estático? Debería haber una forma más fácil de hacer este lado del cliente, ¿verdad?

En este artículo, le presentaré dos métodos de manejo de datos de formulario del lado del cliente en sitios estáticos. Hay otros métodos, pero he usado estos dos y los considero los mejores y más fáciles (sin resentimientos :)).

SIN configuraciones agitadas, SIN servidores, SIN cosas serias, simplemente construya su formulario, haga algunos pequeños ajustes, el usuario envía y bingo, se dirige directamente a su correo electrónico designado. :)

FORMULARIO DE INICIO

Para el propósito de este artículo, he creado un formulario básico con HTML5 y Bootstrap 4, puede bifurcarlo desde el Codepen a continuación.

Actualmente, este formulario no utiliza ninguno de los métodos de los que hablaremos, al final del artículo, proporcionaré codeel formulario completo para ambos métodos, luego puede actualizar el formulario y probar. He añadido un poco de validación, no te preocupes por eso

¡Ahora, comencemos!

MÉTODO UNO

Formspree proporciona formularios HTML funcionales a través de su plataforma sin PHP o JavaScript. Envíe su formulario a su URL y será reenviado a su correo electrónico. No se requiere PHP, Javascript o registro, ¡perfecto para sitios estáticos!

¡¡¡Espera espera espera!!! también es de código abierto

MANEJO DE FORMAS CON FORMSPREE

  • Crea tu formulario, ya lo hemos hecho

(Siga el siguiente paso y actualice este formulario para usar este método)

Ahora repasemos las cosas nuevas que se agregaron anteriormente.

  • Cambiamos el atributo de acción del formulario a //formspree.io/[email protected][reemplace [email protected] con su propio correo electrónico]. Esto es simplemente enviar los datos del formulario a formspree y luego a su correo electrónico. Formspree actúa aquí como un tercero.
  • Agregué algunos atributos de nombre a los campos de entrada. Esto es solo configurar cada campo para que podamos tomar los datos y enviarlos a formspree.

- Para la dirección de correo electrónico, agregué un atributo _replyto (esto solo significa que podrá responder rápidamente al usuario que envió originalmente por correo electrónico)

- Agregué un atributo _subject . Este valor se utiliza para el asunto del correo electrónico para que pueda responder rápidamente a los envíos sin tener que editar la línea de asunto cada vez.

- Agregué un atributo _next . De forma predeterminada, después de enviar un formulario, se muestra al usuario la página “Gracias” de Formspree. Puede proporcionar una URL alternativa para esa página así:

  • Agregamos un atributo de valor al botón de enviar [ valor = "Enviar" ]

Este es nuestro Thanos, un clic en este botón y su formulario se borra y sus datos se envían a su correo electrónico.

Eso es todo por el uso de formspree :) Aunque hay otras opciones de configuración para varias otras funciones, puede verificar aquí.

COSAS A TENER EN CUENTA!

  • No es necesario que se registre para usar formspree, solo agregue su atributo de acción y estará listo para comenzar. Solo te registras si quieres un plan de pago.
  • Asegúrese de que su formulario tenga el method=”POST”atributo
  • Formspree usa reCAPTCHA para identificar envíos de spam. Después de que un usuario haga clic en nuestro Thanos , tendrá que hacer una verificación CAPTCHA. Una forma genial de detener los envíos de spam.
  • Después de eso, el formulario se envía a su correo electrónico designado y se muestra la página de éxito personalizada.
  • Formspree no lee los datos de su formulario, no tienen acceso a ellos, son solo un servicio de entrega, usted les envía su paquete sellado, se lo entregan a su cliente, ¿no? :)
  • ¡Formspree es gratis para 50 presentaciones por formulario por mes ÚNICAMENTE! Si necesita más, puede actualizar al plan de pago.
  • Formspree tiene planes gratuitos y de pago. Los planes pagos tienen varias otras características como panel de administración, envíos ilimitados, manejo de AJAX, etc.Los planes pagos y sus características se pueden encontrar aquí.

Si está construyendo un sitio básico, no debe preocuparse por los planes pagados, los planes pagados son principalmente necesarios para las aplicaciones empresariales y las empresas, el plan gratuito cubriría todas sus necesidades. También uso esto para algunos proyectos de clientes :)

  • Los usuarios premium de Formspree pueden enviar formularios a través de AJAX. Simplemente configure el encabezado Accept en application / json. Si está usando jQuery, esto se puede hacer así:
 $.ajax({ url: "//formspree.io/FORM_ID", method: "POST", data: {message: "hello!"}, dataType: "json" });

Bueno, esto es para usuarios pagos :)

Si no usa jQUERY como yo y está cansado de la larga sintaxis predeterminada de AJAX, consulte la biblioteca simpleAJAX, una biblioteca simple que construí para manejar solicitudes HTTP. Al igual que:

const http = new simpleAJAX; const data = { "name": "Bolaji Ayodeji", "email": "[email protected]", "message": "hi" }; http.post('//formspree.io/FORM_ID', data, (err, user) => { if(err) { console.log(err) } else { console.log(user); } });

¡Una estrella me haría feliz! :)

Si le gusta React, ZEIT tiene una guía completa sobre el uso de Formspree con la aplicación Create React, con instrucciones de implementación. ¡Muy recomendable!

MÉTODO DOS

Netlify ofrece manejo de formularios para sitios implementados en su plataforma.

FORM HANDLING WITH NETLIFY

  • Create an account on Netlify and deploy your site there.

Please watch this 14min video by @JamesQuick below if you don’t know what Netlify is. Learn about all of the awesome features in Netlify like Continuous Deployment, Lambda Functions, Split Testing, Preview Branches, and more!

  • Now that you have deployed your site, let’s create the form again

Now let’s go over the new stuff I added above.

  • Netlify is quite easier, you simply add the netlify attribute data-netlify="true"to the tag, and you can start receiving submissions in your Netlify site admin panel.
  • Here, the action attribute serves as your custom success page

That’s all, your form submissions goes straight to your Netlify admin panel

Settings > Build & deploy > Environment > Environment variables

(Watch the video above if you don’t understand what the panel means)

Things to note!

  • Your site must be hosted on netlify to use this method
  • You must add the netlify attribute for the form to work
  • You can find all submissions to your Netlify forms in the Forms tab of your site dashboard. Settings > Forms
  • Netlify has free and paid plans too
  • Netlify has several built-in notification options for verified form submissions, including email and Slack notifications. (Only available in Paid plans). You can find them in Settings > Forms > Form notifications.
  • Netlify also integrates with Zapier, so you can set up triggers that send your verified form submissions to any of the 500+ applications in their catalogue.
  • All notification emails are sent from [email protected], and any replies to a notification will go to that address. If you would like to respond to a form submitter, you will need to enter their address manually.
  • Netlify Forms can receive files uploads via form submissions too :).

To do this, add an input with type="file" to any form. When a form is submitted, a link to each uploaded file will be included in the form submission details.

  • Netlify is limited to 100 submissions per month and 10MB uploads per month for the FREE plan, If you want more, you’ll need to upgrade

And that’s all!!

FINAL HTML FORM CODE

 Name: Name must be between 2 and 20 characters Email: Enter a valid email address Telephone: Enter a valid number 
 Name: Name must be between 2 and 20 characters Email: Enter a valid email address Telephone: Enter a valid number

CONCLUSION

One thing to note about formspree is that the free version leaves your email address exposed to scrapers and bots so you might want to set up a temporary disposable email address while you use it. If you want to hide your email address by default, you’ll need to upgrade your plan.

Do you want extra practice? Watch this tutorial video below by Brad Traversy and learn how to add a contact or any type of form to your website by using the Netlify form feature including file uploads and spam filtering. [Full guide + practical code]

Useful Links

  • netlify.com/docs/form-handling
  • forestry.io/blog/5-ways-to-handle-forms-on-..
  • gridsome.org/docs/guide-forms
  • zeit.co/guides/deploying-react-forms-using-..
  • zeit.co/guides/deploying-statickit-with-zei..

Thanks for reading!