Los estilos predeterminados de Contact Form 7 son lo primero que nota tras instalar el plugin. Campos de entrada estrechos, un botón de envío sin gracia y mensajes de error sin el menor esfuerzo de diseño. Después de configurar una docena de sitios, pierde la cuenta de cuántas veces editó manualmente style.css, y siempre es la misma rutina.

Un archivo de exportación de formulario preparado resuelve este problema. Usted importa un formulario listo para usar con estilos preconfigurados: los campos, el botón, la validación y reCAPTCHA se ven decentes inmediatamente después de la activación. Solo queda reemplazar las direcciones de correo electrónico y la ruta del logotipo para su proyecto específico.

A continuación, un desglose completo de las reglas CSS que usamos en nuestros proyectos, más un archivo de exportación para un inicio rápido. Los estilos se han probado en Contact Form 7 versión 6.x y están vigentes a fecha de 2026.

💡 Resumen rápido:

• Descargue el archivo de exportación del formulario e impórtelo en WordPress mediante el método estándar
• Reemplace las direcciones de correo electrónico en la plantilla de correo y la ruta del logotipo
• Copie los estilos CSS en el style.css de su tema o en CSS adicional
• Adapte los colores y las fuentes a la identidad de su proyecto si es necesario

1. Archivo de exportación: importación y configuración inicial

El archivo de exportación contiene un formulario de contacto listo para usar con los campos: nombre, correo electrónico, teléfono, área de texto y Google reCAPTCHA. El formulario está creado en cuatro versiones de idioma: ruso, ucraniano, inglés y alemán.

La importación se realiza con la herramienta estándar de WordPress: Herramientas → Importar → Contact Form 7 → Ejecutar importador. Seleccione el archivo XML descargado y los formularios aparecerán en la sección «Formularios».

Inmediatamente después de la importación, vaya a la plantilla de correo de cada formulario en la pestaña Correo. Reemplace tres cosas:

• El campo «Para»: introduzca su correo electrónico real;
• El campo «De»: la dirección debe pertenecer al dominio del sitio (por ejemplo, [email protected]), de lo contrario los correos acabarán en spam;
• La ruta del logotipo: busque la etiqueta <img src="/Logo-150x150.png"> en el cuerpo del correo y reemplácela por la URL completa del logotipo de su sitio.

Sin reemplazar las direcciones de correo electrónico, el formulario no enviará mensajes. Esta es una razón común por la que CF7 «no funciona» después de la importación.

2. Estilos CSS: desglose completo

A continuación se muestra el conjunto de estilos que aplicamos a cada nuevo proyecto. Cópielo en el style.css del tema activo o en CSS adicional (Apariencia → Personalizar → CSS adicional). La segunda opción es preferible: los estilos no se perderán al actualizar el tema.

2.1. Mensajes de respuesta y validación

1
/* Form response — top margin */
2
div.wpcf7-response-output {
3
    margin-top: -30px;
4
}
5
 
6
/* Validation hint — centering and spacing */
7
span.wpcf7-not-valid-tip {
8
    margin-top: -14px;
9
    margin-bottom: -10px;
10
    text-align: center;
11
    color: #a01414;
12
    font-size: 1em;
13
    display: block;
14
    font-weight: 700;
15
}

.wpcf7-response-output es el bloque que aparece después del envío (éxito o error). Por defecto interrumpe el flujo; el margin-top negativo lo acerca al formulario. .wpcf7-not-valid-tip es el aviso rojo debajo de un campo sin rellenar; aquí el texto está centrado y en negrita para mayor visibilidad.

2.2. Campos de entrada y áreas de texto

1
/* Unified font for all form elements */
2
input.wpcf7-form-control,
3
textarea#TextareaJA,
4
input.wpcf7-form-control.wpcf7-submit {
5
    font-family: "Open Sans", sans-serif;
6
    font-size: 15px;
7
    line-height: 30px;
8
    font-weight: 700;
9
}
10
 
