Mejorar el aspecto de los formularios en Contact Form7 con CSS

Muchas de las personas que utilizamos WordPress para construir sitios web, hacemos uso del plugin Contact Form7. Hoy aprenderemos a mejorar el aspecto de los formularios en contact form7 con CSS sin mucho conocimiento de programación.

En la siguiente imagen muestro un formulario sencillo que permitirá a los visitantes de nuestro sitio contactar con nosotros.

Como podéis ver creamos los campos básicos, pero el look & feel es bastante más vistoso de lo que ofrece contact form7.

¿librerías necesarias para mejorar el aspecto de contact form7 con CSS y JS?

Vamos a empezar añadiendo la librería de jquery si es que tu tema no la trae añadida por defecto.
También tenemos que añadir la librería de bootstrap, tanto el css como el js.

Ve a CDN y coge las URLs de estas librerías de allí.

Librería JQuery actual: http://code.jquery.com/jquery-3.3.1.js
Librería bootstrap actual: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css y  https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Como extra, la librería font-awesome, aunque esta no la añadiré en header ya que viene por defecto en muchos temas: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Yo soy partidario de no hacer llamadas externas desde el código fuente de nuestros sites, pero aquí cada uno siéntase libre de hacer lo que considere.

Lo más optimo sería descargar las librerías y añadirlas en sus lugares correspondientes dentro de nuestro tema.
Si estás interesado en hacer esto y no sabes como, coméntalo aquí mismo.

Añadiendo librerías bootstrap y jquery a nuestro site

Este punto no tiene dificultad, tendrás que añadir en el header.php de tu tema unas líneas.

Vamos al menú de WordPress: Apariencia -> Editor.
Una vez aquí buscamos en la lista de la derecha (Cabecera del tema: header.php).

<!-- Luis Jordán :: luisjordan.net - Libreriás bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bien pues tras guardar los cambios ya tenemos las librerías añadidas.
Puedes comprobarlo recargando tu site (vacía caché si tienes algún plugin como WP Caché) y viendo el código fuente de la página.

Debería aparecer al principio este trozo de código añadido.

Mejorar el aspecto de los formularios en Contact Form7

Llega lo más divertido..

Nosotros cuando creamos un formulario en contact form7, en la parte privada tiene un aspecto como lo que muestro a continuación.

<label> Nombre (*)
    [text* ] </label>

<label> Dirección de correo electrónico (*)
    [email* ] </label>

<label> Teléfono
    [tel ] </label>

<label> Asunto
    [text ] </label>

<label> Mensaje (*)
    [textarea* ] </label>

Esto tiene un estilo super plano y muy poco atractivo.
Son muchas las páginas de contacto que veo con este formato y pienso… ¿esta es la gente que va a hacer mi web?Primero deberían mejorar la suya. Y por favor, no apliquemos la frase de «casa de herrero cuchillo de palo».

Borremos todo lo que ahí aparece, no os preocupéis, guardarlo si queréis en un txt por si queréis recuperarlo.

Formulario a doble columna con contact form7

Haciendo uso de bootstrap, vamos a crear 2 columnas en nuestro espacio de formulario.

<div class="col-md-6">
  Espacio 1
</div>
<div class="col-md-6">
  Espacio 2
</div>

Ahora si guardamos veremos poco más que esto…

Vamos a reemplazar Espacio 1 por los campos que deseemos del formulario.

<label> Nombre (*)
    [text* form7-contacto-nombre] </label>
<label> Dirección de correo electrónico (*)
    [email* form7-contacto-email] </label>
<label> Teléfono
    [tel form7-contacto-telefono] </label>

Continuamos reemplazando Espacio 2 por los campos del formulario restantes.

<label> Asunto
    [text form7-contacto-asunto] </label>
<label> Mensaje (*)
    [textarea* form7-contacto-mensaje] </label>

[submit "Enviar"]

Bien, ya hemos mejorado notablemente la apariencia del formulario con muy poco trabajo.
Ahora podemos ver algo como esto (los estilos dependerán de vuestro tema).

Mejorar el aspecto de los formularios en Contact Form7 con css

Vamos a poner con css que cada vez que se pulse sobre un input o textarea se aplique un colorido al borde de este.
Lo que viene siendo la propiedad focus.

De nuevo en el menú de la izquierda vamos a Apariencia -> Personalizar y ahí vamos a editar nuestro CSS.
Depende del tema que tengáis se hará de una forma u otra.

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
textarea {
  width: 100% !important;
  height: 45px !important;
  color: #666;
  border: 1px solid #ccc;
  border-radius: 0px !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border: 1px solid #97c11f;
}

