Ejemplos de diseño personalizado en formularios Contact Form

¿Cómo personalizar el diseño de un formulario de contacto? Contact Form 7 no facilita ninguna opción que lo permita desde el administrador de WordPress.

En este artículo te enseño cómo hacer personalizaciones de diseño utilizando CSS. Es la misma técnica que utilizan los creadores de temas. De este modo, si tienes unos conocimientos básicos de CSS puedes adaptar el diseño del formulario al propio diseño de tu página.


Para modificar el aspecto de formularios Contact Form hay que utilizar CSS

En los ejemplos encontrarás como modifico el diseño de un formulario para que actúe de forma responsiva adaptando su diseño tanto a equipos de escritorio como a dispositivos móviles o como poner un color de fondo al formulario.

Qué necesitas

Lo básico es instalar el plugin Contact Form y al menos tener un formulario en una de tus páginas.

A partir de aquí, para añadir el código CSS tienes dos opciones:

  • 1. Utilizar la opción CSS Adicional –> Es la opción sencilla.
  • 2. Crear un tema hijo –> Algo más compleja pero recomendable.

La opción CSS Adicional es rápida y sencilla aunque te recomiendo crear un Tema Hijo o Child Theme, así te aseguras no perder los cambios con actualizaciones o cambios de tema.

Una vez creado el tema hijo los cambios los harás en el fichero style.css que encuentras dentro de la carpeta del tema hijo.

Si tienes dudas, en estos artículos te explico lo necesario:

Modificando los estilos

Los formularios contact form están englobados en un div que tiene la clase wpcf7 y que actúa como contenedor o wrapper para cualquier elemento de Contact Form 7.

Así, para hacer modificaciones es necesario sobrescribir las propiedades de los elementos del formulario que están englobados por la clase wpcf7.

De este modo, si quieres cambiar el aspecto de un campo que pide un correo electrónico, utilizarás el selector .wpcf7 input[type=“email”] :

.wpcf7 input[type="email"]
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

La primera línea es el selector. Indica que la selección es para todos los elementos con la clase wpcf7 y que dentro tienen un elemento input cuyo atributo type es email.

Otras clases propias de todos los formularios Contact Form son:
  • .wpcf7-form Engloba todos los elementos del formulario. Todos los inputs y los botones de enviar o cancelar.
  • .wpcf7-form-control Engloba cada uno de los campos o input.
  • .wpcf7-text Todos los campos dónde introducir texto.
  • .wpcf7-email Los campos para recoger correos electrónicos.
  • .wpcf7-textarea Un texarea o un campo de texto que tiene varias filas.
  • .wpcf7-submit Es el botón que envía el formulario.

En la imagen inferior puedes ver un formulario de contacto. Junto a cada campo puedes ver la clase que tiene asociada:

Y ahora te mostraré algunos ejemplos de personalización:

Ejemplo 1. Diseño Responsive en Contact Form

Para conseguir que los formularios de Contact Form se adapten a los dispositivos móviles añade este código al fichero style.css del tema hijo que estás utilizando (o con la opción de CSS adicional como te mostré arriba):

/*-----------------------------
Diseño responsivo y ajustable y 
con un ancho del 100% 
para el plugin Contact Form 7 
-------------------------------*/

div.wpcf7 .wpcf7-form-control {
  max-width: 95%;
}

.wpcf7 select {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0;
    padding: 4px;
    text-indent: 0px;
    width: 100%;
    z-index: 100;
}


.wpcf7-text {
  width: 100%;
}

.wpcf7-textarea {
  width: 100%;
}

Ejemplo 2. Formulario en un fondo de color

En este caso, voy a establecer como gris el color de fondo del formulario y le añadimos unos bonitos bordes redondeados:

.wpcf7 { 
  background-color: #f5f5f5;   /* Color de fondo */
  border: 2px solid #eee;      /* borde para el formulario */
  padding:20px 10px 10px 10px;
  -webkit-border-radius: 4px;  /* bordes redondeados */
  -moz-border-radius: 4px; 
  border-radius: 4px; 
}

Ahora, el aspecto de nuestro formulario tendrá este aspecto:

Ejemplo 3. Cambiar el color del botón enviar

Con este código CSS puedes cambiar el color y la forma del botón «Enviar» del formulario de contacto.

.wpcf7-submit{
background-color:black!important;
color:white!important;
border:none;
padding:20px;
}

Tras añadir el código CSS al personalizador el botón se verá así:

Puedes hacer que el botón tenga los bordes redondeados añadiendo la propiedad border-radius:

.wpcf7-submit{
background-color:black!important;
color:white!important;
border: 2px solid red;
border-radius: 25px;
}

