Cambiar la apariencia de Contact Form 7 con hojas de estilo personalizadas

30 de mayo - 2024

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.

Suscríbete:

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.

Formulario original del tema Divi
Formulario original del tema Divi

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:

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.

Configuración de formulario en Contact Form 7
Configuración de formulario en Contact Form 7

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.

Código CSS aplicado en el "Personalizador de WordPress para cambiar la apariencia de Contact Form 7
Código CSS aplicado en el "Personalizador de WordPress

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.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento