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

Con el auge de los sitios estáticos, los desarrolladores necesitan un servicio que pueda manejar formularios. El formulario de contacto del sitio web estático es el caso más común, y en este artículo, aprenderá cómo agregar uno con Creador de formularios Kwes.

Agregar un formulario de contacto a un sitio estático podría ser un desafío porque el sitio estático generalmente no tiene un backend que pueda manejar los envíos de formularios. En ese caso, podríamos usar un servicio que haría esto por nosotros. Hay muchos servicios, como los formularios de Netlify o Typeform, pero en este caso vamos a utilizar el servicio de Kwes.

Vamos a construir un formulario de contacto con los siguientes campos:

elemento de formularioCampo de formulario
NombreEntrada de texto
Correo electrónicoEntrada de correo electrónico
MensajeEntrada de área de texto
BotónBotón de enviar

Todos los campos de entrada deben ser obligatorios y el campo del formulario de correo electrónico debe validarse.

Integración

Como vamos a agregar el formulario Kwes a nuestro sitio, primero debemos registrarnos de forma gratuita.

Después de registrarse, agregue un nuevo sitio web y un nuevo formulario desde el panel de control de Kwes.

tablero-kwes.png

Para completar la integración, debe agregar un archivo JavaScript en la parte inferior de su body etiqueta de su página de contacto.

<script src="https://kwes.io/js/kwes.js"></script>

Estoy usando el generador de páginas estáticas Hexo para mi sitio, pero funciona con otros generadores de sitios estáticos como Hugo o Jekyll. Dado que la mayoría de los generadores de sitios estáticos son compatibles con Markdown, puede pegar el código de contacto directamente en Markdown y también funcionaría. De lo contrario, podría crear una página o diseño independiente y pegar el código allí.

Consejo profesional: no es necesario agregar un archivo 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 hacer esto, agregue las etiquetas y atributos de formulario habituales.

Consejo profesional: no olvide agregar etiquetas con atributos for con ID de entrada coincidentes para que su formulario sea más accesible.

Ahora debemos agregar los atributos de Kwes. Es importante envolver su formulario en un div con el kwes-from clase. Después de esto, agregue el action atribuir a la form elemento y, a continuación, agregue rules atributo a sus campos de entrada. El código debería ser algo como esto:

<div class="kwes-form">
  <form method="POST" action="https://kwes.io/api/foreign/forms/youruniqueid">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" rules="required">
    <label for="email">E-mail</label>
    <input type="email" name="email" id="email" rules="required|email|max:255">
    <label for="message">Message</label>
    <textarea name="message" id="message" rules="required"></textarea>
    <button type="submit">Submit</button>
  </form>
</div>

Podías ver todas las opciones de reglas en la Documentación oficial de Kwes.

Antes de publicar el formulario, primero debe probar el formulario. Con Kwes, puedes hacerlo de dos maneras diferentes:

  • proporcionando un dominio de prueba en la configuración del sitio, o
  • agregando atributo HTML mode="test" a su elemento de formulario.

Durante el modo de prueba, todos sus envíos no afectarían los datos de su plan. Puede ver los datos de prueba en el tablero cambiando el interruptor. Tan fácil como eso.

El último paso es establecer el código en el modo de producción. Ahora deberíamos sentarnos y esperar los envíos sabiendo que Kwes se encargará de todo por nosotros, desde la validación de formularios, pasando por el filtrado de spam, hasta el envío de correos electrónicos de confirmación.

Puede personalizar el estilo de los mensajes de notificación para que coincidan con su marca. Ver el ejemplo de un formulario de contacto personalizado en mi sitio.

Características de Kwes

Kwes tiene un incorporado lógica para mostrar u ocultar cualquier contenido en una condición. Por ejemplo, podría mostrar diferentes detalles del plan según el plan seleccionado.

Para mí, la ventaja más significativa es la validación de formularios. La validación toma medidas tanto en el sitio frontend como en el backend. 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 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.

Cuando su formulario es público, existe una alta probabilidad de que reciba un envío de spam. Con Kwes, puede obtener protección contra correo no deseado e incluso ayudar a Kwes a saber qué mensajes filtrar.

Si desea tener más control sobre su formulario e integrarlo con otros servicios como Zapier, puede hacerlo. Incluso podría aprovechar la API de Kwes y administrar los envíos por su cuenta.

Conclusión

Kwes tiene un costo, pero debe pensar en ahorrarse a sí mismo 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 enfocan en otras partes de su proyecto o negocio.

Similar Posts

Leave a Reply

Your email address will not be published.