Ejemplo 4. Cambiar el tamaño de los campos

Por defecto, el tamaño de los campos de Contact Form ocupan todo el espacio disponible. Así, en pantallas muy grandes el campo del formulario será mucho mayor que el texto que se escribirá resultando poco natural, por eso es mejor establecer un tamaño máximo fijo.

Usando la propiedad max-width limito el tamaño de los campos a un máximo de 200px:

.wpcf7-text {
    max-width: 200px!important;
}

Ejemplo 5. Botón de envío en varias líneas

Si el botón del formulario tiene un texto muy largo no se verá completo en la pantalla de un móvil. Como en este ejemplo:

Para corregirlo —rompiendo el texto del botón en varias líneas— añade este CSS adicional:

.wpcf7-submit {    
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

Ahora el texto aparece repartido en varias líneas que se adaptan al tamaño de la pantalla.

Ejemplo 6. Formulario en 2 columnas

Este ejemplo saca todo el partido a CSS con un formulario en dos columnas y diseño flexbox.

Para que funcione hay que modificar la plantilla del formulario de Contact Form. Te enseño paso a paso:

En el menú principal, pulsa en Contacto y luego en Formularios de Contacto. Pasa el ratón sobre el formulario de contacto que quieres modificar y pulsa en Editar:

Modifica el formulario para que siga esta plantilla:

<div class="flex-item">
  <!-- Pon aquí los Elementos que se ven 
    en la izquierda -->
</div>
<div class="flex-item">
  <!-- Pon aquí los Elementos que se ven 
      en la derecha -->
</div>

Aquí puedes ver el código de mi ejemplo:

<div class="flex-item">
  <label> Tu nombre (requerido)
    [text* your-name] </label>

  <label> Tu correo electrónico (requerido)
    [email* your-email] </label>

  <label> Asunto
    [text your-subject] </label>

  <label> Acepto la política de privacidad
    [acceptance acceptance-59] </label>

  [submit "Enviar"]
</div>

<div class="flex-item">
  <label> Tu mensaje
    [textarea your-message] </label>
</div>

Luego, añade éste código CSS adicional al tema del mismo modo que viste anteriormente:

.wpcf7-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;  
}

.flex-item {
    display: flex;
    flex-direction: column;
    flex-basis: 45%;
    margin:auto;
}

Y aquí puedes ver el resultado. Un formulario de contacto en dos columnas con flexbox, sin utilizar tablas y que se verá perfectamente en cualquier tema de WordPress.

Ejemplo 7. Personalizar el botón de subir archivos

El botón para subir ficheros en Contact form también puede personalizarse, tanto su aspecto como el propio texto del botón. En este ejemplo sustituyo el texto que aparece por defecto —Seleccionar archivo— por el texto “SUBIR”.

.wpcf7-file {
  visibility: hidden;
}

.wpcf7-file:after {
  content:'SUBIR';
  visibility: visible;
  display: block;
  position: absolute;
  background-color: navy;
  color: white;
  padding: 15px;
  top: 2px;
}

Tiene un inconveniente, y es que desaparece el texto informativo que muestra el nombre del fichero seleccionado. Para mantenerlo hay que emplear una solución diferente, usando Javascript.

En primer lugar modifica el formulario de Contacto form añadiendo un nuevo campo de tipo texto. Este campo servirá para mostrar el nombre del fichero seleccionado.

[file your-file filetypes:jpg|txt limit:2mb id:fileuploadfield ]
[text uploadtextfield id:uploadtextfield class:uploadtextfield]

Si te fijas en los componentes, verás que ahora tienen un parámetro id. Lo utilizará javascript para seleccionar cada elemento.

Por último, añade este código Javascript a WordPress.

(function($) {
  $('#fileuploadfield').change(function() {
    $('#uploadtextfield').val($(this).val());
  });
})(jQuery);

Este código detecta cuando un usuario selecciona un fichero y muestra su nombre en el campo de texto con id “uploadtextfield”.

Aquí puedes el resultado, el botón de subir ficheros ahora tiene un aspecto propio.

Como puedes ver, gracias al personalizador de WordPress y con unos conocimientos mínimos de CSS puedes cambiar el aspecto de tus formularios de contacto: diseño responsive, poner color de fondo, cambiar el color del botón de envío o crear un formulario en dos columnas.


¿Te ha gustado? Mándame ánimos con un comentario. ¡Gracias!

Mabel.

Lecturas recomendadas

Creative Commons License

Esta obra está bajo una licencia de Creative
Commons Reconocimiento-NoComercial-CompartirIgual
4.0 Internacional
.