11
/* Text area height */
12
textarea {
13
    height: 150px !important;
14
}
15
 
16
/* Border highlight on focus */
17
form.wpcf7-form input:focus,
18
form.wpcf7-form textarea:focus,
19
form.wpcf7-form input[type="text"]:focus {
20
    border-color: #709242;
21
}

El selector input.wpcf7-form-control apunta a todos los campos de texto de CF7. textarea#TextareaJA es un identificador personalizado de nuestro formulario; si su formulario tiene un ID diferente, reemplácelo por el correcto. El color del borde al enfocar #709242 es un verde oliva tranquilo y agradable a la vista.

2.3. Botón de envío

1
/* Submit button — main style */
2
input.wpcf7-form-control.wpcf7-submit {
3
    color: #ffffff;
4
    background: #5a8f2b;
5
    font-weight: 600;
6
    border: 2px dashed #ffffff;
7
    margin-top: -25px;
8
    font-family: FuturaDemiC, sans-serif;
9
    padding: 10px 30px;
10
    border-radius: 0;
11
    transition: all .3s ease 0s;
12
}
13
 
14
/* Hover — color inversion */
15
input.wpcf7-form-control.wpcf7-submit:hover {
16
    background: #ffffff;
17
    color: #5a8f2b;
18
    border: 2px dashed #5a8f2b;
19
}

El botón tiene un fondo verde #5a8f2b con un borde blanco discontinuo. Al pasar el cursor, los colores se invierten: fondo blanco, texto y borde verdes. Si el verde no está en la paleta de su marca, reemplace #5a8f2b por su color de acento en ambas reglas (normal y hover).

2.4. Precargador e indicador de carga

1
/* Centering the ajax loader */
2
span.ajax-loader {
3
    margin-left: auto !important;
4
    margin-right: auto !important;
5
    float: inherit !important;
6
    width: 15px !important;
7
    display: block !important;
8
    margin-top: 10px !important;
9
    margin-bottom: -15px !important;
10
}

El indicador giratorio de envío de CF7 se pega al borde por defecto. Aquí se centra forzosamente mediante margin-left/right: auto y display: block. Las declaraciones !important son necesarias porque el propio plugin aplica estilos en línea al cargador.

2.5. Alineación de Google reCAPTCHA

1
/* Centering the reCAPTCHA block */
2
.wpcf7-form-control-wrap {
3
    width: 100%;
4
}
5
 
6
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
7
    margin-top: -28px;
8
    margin-left: auto;
9
    margin-right: auto;
10
    width: 300px;
11
}

El bloque de reCAPTCHA se alinea a la izquierda por defecto. Usar margin-left/right: auto con un ancho fijo de 300px lo centra dentro del formulario.

2.6. Adaptabilidad móvil

1
@media screen and (max-width: 768px) {
2
    span.wpcf7-not-valid-tip {
3
        margin-bottom: 15px;
4
    }
5
 
6
    input.wpcf7-form-control.wpcf7-text {
7
        max-height: 30px;
8
    }
9
}

En pantallas menores a 768px, la pista de validación recibe un margen inferior adicional para evitar que choque con el siguiente campo. Los campos de texto tienen altura limitada, lo que previene estiramientos excesivos en dispositivos móviles.

2.7. Ocultar elementos de servicio

1
/* Hide list markers in error messages */
2
.screen-reader-response ul {
3
    display: none;
4
}
5
 
6
/* Hide the green success message */
7
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
8
    display: none !important;
9
}
10
 
11
/* Hide the duplicate validation error message */
12
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
13
    display: none !important;
14
}
15
 
16
/* Text color for screen-reader block on dark backgrounds */
17
.screen-reader-response {
18
    color: white;
19
    margin-bottom: 10px;
20
}

CF7 duplica los errores de validación por defecto: tanto en la información sobre la herramienta como en el bloque general debajo del formulario. Ocultamos el bloque general (.wpcf7-validation-errors) y el mensaje de éxito (.wpcf7-mail-sent-ok), ya que las pistas de .wpcf7-not-valid-tip son suficientes. Los estilos para .screen-reader-response son relevantes cuando el formulario se coloca sobre un fondo oscuro.

2.8. Centrar marcadores de posición

1
/* Centering placeholder in textarea field for different browsers */
2
textarea#TextareaJA::-webkit-input-placeholder {
3
    text-align: center;
4
}
5
 
6
textarea#TextareaJA:-moz-placeholder {
7
    text-align: center;
8
}
9
 
10
textarea#TextareaJA::-moz-placeholder {
11
    text-align: center;
12
}
13
 
14
textarea#TextareaJA:-ms-input-placeholder {
15
    text-align: center;
16
}

El texto del marcador de posición dentro del campo se centra solo mientras el campo está vacío. Una vez que el usuario empieza a escribir, el texto sigue la alineación normal. #TextareaJA es el identificador de nuestro formulario; sustitúyalo por el correcto para su formulario.

2.9. Extra: estilos para fondos oscuros

1
/* Error styles for forms on dark background */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    color: aliceblue;
4
    font-weight: 800;
5
}
6
 
7
span.wpcf7-not-valid-tip {
8
    font-weight: 900;
9
    background-color: antiquewhite;
10
}

Si el formulario se coloca en un bloque con un relleno oscuro, los mensajes de error deben permanecer legibles. El texto de error se vuelve blanco (aliceblue) y la información sobre la herramienta recibe un fondo claro.

2.10. Mejoras adicionales

1
/* Bottom error message margin */
2
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
3
    margin-top: -60px;
4
}
5
 
6
/* Centering text fields */
7
span.wpcf7-form-control-wrap input#Email,
8
span.wpcf7-form-control-wrap input#PhoneJA,
9
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
10
    text-align: center;
11
}
12
 
13
/* reCAPTCHA in popups — additional spacing */
14
div#recapcha-popups .wpcf7-form-control-wrap {
15
    padding-top: 25px;
16
    margin-left: -11px;
17
    padding-bottom: 38px;
18
}

Los campos de texto para correo electrónico y teléfono están centrados, lo que se ve más ordenado cuando el formulario consta de 3 o 4 campos. El bloque div#recapcha-popups es un selector específico para casos en que el formulario se incrusta en una ventana emergente.

3. Configurar la plantilla de correo electrónico

Después de importar formularios, asegúrese de revisar la pestaña Correo en cada editor de formulario. CF7 usa estos ajustes para enviar notificaciones por correo electrónico:

• Para: la dirección donde llegan los envíos. Por defecto contiene un marcador de posición de la exportación; sustitúyalo por el suyo;
• De: el encabezado del correo. La dirección del remitente debe estar en el dominio del sitio, de lo contrario los correos van a spam o no se entregan en absoluto;
• Asunto: puede mantener el predeterminado o añadir el nombre del sitio;
• Cuerpo del mensaje: una plantilla HTML con el logotipo. Sustituya src="/Logo-150x150.png" por la URL completa de su logotipo.

Si necesita etiquetas adicionales para la plantilla, la lista completa está disponible en la documentación oficial en contactform7.com.

4. Optimizar la carga de scripts de CF7

Por defecto, Contact Form 7 carga CSS y JavaScript en cada página del sitio, incluso donde no hay formulario. Estas son solicitudes innecesarias que ralentizan la carga.

A partir de la versión 5.9, el desarrollador añadió una opción nativa para controlar la carga: en wp-config.php puede establecer las constantes WPCF7_LOAD_JS y WPCF7_LOAD_CSS a false, y los scripts solo se cargarán en páginas con un formulario. Más detalles en la documentación de CF7.

Para un control más preciso (solo páginas específicas), use un fragmento en functions.php:

1
add_action('wp_enqueue_scripts', 'cf7_dequeue_scripts', 99);
2
function cf7_dequeue_scripts() {
3
    if (!is_page(array('contact', 'order'))) {
4
        wp_dequeue_script('contact-form-7');
5
        wp_dequeue_style('contact-form-7');
6
    }
7
}

Este fragmento elimina los scripts de CF7 de todas las páginas excepto aquellas especificadas en el array de is_page(). Sustituya 'contact' y 'order' por los slugs de sus páginas que contienen formularios.

⁉️🤔 Preguntas frecuentes

Los formularios no se envían después de la importación. ¿Qué debo hacer?

Primero, revise la pestaña «Correo»: los campos «Para» y «De». El archivo de exportación contiene marcadores de posición allí. «Para» debe contener un correo electrónico real, y «De» debe ser una dirección del dominio del sitio. Si el dominio no coincide, el servidor de correo del destinatario rechazará el mensaje como spam.

¿Dónde es mejor colocar los estilos CSS: en el archivo style.css del tema o en CSS adicional?

Es preferible CSS adicional. Cuando el tema se actualiza, style.css se sobrescribe, pero CSS adicional no. La desventaja: los estilos en CSS adicional se cargan en línea en el <head> en lugar de como un archivo externo, pero para 100-150 líneas de CSS la diferencia de velocidad es insignificante.

¿Cómo cambio los colores de los botones para que coincidan con la marca del cliente?

Encuentre las dos reglas para input.wpcf7-form-control.wpcf7-submit en los estilos (normal y hover). Reemplace #5a8f2b con el color de acento de la marca en la propiedad background de la regla principal y en las propiedades color y border de la regla hover. No es necesario cambiar nada más.

¿Por qué reCAPTCHA se desplaza a la izquierda en el móvil?

El bloque .g-recaptcha en nuestros estilos tiene un ancho estándar fijo. En pantallas muy estrechas puede no caber. Agregue una regla con transform: scale() y transform-origin: left a la media query, y reCAPTCHA se reducirá proporcionalmente para adaptarse a cualquier pantalla.

Los estilos no se están aplicando. ¿Cuál es la causa?

Tres causas comunes: (1) caché del navegador (abra el sitio en modo incógnito); (2) caché de un plugin de rendimiento (WP Rocket, LiteSpeed) que necesita ser limpiada; (3) orden de carga, ya que CF7 carga su CSS al final. Agregue !important a la regla en conflicto o aumente la especificidad del selector añadiendo una clase padre.

¿Cómo verifico que el formulario realmente funciona después de la configuración?

Envíe un correo de prueba a través del formulario en el propio sitio. Si el correo no llega, revise su carpeta de spam. Si tampoco está allí, configure un plugin SMTP (por ejemplo, FluentSMTP o Post SMTP). Sin SMTP, WordPress envía mediante wp_mail(), y muchos servidores bloquean esos correos.

Estilizando CF7: rápido, una vez y para todos los proyectos

Un archivo de exportación preparado y un conjunto de estilos refinado ahorran de 15 a 30 minutos en cada nuevo proyecto. En lugar de ajustar manualmente margin-top: -14px mediante prueba y error, obtiene un formulario con campos, botón y validación ya organizados. Solo queda insertar el correo electrónico y el logotipo.

Si la paleta verde #5a8f2b no se ajusta al diseño, reemplace el color de acento por el suyo. Si el formulario está incrustado en un popup, agregue un selector con el ID del popup como se muestra en la sección 2.10. Si el sitio es multilingüe, use los duplicados de idioma de la exportación (RU/UK/EN/DE).

En proyectos sin diseñador, este conjunto de estilos cubre la gran mayoría de las necesidades para un formulario de contacto de apariencia decente. En proyectos con diseñador, sirve como base para una personalización más fina.

Guarde los estilos como un fragmento, y su próxima configuración de CF7 tomará exactamente dos minutos.