Es bastante común que, al añadir una casilla de verificación (checkbox) en un formulario creado con el plugin Contact Form 7, el diseño se vea afectado y el contenido se divida en dos líneas distintas.
Esto significa que el checkbox aparece en la parte superior, mientras que el texto (por ejemplo, el de aceptación de la política de privacidad) se desplaza justo debajo, generando una presentación desalineada e incómoda.
🛠️ Solución rápida con CSS
Afortunadamente, este pequeño inconveniente puede resolverse fácilmente añadiendo un fragmento de CSS personalizado que forzará la visualización en una sola línea. Simplemente añade el siguiente código en la hoja de estilos de tu tema o en el personalizador de CSS:
/* Evitar que el checkbox y el texto se separen en dos líneas */
.wpcf7 .wpcf7-form-control-wrap {
display: inline;
}
Este ajuste indica que el contenedor del control del formulario debe comportarse como un elemento en línea, permitiendo que el checkbox y su texto asociado se alineen correctamente uno junto al otro.
Ajustar la separación entre el checkbox y el texto
En algunos casos, es posible que desees modificar el espacio entre el checkbox y el texto, ya sea para mejorar la estética o la legibilidad del formulario. Para ello, puedes utilizar el siguiente fragmento de CSS:
/* Ajustar el margen derecho del checkbox */
.wpcf7-list-item {
margin: 0 15px 0 0;
}
Este código añade un margen derecho de 15 píxeles al elemento del checkbox, creando un espacio visual adecuado entre el cuadro y la etiqueta de texto.
Con estas dos simples líneas de código, puedes mejorar significativamente la apariencia de los formularios en Contact Form 7 y ofrecer una mejor experiencia de usuario sin necesidad de plugins adicionales ni complicaciones.
Para integrar este CSS directamente en tu sitio WordPress, hay varias formas de hacerlo. Aquí te explico las dos formas más recomendables y sencillas, sin necesidad de instalar plugins adicionales:
✅ Opción 1: Añadir CSS desde el Personalizador de WordPress
Pasos:
- Entra en el escritorio de WordPress (
tusitio.com/wp-admin). - Ve a Apariencia > Personalizar.
- Dentro del personalizador, selecciona la opción «CSS adicional».
- Pega el siguiente código:
/* Evitar que el checkbox y el texto se separen en dos líneas */ .wpcf7 .wpcf7-form-control-wrap { display: inline; } /* Ajustar el margen derecho del checkbox */ .wpcf7-list-item { margin: 0 15px 0 0; } - Haz clic en Publicar para guardar los cambios.
Ventajas:
- No requiere acceso a archivos del tema.
- Es seguro y reversible.
- Se aplican los estilos de forma inmediata.
🛠️ Opción 2: Añadir CSS directamente en el archivo style.css del tema hijo
Recomendado si estás usando un tema hijo.
Pasos:
- En tu escritorio de WordPress, ve a Apariencia > Editor de archivos del tema (Theme File Editor).
- Asegúrate de estar editando el tema hijo (¡no el tema padre!).
- Busca el archivo
style.css. - Al final del archivo, añade:
/* Contact Form 7 - Corrección visual de checkbox */ .wpcf7 .wpcf7-form-control-wrap { display: inline; } .wpcf7-list-item { margin: 0 15px 0 0; } - Guarda los cambios.
Ventajas:
- Más limpio para desarrolladores.
- Se mantiene en el control del código fuente.
❗ Recomendación importante
⚠️ Evita editar el archivo style.css del tema principal, ya que perderás los cambios si el tema se actualiza. Usa siempre un tema hijo o el CSS adicional del personalizador si no estás familiarizado con temas hijos.
