Cómo Implementar Formularios en Sitios Estáticos

Los sitios web varían en diseño, finalidad y complejidad, pero generalmente son estáticos o dinámicos. Los sitios estáticos están pre-renderizados y sirven el mismo contenido a todos los visitantes. Su estructura simple significa que suelen ser fáciles de gestionar y tienen tiempos de carga rápidos. Por otro lado, los sitios dinámicos generan contenido sobre la marcha utilizando lenguajes de programación del lado del servidor.

Los sitios web estáticos carecen de soporte nativo para elementos interactivos como los formularios, ya que requieren funciones de procesamiento del lado del servidor, como el almacenamiento de datos. Pero esto no es lo ideal: los formularios son un canal de comunicación con tus usuarios. Pueden ayudarte a recopilar información valiosa mediante sugerencias o consultas para que puedas mejorar la experiencia del usuario adaptando el contenido.

Esta guía te explica los pasos para crear un formulario para tu sitio estático, añadir un servicio de gestión de formularios y desplegar tu sitio con la ayuda del servicio de Alojamiento de Sitios Estáticos de Kinsta.

Elegir un servicio de gestión de formularios

Un servicio de gestión de formularios es un servicio externo que recopila y procesa datos de formularios para sitios web estáticos. Proporcionan la infraestructura del lado del servidor necesaria para gestionar los envíos de formularios, mejorando la funcionalidad e interactividad de tus sitios y manteniendo al mismo tiempo las ventajas de un sitio estático.

Cuando un usuario envía un formulario, los datos se envían al endpoint del servicio de gestión de formularios. A continuación, el servicio procesa los datos, los almacena de forma segura y envía notificaciones a los destinatarios adecuados.

Existen muchos servicios de gestión de formularios. Exploremos los más populares.

1. Formspree

Formspree es un servicio de gestión de formularios fácil de usar que simplifica la adición de formularios y la gestión de los envíos de formularios en sitios estáticos. Ofrece un plan gratuito con funciones básicas, como 50 envíos de formularios al mes, y planes de pago con funcionalidades más avanzadas, como listas seguras y protección contra el spam.

2. Formbucket

FormBucket proporciona una forma cómoda de recopilar y gestionar los envíos de formularios guardándolos en «cubos»(buckets), cada uno con una URL única. Puedes definir campos y establecer reglas de validación para los formularios que se ajusten a la imagen de marca de tu sitio web desde la sencilla página de Formbucket.

3. Getform

Getform es una plataforma de formularios que ofrece una forma sencilla y segura de gestionar los envíos de formularios. Getform proporciona una interfaz de usuario intuitiva para gestionar los envíos de formularios, notificaciones por correo electrónico e integraciones con servicios populares como Slack y Google Sheets.

Comparación de los servicios Formspree, Formbucket y Getform

Para facilitar la comparación, a continuación se muestra una tabla comparativa de los tres servicios anteriores y sus características clave:

Al elegir un servicio de gestión de formularios, debes tener en cuenta la facilidad de integración, las características y funcionalidades deseadas, el precio y la compatibilidad con tu plataforma de alojamiento. Evalúa los requisitos específicos de tu formulario y compara cada servicio de gestión de formularios para encontrar el que mejor se adapte a tus necesidades.

Configurar el servicio de gestión de formularios con Getform

Utilizar un servicio de gestión de formularios como Getform puede simplificar significativamente la gestión de los envíos de formularios en tu sitio web. Cuando un usuario envía un formulario, Getform se encarga del proceso, eliminando la necesidad de una API backend para procesar y almacenar estos envíos.

Esta perfecta integración te permite gestionar todas las respuestas de forma eficiente dentro de una bandeja de entrada de mensajes dedicada. Para empezar, asegúrate de que tienes conocimientos básicos de HTML, CSS y JavaScript y sigue estos pasos:

1. Regístrate para obtener una cuenta Getform.
2. Ve al panel de control de tu cuenta Getform y haz clic en el botón + Crear.
3. En el cuadro de diálogo que aparece, asegúrate de que está seleccionado Formulario. Proporciona un nombre de endpoint descriptivo y selecciona la zona horaria adecuada. A continuación, haz clic en Crear.

   

   Getform generará una URL del endpoint de envío del formulario, que deberás añadir al atributo action de tu elemento formulario.

