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”] :

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

La línea 1 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):

 1 2 3 4 5 6 7 8 91011121314151617181920212223242526272829
/*-----------------------------
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 una caja de color.

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

12345678
.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.

Este código te sirve de ejemplo para cambiar el color y la forma del botón de enviar.

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

El botón, ahora se ve así:

O hacer el botón con los bordes redondeados:

123456
.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.

El tamaño de los campos de contact form ocupan todo el espacio disponible. Es fácil cambiarlos a un tamaño que necesites. En este ejemplo lo cambio a 200px:

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

Como puedes ver con unos conocimientos mínimos de CSS puedes personalizar el diseño del formulario gracias al personalizador de WordPress.


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

Mabel.

Aprende más

Creative Commons License

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