Cómo estilizar formularios en Contact Form 7 usando CSS en WordPress
¿Quieres que tus formularios de WordPress luzcan tan bien como el resto de tu sitio? Con Contact Form 7, tienes control total sobre la apariencia de tu formulario usando CSS. Esta guía te lleva paso a paso por el proceso de personalizar los formularios de Contact Form 7, permitiéndote crear una experiencia fluida y alineada con tu marca para tus visitantes.
¿Por qué personalizar los formularios de Contact Form 7?
Contact Form 7 es uno de los plugins más populares de WordPress para crear formularios, pero su apariencia predeterminada es básica. Personalizar el estilo en temas clásicos de WordPress te permite:
Haz coincidir la identidad visual de tu sitio
Mejora la usabilidad y accesibilidad
Haz que los formularios sean más atractivos y profesionales
Paso 1: Identifica los selectores CSS de tu formulario
Antes de comenzar a personalizar, necesitas saber qué selectores CSS apuntan a los elementos de tu formulario.
Cada formulario de Contact Form 7 está envuelto en una clase única: .wpcf7
Elementos individuales como campos de entrada, áreas de texto y botones de enviar usan etiquetas HTML estándar
Paso 2: Agrega CSS personalizado a tu sitio de WordPress
Puedes agregar CSS de dos maneras principales:
A través del Personalizador:
Ve a Apariencia > Personalizar > CSS adicional y pega tus estilos.
NOTA: Agrega tu CSS al archivo style.css de tu tema hijo para personalizaciones más avanzadas.
Paso 3: Escribe tu CSS personalizado
Aquí tienes algunos ejemplos comunes para comenzar, usando los componentes “text” y “submit” del formulario como ejemplo:
Personaliza todos los formularios de Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Las pseudoclases en CSS, como :hover, te permiten personalizar elementos según su estado o la interacción del usuario. Por ejemplo, la pseudoclase :hover aplica estilos cuando el usuario pasa el cursor sobre un botón o campo. Esto se usa comúnmente para resaltar botones o cambiar su color al pasar el mouse, haciendo tus formularios más interactivos y atractivos visualmente. Otras pseudoclases útiles incluyen :focus (cuando un campo está seleccionado) y :active (cuando un elemento está siendo presionado). Usar pseudoclases ayuda a mejorar la experiencia del usuario al brindar retroalimentación inmediata mientras interactúan con tu formulario.
Apunta a un formulario específico
Cada formulario tiene un ID único, como #wpcf7-f123-o1. Úsalo para personalizar solo ese formulario:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Reemplaza f123-o1 con el ID real de tu formulario. Puedes encontrar el ID único de tu formulario viendo la página donde está incrustado tu formulario de Contact Form 7, haciendo clic derecho sobre el formulario y seleccionando “Inspeccionar” (o “Inspeccionar elemento”) en tu navegador. Busca el <div> con la clase .wpcf7; el ID aparecerá como algo similar a id="wpcf7-f123-o1" en el código HTML. Usa este ID en tu selector CSS para personalizar solo ese formulario específico.
Paso 4: Usa las clases integradas de Contact Form 7
Contact Form 7 agrega automáticamente clases a los elementos, facilitando aún más la personalización. Por ejemplo:
.wpcf7-form-control – Todos los controles del formulario
.wpcf7-submit – El botón de enviar
También puedes agregar tus propias clases en el editor de formularios para tener aún más control.
Ejemplo
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Paso 5: Previsualiza y ajusta
Después de guardar tu CSS, actualiza tu sitio para ver los cambios. Usa la herramienta de inspección de tu navegador para ajustar los estilos en tiempo real antes de copiarlos en tu sitio. Asegúrate de limpiar la caché de tu sitio web después de hacer cambios para que las actualizaciones sean visibles para los visitantes.
Aquí tienes ejemplos de antes y después de un formulario en un sitio web de demostración, donde usamos el código CSS del Paso 3 para que los cuadros alrededor de cada campo del formulario sean azules.
Consejos rápidos para un mejor estilo de formularios
Hazlo accesible: Asegura buen contraste de color y tamaños de fuente legibles
Usa espacios: Agrega relleno y márgenes para un aspecto limpio y ordenado
Resalta errores: Personaliza los mensajes de error con un color claro (como rojo) para ayudar a los usuarios a corregir errores
Prueba en móvil: Asegúrate de que tus formularios se vean bien en todos los dispositivos
Solución de problemas
Si tus estilos no aparecen, prueba estos pasos:
Limpia la caché de tu navegador y sitio – A veces los archivos en caché impiden que se muestre el nuevo CSS. Si usas un plugin de caché o alojamiento administrado, limpia esas cachés también.
Revisa problemas de especificidad en CSS – Si tus estilos no se aplican, intenta hacer tus selectores más específicos para sobrescribir los estilos existentes.
Asegúrate de editar el archivo o sección de CSS correcta – Verifica que estés agregando tu código en el lugar correcto, como el panel de CSS adicional, el style.css de tu tema hijo o un plugin de CSS personalizado.
Revisa las clases CSS por errores o faltas de ortografía – Busca nombres de clase mal escritos, espacios innecesarios o el uso accidental de la clase incorrecta. También verifica que la clase que estás personalizando realmente exista en el HTML de tu formulario.
Revisa clases duplicadas o en conflicto – Asegúrate de que la clase que usas no esté ya aplicada en otro lugar con estilos diferentes que puedan sobrescribir tus cambios.
Sigue buenas prácticas generales – Usa nombres claros y consistentes para tus clases, termina cada regla CSS con punto y coma y siempre cierra correctamente los bloques de código con una llave (}).
Revisar cuidadosamente tu código para estos problemas comunes te ayudará a asegurar que tus estilos personalizados se muestren correctamente en tu sitio.
Ejemplo: CSS personalizado completo para un formulario de Contact Form 7
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Aquí tienes un ejemplo de un formulario personalizado con el código CSS anterior. Este código CSS personaliza la apariencia de varios elementos clave en tu formulario de Contact Form 7. Aplica a todos los campos de texto, correo electrónico y áreas de texto, dándoles un borde gris claro, esquinas redondeadas, relleno cómodo y un ancho consistente para un aspecto limpio y moderno.
El código también personaliza el botón de enviar con un fondo verde, texto blanco, bordes redondeados y una fuente en negrita y fácil de leer. Cuando los usuarios pasan el cursor sobre el botón de enviar, el color de fondo se vuelve verde más oscuro, proporcionando retroalimentación interactiva.
Agregar CSS: temas clásicos vs temas de bloques
Los pasos de esta guía para personalizar los formularios de Contact Form 7 con CSS están diseñados para Temas Clásicos en WordPress. Los Temas Clásicos, como el popular Astra, usan el Personalizador, donde puedes agregar fácilmente CSS personalizado en la sección “CSS adicional”. Esto hace que sea sencillo personalizar tus formularios y ver los cambios en vivo.
Sin embargo, si tu sitio usa un Tema de Bloques (a veces llamado tema de Edición Completa del Sitio o FSE), el proceso es diferente. Los Temas de Bloques no siempre incluyen el Personalizador o el campo “CSS adicional” por defecto. En su lugar, usas el Editor del Sitio para hacer cambios de diseño. Aunque puedes ajustar estilos globales para colores, tipografía y diseño, agregar CSS personalizado arbitrario no siempre está disponible en la interfaz.
Qué hacer si usas un Tema de Bloques
Abre tu panel de WordPress y ve a Apariencia > Editor (el Editor del Sitio).
En el Editor del Sitio, busca el panel de Estilos (el ícono de círculo medio sombreado).
Algunos Temas de Bloques ahora ofrecen una opción de “CSS adicional” en el panel de Estilos, pero esto depende de tu tema y versión de WordPress.
Si no ves una opción para agregar CSS personalizado, puedes usar un plugin como WPCode para agregar CSS personalizado en todo el sitio. WPCode es fácil de usar para principiantes y funciona con cualquier tema, asegurando que puedas personalizar tus formularios incluso si tu tema no permite editar CSS directamente en la interfaz. Solo ten en cuenta que instalar este plugin puede afectar el estilo de otros formularios preexistentes en tu sitio web.
Recursos adicionales
Personalizar tus formularios de Contact Form 7 es una forma sencilla pero poderosa de mejorar la experiencia de usuario en tu sitio. Con solo unas líneas de CSS, puedes hacer que tus formularios luzcan y se sientan como una parte natural de tu marca.