Formularios de contacto en HTML5
Novedades

Uno de los elementos básicos y más comunes dentro del desarrollo web son los formularios de contacto en HTML5. Una forma directa, cómoda y simple con la que el usuario puede comunicarse con el propietario o empresa responsable de la web.

Un formulario web se genera a partir de código HTML y CSS para desarrollar su maquetación y aspecto visual, combinándolo con algún lenguaje de programación, como PHP o Javascript, que realice las funciones de envío, mensajes de errores en los datos, etc.

📧 Cómo hacer un formulario en HTML5

Con la versión HTML5 todo se hizo mucho más sencillo. Si bien una función PHP sigue siendo necesaria para recopilar los datos y que éstos se guarden y envíen en forma de correo electrónico, se simplificó en gran medida el código a añadir.

Todo esto supone menos trabajo para los desarrolladores, y además conlleva otras ventajas como una mayor rapidez de carga, o la menor posibilidad de errores o incompatibilidades en el código.

Cómo hacer un formulario de contacto en HTML5

Básicamente, un formulario HTML5 consta de tres elementos importantes.

  1. La etiqueta <form> englobará el contenido del formulario, y en ella debemos incluir los siguientes atributos, que son clave para las directrices del envío:
    1. Action. Aquí debemos especificar la URL a la que se nos dirigirá una vez enviado correctamente el formulario. Puede ser la propia URL actual, o bien una distinta.
    2. Method. Indicaremos el método de envío. El más habitual y lógico es el método POST, que hará un envío oculto de la información. El método GET incluirá los datos a modo de parámetros en la URL. Este segundo método no es nada recomendable para un formulario de este tipo. El método POST debe ir acompañado de una función PHP que recoja los datos y los formatee a modo de email, enviándolos a la dirección deseada.
  2. Los campos a rellenar. Mediante etiquetas HTML especificaremos los campos a rellenar. Pueden ser de distintos tipos. Algunos de los más comunes son:
    1. Input type= “text”. El campo input puede ser a su vez de distintos tipos como luego veremos. El más común y genérico es el de texto.
    2. Textarea. Un área de texto más extensa que un input. Típico cuadro de “Deja tu mensaje” u “Observaciones”.
    3. Select. Campo donde seleccionar una opción a modo de desplegable.
    4. Input type= “file”. Para adjuntar un archivo.
  3. Botón de envío. Una vez rellenados los datos, mediante este botón daremos la orden para enviarlos por correo electrónico. Para ello se inserta una etiqueta input, pero aplicando el atributo type=”submit”. El texto a mostrar en el botón se señala con value=”Texto del botón”.

📧 Novedades de HTML5

Una vez vistos los elementos básicos de un formulario, vamos a ver algunas de las novedades más interesantes que presentó HTML5.

Novedades y etiquetas HTML5

Ya hemos dicho que la etiqueta input genera un campo del formulario que puede ser de diversos tipos (atributo type). HTML5 fue una evolución en este sentido, ya que surgieron nuevos y se mejoraron los existentes. Éstos son algunos de los más destacados y usados:

  • type= “tel”. Se lo aplicamos al campo que queremos que recoja un número de teléfono.
  • type= “email”. Si marcamos este tipo se verificará que el texto insertado cumpla el formato de una dirección de correo electrónico: algo@algo.com.
  • type= “url”. Se controla que el texto ingresado en este campo tenga el formato de una dirección web.
  • type= “date”. Nos da opción de indicar una fecha (día/mes/año) a través de un calendario emergente.
  • type= “time”. En él podemos señalar una hora con el formato de horas y minutos.
  • type= “number”. Sirve para introducir un valor numérico.
  • type= “range”. También nos permite introducir un valor numérico, pero por medio de un campo deslizante, slider, en el que podemos especificar un valor mínimo (min) y máximo (max). Bien es cierto que HTML5 crea la barra y el puntero selector, pero para mostrar numéricamente el valor elegido debemos insertar una pequeña función Javascript.
  • type= “color”. Nos muestra un selector de colores emergente para que elijamos el deseado.
  • type= “search”. Crea una caja de búsqueda. Para su funcionamiento se requiere programación en algún lenguaje como PHP.

Los campos del formulario pueden llevar una serie de atributos. Algunos de las más útiles para las etiquetas input, textarea y select son éstos:

  • min y max. En un campo input puede restringir los valores máximos y mínimos.
  • maxlenght. Señala el máximo de caracteres para el campo.
  • placeholder. En los input y textarea es un texto que aparece por defecto antes de que el usuario lo rellene. Puede emplearse como la propia indicación para el texto que debe insertarse (por ejemplo, “Escribe aquí tu correo electrónico”), o bien como información añadida a modo de ejemplo (“ejemplo: info@abrelink.com“).
  • autofocus. Si aplicamos este atributo en el primer campo del formulario, nos aseguramos de que, inmediatamente después de cargarse la página, el usuario pueda escribir directamente sin necesidad de clicar sobre él.

