Disponer de un formulario en las páginas webs ayuda a mantener una interacción y una línea directa con los usuarios que visitan nuestro sitio. Pero, si utilizas Contact Form 7, te habrás dado cuenta que el aspecto que presenta una vez publicado no es el más bonito. Así que voy a enseñarte a cambiar la apariencia de Contact Form 7 para que se vea como a ti te gustaría que fuese.
Por qué utilizar Contact Form 7 para crear formularios
Desde hace ya muchos años, el plugin Contact Form 7 ha demostrado ser un creador de formularios muy confiable, a pesar de ser totalmente gratuito.
No solo puedes crear formularios de contacto sencillos, Contac Form 7 te permite añadir funcionalidades como adjuntar archivos, crear encuestas o realizar pagos a través de pasarelas como PayPal.
El plugin inicial puede verse ampliado con otros complementos que han ido apareciendo en el tiempo, según surgían las diferentes necesidades de la gente que lo utilizaba.
Es cierto que hay opciones más amigables, fáciles de utilizar y con todas las opciones que puedas llegar a necesitar, pero hay que pagar por ellas. Contact Form 7 te ofrece todo de forma gratuita, pero en ocasiones es necesario tener algunos conocimientos más avanzados para dejar la apariencia de Contact Form 7 acorde con la línea visual del sitio donde se integra.
Contact Form 7 con Divi
Para el ejemplo voy a utilizar el tema Divi, un tema premium para WordPress que me permite crear cualquier tipo de web, y porque es el que más utilizo para mis clientes y para sitios propios.
A pesar de esto, todo el código que voy a poner se puede utilizar en cualquier web que utilice el plugin Contact Form 7 para crear formularios, independientemente del tema que esté instalado.
Puedes consultar la información del artículo "Cómo adjuntar archivos a un formulario de contacto en Divi" para ver cómo se puede utilizar el código ya incluido en el tema para adaptarlo al aspecto de Divi, sin añadir líneas de código CSS adicional.
No voy a entretenerme en explicar cómo se crea un nuevo formulario, puedes consultarlo también en el enlace del párrafo anterior.
Donde añadir el código CSS para adaptar la apariencia de Contact Form 7
Con el tema Divi es muy sencillo porque aún se mantiene el "Personalizador de temas" y la pestaña "CSS adicional", pero en los temas de bloques han eliminado el acceso directo a esta característica del personalizador.
Aunque no dispongamos del personalizador de WordPress, se puede añadir código CSS para cambiar la apariencia de Contact Form 7 de varias formas:
- En los temas clásicos y temas premium con la opción disponible del "Personalizador de temas".
- Todavía es posible acceder a la pestaña "CSS adicional" en algunos temas de bloques, pero tenemos que escribir la URL completa en el navegador - https://tudominio/wp-admin/customize.php (Debes cambiar "https://tudominio" por la URL de tu sitio)
- Utilizar un plugin que permita integrar código CSS en WordPress de forma sencilla, como "Simple Custon CSS", o "Simple Custom CSS and JS".
- Creando un tema hijo y añadir el nuevo código al archivo de los estilos (style.css) creado en ese nuevo tema. Te explico cómo crear un tema hijo en este artículo.
Hay otros métodos, como crear un archivo externo y luego enlazarlo con una función específica desde los archivos del tema, pero creo que no será necesario teniendo alguna de las opciones anteriores disponibles.
Clases de referencia en Contact Form 7
Cada campo del formulario, o los botones que incorpora, disponen de un nombre de referencia a nivel de código (llamado clase) que hay que nombrar antes de añadir las modificaciones.
Para hacerlo lo más sencillo posible, en esta primera parte sólo me centraré en las clases principales existentes de los campos más utilizados, para que el código pueda funcionar en cualquier sitio web y en cualquier formulario:
CLASES GENERALES DEL FORMULARIO CONTACT FORM 7:
- .wpcf7-form - Engloba todos los elementos del formulario.
- .wpcf7-form-control Engloba cada uno de los campos o input.
- .wpcf7-text - Todos los campos donde se introduce texto o números.
- .wpcf7-tel - Solo cambia el campo del teléfono.
- .wpcf7-email - Campos que recogen el correo electrónico.
- .wpcf7-textarea - El campo de texto para el mensaje o que ocupa varias filas.
- .wpcf7-acceptance - Casilla de aceptación.
- .wpcf7-file - Bloque para añadir archivos adjuntos.
- .wpcf7-submit - Hace referencia al botón de enviar.
CLASES INDIVIDUALES DEL FORMULARIO CONTACT FORM 7:
- .wpcf7 input[type="text"] - Campos de texto como el nombre, los apellidos o el asunto.
- .wpcf7 input[type="email"] - Campo de correo electrónico.
- .wpcf7 input[type="tel"] - Para el número de teléfono.
- .wpcf7 input[type="file"] - Botón y campo de adjuntar archivos.
- .wpcf7 input[type="number"] - Cualquier campo de sólo números.
- .wpcf7 textarea - Área de texto del mensaje.
Con estas referencias ya podemos empezar a dar forma y cambiar la apariencia de Contact Form 7.
Cómo se aplican los estilos a los campos del formulario de contacto
Para modificar un estilo de un campo concreto, cogemos la clase correspondiente al campo que queremos cambiar y añadimos entre corchetes las opciones de los cambios.
Es aconsejable poner siempre delante la clase que identifica al formulario de Contact Form 7 (.wpcf7) para evitar que se modifiquen otros posibles elementos de la web.
Un ejemplo básico, aplicado a los campos más comunes como son los de texto, sería asignar un color de fondo, un color de texto y cambiar la anchura por defecto:
1 2 3 4 5 | .wpcf7 input[type="text"] { background-color: #eeeeee; color: black; width: 50%; } |
Contact Form 7 responsive y adaptable a dispositivos
Se necesitan dos partes o fases para poder modificar correctamente un formulario creado con Contact Form 7, la primera es configurar el formulario con los campos que necesitamos dentro de las opciones del plugin, y la segunda modificar las hojas de estilo desde el "Personalizador de WordPress" o, en su defecto, en el tema hijo o plugin adicional.
Crear un formulario en Contact Form 7 para modificar el aspecto
Para conseguir un aspecto más moderno o cercano a nuestro gusto, eliminaré los textos de cada campo y los colocaré en su interior. Al utilizar la función placeholder "_", no será necesario mantener la etiqueta label.
En su ligar colocaré cada campo dentro de una caja div para poder añadir clases adicionales cuando las necesite, como el caso de dividir los campos en dos columnas.
Puesto que el campo para subir o adjuntar archivos es un campo especial, lo voy a colocar para mostrar como cambiar el aspecto del botón.
1 2 3 4 5 6 7 | <div class="parteizq">[text* your-name autocomplete:name placeholder "Nombre"]</div> <div class="partedch">[text tus-apellidos id:apellidos placeholder "Apellidos"]</div> <div>[email* your-email autocomplete:email placeholder "Corréo electrónico"]</div> <div>[text* your-subject placeholder "Asunto"]</div> <div>[textarea your-message placeholder "Escribe tu mensaje"]</div> <div>[file archivo-adjunto limit:2000000 filetypes:jpg|pdf|docx|doc id:archivos]</div> <div>[submit "Enviar"]</div> |
Añadir códigos CSS para cambiar la apariencia
No pretendo que aprendas a manejar todas las funciones de las hojas de estilo CSS, pero puedes consultar la ayuda, si lo necesitas, de las siguientes páginas web donde puedes aprender mucho:
Con el siguiente código ajustamos automáticamente el formulario al ancho disponible de la pantalla donde se muestre, modificamos todos los campos del formulario y adaptamos los botones de Subir archivo y Enviar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | .wpcf7-form-control { width: 100%; } .wpcf7 div { margin-bottom: 3%; } /*ASPECTOS DE CAMPOS*/ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="number"], .wpcf7 input[type="file"], .wpcf7 textarea { background-color: #eee; color: #999; border-width: 0; border-radius: 0; padding: 16px; display: block; } /*BOTON ENVIAR*/ .wpcf7-submit { max-width: 120px; background-color: #e09900; color: #ffffff; border: 2px solid #e09900; border-radius: 0; padding: 10px 12px; font-size: 18px; float: right; } /*CAMPOS A LA MITAD*/ .wpcf7 .parteizq { width: 49%; float: left; } .wpcf7 .partedch { width: 49%; float: right; } /*BOTON ARCHIVO*/ .wpcf7-file:before { content:"Seleccionar archivo"; visibility:visible; position: absolute; display: block; background-color: #e09900; color: #ffffff; padding: 10px 12px; left: 5px; top: 8px; } @media (max-width: 767px) { .wpcf7 .parteizq, .wpcf7 .partedch { width: 100%; margin: 0 0 3% 0; } } |
Se trata del mismo código que utilizo en el vídeo, con una pequeña corrección de un fallo de márgenes, así que si quieres saber lo que hace cada función te recomiendo que lo veas hasta el final, donde muestro como puedes variar este mismo código para conseguir un aspecto totalmente diferente.
Tal vez te interese...
Como redirigir un dominio a otro dominio con una extensión diferente
3 Problemas de seguridad en WordPress críticos y sus soluciones
Contenido desplegable en WordPress para ocultar o mostrar información
Cómo hacer una copia de seguridad en WordPress de nuestro sitio
Quitar la palabra CATEGORÍA de la página de archivos
0 comentarios