Crea tu formulario con HTML y CSS

Ahora que has configurado el servicio de gestión de formularios, puedes utilizar HTML, CSS y JavaScript para crear tu formulario.

1. En tu terminal, crea una carpeta de proyecto llamada formularios y cambia el directorio actual por el directorio del proyecto:

   mkdir forms
   cd forms

2. Añade los siguientes archivos de proyecto:

   #unix-based systems
   touch index.html styles.css script.js 
   
   #windows
   echo. > index.html & echo. > styles.css & echo. > script.js

3. A continuación, crea un formulario HTML. Para los objetivos de esta guía, el código que se proporciona a continuación te ayudará a crear un formulario que incluya campos de entrada para un nombre y una dirección de correo electrónico, un área de texto para mensajes y un botón de envío. Puedes añadir este código a tu archivo index.html:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contact Form</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="container">
           <h1 class="form-title">Contact Us</h1>
           <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
               <div class="input-group">
                   <label for="name" class="form-label">Name:</label>
                   <input type="text" id="name" name="name" class="form-input" required>
   
                   <label for="email" class="form-label">Email:</label>
                   <input type="email" id="email" name="email" class="form-input" required>
   
                   <label for="message" class="form-label">Message:</label>
                   <textarea id="message" name="message" class="form-textarea" rows="4" required>
                   </textarea>
               </div>
   
               <div class="form-control">
                   <button type="submit" id="submitBtn" class="form-submit">Submit</button>
               </div>  
           </form>
       </div>
       <script src="script.js"></script>
   </body>
   </html>

4. Ve al panel de control de Getform y copia la URL del endpoint. A continuación, pega esta URL en el atributo action dentro de la etiqueta de apertura de tu formulario en el código HTML.
5. Por último, no dudes en añadir estilos CSS en el archivo styles.css para personalizar el diseño y el aspecto del formulario.

Implementar la validación de datos con JavaScript

La validación de datos comprueba que la entrada del usuario cumple criterios específicos y reglas de validación antes de procesarla o almacenarla.

La validación de datos ayuda a evitar el envío de datos incorrectos o malintencionados, proporciona a los usuarios información inmediata sobre los errores de entrada y garantiza que sólo se sigan procesando los datos válidos. Desempeña un papel vital en el mantenimiento de la integridad y precisión de los datos.

Hay varias maneras de implementar la validación de datos, incluyendo el uso de JavaScript para realizar la validación del lado del cliente, la validación del lado del servidor, o una combinación de ambos enfoques. En esta guía, vamos a aplicar la validación del lado del cliente al formulario de contacto para asegurarnos de que los usuarios no envían campos vacíos y de que el correo electrónico proporcionado tiene el formato correcto.

1. En primer lugar, define la función de validación añadiendo el siguiente código al archivo script.js:

   function validateForm() {
       const name = document.getElementById('name').value;
       const email = document.getElementById('email').value;
       const message = document.getElementById('message').value;
       if (name.trim() === '' || message.trim() === '') {
           alert('Please fill out all fields.');
           return false;
       }
       const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
       if (!emailRegex.test(email)) {
           alert('Please enter a valid email address.');
           return false;
       }
       return true;
   }

   La función validateForm() tiene dos finalidades: en primer lugar, comprueba si los campos de nombre y mensaje están vacíos; a continuación, valida el campo de correo electrónico utilizando una expresión regular y comprueba que la dirección de correo electrónico tenga un formato válido.

   Si los campos están vacíos o el formato del correo electrónico no es válido, la función se activará y mostrará un mensaje de alerta. Por el contrario, si todos los campos del formulario superan estas comprobaciones de validación, la función devuelve verdadero y el formulario se envía.

   También puedes añadir otras reglas de validación para garantizar la exactitud e integridad de los datos enviados. Por ejemplo, puedes verificar la longitud de las entradas del usuario o restringir a los usuarios el envío de determinados caracteres en el mensaje, ayudando a prevenir posibles vulnerabilidades de seguridad como ataques de inyección.