Otra novedad es el elemento datalist. A un campo input podemos aplicarle distintas sugerencias de respuesta a través de la etiqueta <datalist>, aplicando un select con sus option correspondientes.

📧 Validación de formularios HTML5

Una de las novedades más interesantes que ofrece HTML5 es la posibilidad de que el navegador verifique algunos de los datos insertados y compruebe si son válidos, informando de ello al usuario.

Validación de formularios HTML5

Como se ha comentado antes, campos como el teléfono, email, url, etc, serán analizados para ver si se ajustan al formato de lo que se solicita.

Por otro lado, el atributo pattern permite indicar un patrón y ajustar aún más las condiciones que debe seguir el campo. Por ejemplo, en un campo teléfono donde nos interese recoger teléfonos móviles de España, podemos decirle que el dato debe ser numérico y de 9 cifras: pattern=”[0-9]{9}”.

📧 Campos obligatorios en un formulario HTML5

Insertando el atributo required en un campo input, textarea, select… podemos hacer que sea obligatorio, con lo que el usuario no podrá enviar el formulario si lo deja vacío. Si se deja sin rellenar, al pulsar el botón de envío se mostrará un mensaje de error, pidiendo al usuario que lo rellene.

📧 Ejemplo de formularios HTML 5 y CSS3

Combinando estas mejoras que ofrece HTML5 con todas las posibilidades que ofrece a día de hoy el CSS, podemos desarrollar un formulario perfectamente funcional y responsive, válido para todos los dispositivos y navegadores.

Aparte de toda la programación que hemos visto que podemos ahorrar en validación, el CSS3 implementaba importantes mejoras en el aspecto visual, pudiendo configurarse de una manera mucho más sencilla lo que antes o bien no podía hacerse o requería de Javascript.

Un ejemplo de código para un formulario HTML5, y que integraría algunas de las características vistas, podría ser éste:

<h2>FORMULARIO DE CONTACTO:</h2>
<form action="enviar-formulario.php" method="post"><label>Nombre:</label>
<input maxlength="50" name="nombre" required size="50" type="text" autofocus placeholder="Escribe tu nombre" /><label>Email:</label>
<input name="email" required type="email" placeholder="Escribe tu email" />
<label>Teléfono</label>
<input name="telefono" pattern="[0-9]{9}" required type="tel" placeholder="XXXXXXXXX" />
<label>Tu web:</label>
<input name="tu-url" type="url" placeholder="www.miweb.com" />
<label form="cars">Seleccionar navegador:</label>
<select name="navegador" required>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Edge">Edge</option>
</select>
<label>Aficiones:</label>
<input list="aficiones" type="text" />
<datalist id="aficiones">
<option value="Viajar"></option>
<option value="Leer"></option></datalist>
<label>Rango:</label>
<input max="20" min="5" type="range" />
<label>Selecciona tu color favorito:</label>
<input name="color-favorito" type="color" />
<label>Fecha:</label>
<input name="fecha" type="date" />
<label>Hora:</label>
<input type="time" name="hora">
<textarea cols="80" name="observaciones" rows="8">
Puedes escribir aquí tus observaciones...</textarea>
<input type="submit" value="Enviar" />
</form>

Y podríamos darle algo de estilo con instrucciones CSS como éstas:

form {padding: 20px;}

label {margin: 15px 0px; clear: both; display: block;}

input {padding: 4px; border: solid 1px #262626;}

::placeholder, option, value {color: #31a3dd; font-weight: bold;}

*:focus {border-color: #31a3dd; }

input[type="submit"] {padding: 10px 20px; text-transform: uppercase; cursor: pointer; background-color: #31a3dd; border: solid 1px #ededed;}

input[type="submit"]:hover {background-color: #82C8EA;}

📧 Formularios de contacto en WordPress

Todo lo presentado en este post lo emplearíamos a la hora de desarrollar un sitio web mediante un editor de código. Pero, como ya sabemos, a día de hoy todo es aún más sencillo, ya que la mayoría de desarrolladores empleamos algún CMS como WordPress para nuestros proyectos.

Mediante plugins, como el célebre Contact Form 7, todo ese código se va a poder generar e incluir de una manera aún más sencilla en nuestra web. Con un editor muy intuitivo podremos crear nuestro formulario con los campos que necesitemos. Además podremos configurar de una forma muy sencilla los envíos, sin necesidad de saber nada de programación.

Únicamente bastaría con modificar un poco el aspecto, en el caso de que el CSS que tenga nuestro theme por defecto no nos convenza.

Espero que este post te ayude a crear el formulario HTML5 que estás buscando. Y si te ha gustado, por favor, compártelo.

Más información sobre formularios en:

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

1 × tres =