..:: DesarrolloWeb1106 realizamos Páginas Web desde Venezuela, Diseño y Desarrollo de Paginas Web ::..
Ejemplos de diseño personalizado en formularios Contact Form
Ejemplos de diseño personalizado en formularios Contact Form

Ejemplos de diseño personalizado en formularios Contact Form

En este artículo te enseño cómo hacer personalizaciones en el diseño de Contact Form 7 utilizando CSS usando las mismas técnicas que utilizan los diseñadores. Con unos conocimientos básicos de CSS podrás cambiar el diseño de tus formularios a tu gusto.

Qué necesitas

Lo básico es instalar el plugin Contact Form 7 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:

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

Añadir CSS Adicional es una técnica 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 harás los cambios en el fichero style.css que encontrarás en la carpeta del tema hijo.

Modificando los estilos

Todos los elementos de los formularios de Contact Form están englobados en un div con la clase wpcf7 y que actúa como contenedor o wrapper. Utilizaremos este selector para modificar cualquier aspecto del formulario.

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 que encontrarás en los formularios Contact Form:

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

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. Cambiar el color de fondo

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

.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;
}

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;
}

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. En pantallas muy grandes el campo del formulario será muy largo resultando poco natural. La solución es establecer un tamaño máximo fijo.

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

El ejemplo usa la propiedad max-width para limitar el tamaño de los campos a 200px.

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 aparecerá repartido en varias líneas que se adaptan al tamaño de la pantalla con el codigo css que tienes arriba.

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:

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

[submit «Enviar»]

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

También puedes personalizar el botón para subir ficheros en Contact Form, tanto su aspecto como el propio texto del botón.

Este código CSS sirve para sustituir el texto que aparece por defecto Seleccionar archivo por 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 como veremos a continuación:

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.

Los componentes, 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”.

Ejemplo 8. Centrar el formulario

Para centrar el formulario en el espacio disponible de la pantalla añade este código CSS:

.wpcf7-form {
width: 50%;
margin: 0 auto!important;
}

Espero te haya servido el material para hacer tus cambios. Y recuerdalo compartirlo!…