2. A continuación, llama a la función anterior para activar la validación utilizando un callback de escuchador de eventos de click. Este callback activa la función cada vez que un usuario pulsa el botón de envío. Para llamar a la función, añade el siguiente código a tu archivo script.js:

   document.addEventListener('DOMContentLoaded', function () {
   	const submitButton = document.getElementById('submitBtn');
   
   	if (submitButton) {
   		submitButton.addEventListener('click', function (event) {
   			event.preventDefault();
   			if (validateForm()) {
   				document.forms['contactForm'].submit();
   				resetFormAfterSubmission();
   			}
   			return false;
   		});
   	}
   });
   
   function resetFormAfterSubmission() {
   	setTimeout(function () {
   		const contactForm = document.forms['contactForm'];
   		contactForm.reset();
   	}, 500);
   }

   Ten en cuenta que la función preventDefault() se incluye en el código para evitar la acción de envío del formulario por defecto. De esta forma, puedes validar el formulario antes de enviar la información a Getform.

   Además, tras la validación y el envío correctos, se activa la función resetFormAfterSubmission(), que reinicia el formulario tras un retardo de medio segundo para permitir más envíos.

Despliega tu sitio estático con Kinsta

Kinsta ofrece una solución de alojamiento administrado, que te permite alojar diferentes proyectos web y bases de datos. Con su plan gratuito, puedes alojar hasta 100 sitios estáticos directamente desde GitHub, GitLab o Bitbucket.

Para desplegar tu sitio estático con Kinsta, primero, envía tus códigos a tu proveedor Git preferido. A continuación, sigue estos pasos:

1. Inicia sesión en el panel MyKinsta.
2. En el panel de control, haz clic en el menú desplegable Añadir Servicio y selecciona Sitio Estático.
3. Si es la primera vez que alojas un proyecto con Kinsta, selecciona y habilita tu proveedor de servicios Git preferido.
4. Selecciona el repositorio de tu proyecto.
5. Selecciona la rama a desplegar, y proporciona un nombre de sitio único.
6. Especifica la ruta raíz del directorio de publicación que contiene los archivos HTML y los activos para el despliegue añadiendo un período.
7. Por último, haz clic en Crear sitio.

En unos segundos, MyKinsta desplegará tu sitio.

Para integrar perfectamente el formulario en un sitio existente, copia y pega el HTML del formulario directamente en la sección deseada del sitio. Asegúrate de incluir las propiedades CSS y el código JavaScript asociados para garantizar un estilo y una funcionalidad coherentes.

Alternativamente, como ya has desplegado el formulario por separado, puedes proporcionar a los usuarios la URL — como un hipervínculo o un botón- en la que pueden hacer clic para acceder al formulario.

Para probar la funcionalidad del sitio en producción, haz clic en la URL del sitio proporcionada. Introduce los datos solicitados en el formulario para asegurarte de que funciona como se espera. Confirma que el formulario valida la entrada del usuario, muestra alertas de error cuando es necesario y envía correctamente datos válidos para su posterior procesamiento.

Tras enviar el formulario, Getform te redirigirá a una página de confirmación o de agradecimiento, indicando que el envío se ha realizado correctamente.

Para revisar las respuestas del formulario, navega a tu panel de control de Getform y visualiza los envíos en la bandeja de entrada de mensajes proporcionada.

Resumen

Ahora que has implementado con éxito el formulario, existen innumerables oportunidades para personalizarlo. Por ejemplo, puedes mejorar el diseño y la funcionalidad del formulario estilizándolo aún más con CSS o con tu lenguaje de preprocesamiento preferido e implementando técnicas de validación avanzadas.

Además del servicio de alojamiento de sitios estáticos, Kinsta también ofrece un servicio de Alojamiento de Aplicaciones, diseñado para aplicaciones más dinámicas, como aplicaciones web que necesitan procesamiento del lado del servidor, interacciones con bases de datos y otras funcionalidades complejas.

Con el acceso a ambos servicios, los usuarios obtienen una solución de alojamiento completa para gestionar una serie de proyectos web bajo un único ecosistema, desde sitios estáticos sencillos hasta aplicaciones web complejas.

Ahora puedes transformar tu sitio estático en una experiencia dinámica con servicios de gestión de formularios. ¿Qué servicio prefieres o con cuál tienes experiencia? Compártelo en los comentarios.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).

• Sitio web
• LinkedIn