Al guardar lo que hemos creado en CSS para nuestro formulario de contacto, veremos que al seleccionar uno de nuestros inputs ya aparece el sombreado de color en su borde.

Y ahora vamos a la mejor parte del artículo, vamos a añadir iconos en inputs de contact form7.

Añadiendo iconos en contact form7 de WordPress

Volvemos a nuestro editor de contact form7 y volvemos a borrar todo.
Hasta ahora mi intención ha sido que se comprenda cómo hacer un formulario a doble columna con contact form7 y añadir en los inputs la propiedad focus.

Empecemos de nuevo añadiendo este código fuente.

<div class="col-md-6">
  
  <div class="label-inputs">Nombre (*)</div>
  <div class="input-group control-altura-image-input mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon"><i class="fa fa-user"></i></div>
    <input type="text" name="form7-contacto-nombre" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
  </div>
  <span class="wpcf7-form-control-wrap form7-contacto-nombre"></span>

  <div class="label-inputs">Dirección de correo electrónico (*)</div>
  <div class="input-group control-altura-image-input mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon"><i class="fa fa-envelope-square"></i></div>
    <input type="email" name="form7-contacto-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false">
  </div>
  <span class="wpcf7-form-control-wrap form7-contacto-email"></span>

  <div class="label-inputs">Teléfono</div>
  <div class="input-group control-altura-image-input mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon"><i class="fa fa-phone-square"></i></div>
    <input type="tel" name="form7-contacto-telefono" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false">
  </div>
  <span class="wpcf7-form-control-wrap form7-contacto-telefono"></span>

</div>

<div class="col-md-6">

  <div class="label-inputs">Asunto</div>
  <div class="input-group control-altura-image-input mb-2 mr-sm-2 mb-sm-0">
    <div class="input-group-addon"><i class="fa fa-font"></i></div>
    <input type="text" name="form7-contacto-asunto" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
  </div>
  <span class="wpcf7-form-control-wrap form7-contacto-asunto"></span>

  <div class="label-inputs">Mensaje (*)</div>
  <textarea name="form7-contacto-mensaje" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea>
  <span class="wpcf7-form-control-wrap form7-contacto-mensaje"></span>

<p><input type="submit" value="Enviar" class="wpcf7-form-control wpcf7-submit"></p>
</div>

¿Qué estamos haciendo aquí?, pues estamos insertando a fuego el código fuente que genera contact form7.
A su vez, estamos añadiendo elementos gráficos para enriquecer el look & feel.

Explico basándome en uno de los inputs creados.

Aquí creamos una capa para mostrar la etiqueta de cada input.
<div class=»label-inputs»>Nombre (*)</div>

Caja necesaria para encapsular las imágenes dentro de los inputs.
<div class=»input-group control-altura-image-input mb-2 mr-sm-2 mb-sm-0″> <div class=»input-group-addon»>

Icono
<i class=»fa fa-user»></i>

Input del formulario.
</div> <input type=»text» name=»form7-contacto-nombre» value=»» size=»40″ class=»wpcf7-form-control wpcf7-text wpcf7-validates-as-required» aria-required=»true» aria-invalid=»false»> </div>

Área para mostrar mensajes respectivos a este input.
<span class=»wpcf7-form-control-wrap form7-contacto-nombre»></span>

Y para terminar, vamos a añadir estas líneas que os sonarán más.
Estas líneas son necesarias para que los eventos del formulario funcionen correctamente.

<label class="form7-contacto-hidden"> Nombre (*)
    [text* form7-contacto-nombre] </label>
<label class="form7-contacto-hidden"> Dirección de correo electrónico (*)
    [email* form7-contacto-email] </label>
<label class="form7-contacto-hidden"> Teléfono
    [tel form7-contacto-telefono] </label>
<label class="form7-contacto-hidden"> Asunto
    [text form7-contacto-asunto] </label>
<label class="form7-contacto-hidden"> Mensaje (*)
    [textarea* form7-contacto-mensaje] </label>

Y en nuestra hoja de estilos añadimos…

.form7-contacto-hidden{
  display: none;
}

Y hasta aquí nuestra entrada de hoy.
Como siempre digo, espero que os haya sido de utilidad.

Versiones utilizadas, tiempo y dificultad de desarrollo:

Plataforma: WordPress 4.9.4
Contact Form7 versión 5.0
Tiempo de desarrollo: 25 minutos
Dificultad: Iniciación.