Cómo añadir un formulario de contacto a un sitio web estático

Este mensaje fue publicado originalmente en Codementor . Con el aumento de sitios estáticos, los desarrolladores necesitan un servicio que pueda manejar formularios. Añadir un formulario de contacto a un sitio estático podría ser un reto porque el sitio estático generalmente no tiene un backend que pueda manejar los envíos de formularios. En ese caso, podríamos utilizar un servicio que haría esto por nosotros. Hay muchos servicios disponibles, como Netlify o Typeform, pero en este caso, vamos a utilizar el servicio Kwes, vamos a construir un formulario de contacto con los siguientes campos:

| Elemento de formulario |Formulario | Campo de formulario
| -------------- | ---------------- |
| Nombre | Entrada de texto | Entrada de texto
| Correo electrónico: Entrada de correo electrónico: Entrada de correo electrónico: Entrada de correo electrónico: Entrada de correo electrónico: Entrada de correo electrónico
| Mensaje | Entrada de texto | Entrada de texto
| Todos los campos de entrada deben ser obligatorios, y el campo del formulario de correo electrónico debe ser validado.

Integración

Después de registrarse, agregue un nuevo sitio web y un nuevo formulario del panel de control de Kwes Para completar la integración, debe agregar un archivo JavaScript en la parte inferior de su etiqueta
body

de su página de contacto.
Consejo: No hay necesidad de añadir archivos JavaScript a las páginas que no tienen un formulario de contacto.

A continuación, agregaríamos un formulario HTML a nuestra página de contacto. Para ello, añada las etiquetas y atributos de formulario habituales.

Consejo para profesionales: No olvide añadir etiquetas con atributos que coincidan con los ID de entrada para que su formulario sea más accesible.

Ahora debemos agregar los atributos de Kwes. Es importante envolver su formulario en una clase

div

con la clase

kwes-from

. Después de esto, añada el atributo

action

al elemento

form

y luego añada el atributo

rules

a sus campos de entrada. El código debería ser algo así:

Namelabel>E-maillabel>Messagelabel>>textarea>Submitbuttonbutton>form>div>div>

You could see all the rules options at the Kwes official documentation.Antes de publicar el formulario, debe probarlo primero. Con Kwes, puedes hacerlo de dos maneras diferentes:

  • proporcionando un dominio de prueba en la configuración del sitio, o
  • añadiendo el atributo HTML

    mode="test"

    a su elemento de formulario.

Durante el modo de prueba, toda su presentación no afectará a los datos de su plan. Puede ver los datos de la prueba en el tablero de instrumentos cambiando la palanca. Así de fácil. El último paso es ajustar el código al modo de producción. Ahora debemos sentarnos y esperar a las presentaciones sabiendo que Kwes se encargará de todo, desde la validación de formularios, pasando por el filtrado de spam, hasta el envío de correos electrónicos de confirmación, pudiendo personalizar el estilo de los mensajes de notificación para que se ajusten a su marca. Vea el ejemplo de un formulario de contacto personalizado en mi sitio.

Características de Kwes

Kwes tiene una lógica incorporada para mostrar u ocultar cualquier contenido en una condición. Para mí, la ventaja más significativa es la validación de formularios. La validación se lleva a cabo tanto en el sitio del módulo de acceso como en el del módulo de servicio. No tener que reinventar la rueda y escribir reglas de validación una y otra vez ahorra tiempo, pero también es una tarea que me gustaría evitar con mucho gusto en cada proyecto. Con más de 50 reglas de validación, Kwes debería cubrir la mayoría de los escenarios, incluso los más complicados, como el manejo de fechas, horas, contraseñas y carga de archivos. Con Kwes, usted podría obtener protección contra spam e incluso ayudar a Kwes a aprender qué mensajes filtrar, si quiere tener más control sobre su formulario e integrarlo con otros servicios como Zapier, puede hacerlo. Incluso puede aprovechar la API de Kwes y gestionar los envíos por su cuenta.

Conclusión

Kwes viene con el costo, pero usted debe pensar en ahorrarle a usted y a su equipo horas de tiempo de desarrollo. Creo que vale la pena dejar la validación a los desarrolladores que se especializan en este campo y se centran en otras partes de su proyecto o negocio.

Etiquetas

Desarrollo WebDesarrolladoresCodificaciónProgramaciónHtmlCssJavascriptServerless