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.
A partir de aquí, para añadir el código CSS tienes dos opciones:
Una vez creado el tema hijo harás los cambios en el fichero
Si tienes dudas, en estos artículos te explico lo necesario:
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”] :
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:
Y ahora te mostraré algunos ejemplos de personalización:
Ahora, el aspecto de nuestro formulario tendrá este aspecto:
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
El ejemplo usa la propiedad
Para corregirlo —rompiendo el texto del botón en varias líneas— añade este CSS adicional:
Ahora el texto aparece repartido en varias líneas que se adaptan al tamaño de la pantalla.
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
Modifica el formulario para que siga esta plantilla:
Aquí puedes ver el código de mi ejemplo:
Luego, añade éste código CSS adicional al tema del mismo modo que viste anteriormente:
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.
Este código CSS sirve para sustituir el texto que aparece por defecto Seleccionar archivo por SUBIR.
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.
Si te fijas en los componentes, verás que ahora tienen un parámetro
Por último, añade este código Javascript a WordPress.
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.
Aquí puedes ver el resultado:
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.
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.
Una vez creado el tema hijo harás los cambios en el fichero
style.css
que encontrarás en la carpeta del tema hijo.Si tienes dudas, en estos artículos te explico lo necesario:
Modificando los estilos
Todos los elementos de los formularios de Contact Form están englobados en un div con la clasewpcf7
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%;
}
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.
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. 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;
}
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;
}
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:.wpcf7-submit {
white-space: normal !important;
overflow-wrap: break-word !important;
}
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
:<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>
<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>
.wpcf7-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.flex-item {
display: flex;
flex-direction: column;
flex-basis: 45%;
margin:auto;
}
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;
}
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]
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);
Aquí puedes el resultado, el botón de subir ficheros ahora tiene un aspecto propio.
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;
}
¿Te ha gustado? Mándame ánimos con un comentario. ¡Gracias!
Mabel.
Comentarios
Publicar un comentario