Cómo estilizar formularios de Contact Form 7 en WordPress

Probablemente instalaste Contact Form 7 en tu sitio de WordPress porque es gratuito y ha sido uno de los plugins de formularios de contacto más populares para WordPress.

Sin embargo, es posible que hayas notado que los formularios predeterminados se ven bastante simples en tu sitio web. Ese estilo gris básico puede chocar con el resto de tu sitio y hacer que el diseño general se sienta menos pulido.

Dado que Contact Form 7 no incluye un editor visual ni opciones de estilo integradas, realizar cambios requiere un poco de trabajo si no te sientes cómodo con el código.

La buena noticia es que no necesitas ser un desarrollador para solucionar esto. Con solo unos pocos ajustes de CSS, puedes hacer que tus formularios se vean limpios, modernos y completamente alineados con tu marca.

En esta guía para principiantes, te mostraremos cómo personalizar Contact Form 7 paso a paso, sin necesidad de conocimientos avanzados de codificación o diseño. 🙌

¿Por qué estilizar tus formularios de Contact Form 7?

Estilizar tus formularios de Contact Form 7 hace que tu sitio se vea más profesional, mejora la legibilidad y ayuda a que tus formularios coincidan con tu marca. Todo esto puede aumentar la confianza y las conversiones del formulario.

Antes de empezar, Contact Form 7 es uno de los plugins de formularios de contacto para WordPress más populares. Es gratuito y te permite agregar un formulario de WordPress usando un shortcode.

La desventaja es que Contact Form 7 es bastante limitado en cuanto a diseño y funciones de personalización. Además, no ofrece opciones integradas para cambiar el estilo de tus formularios.

Esto hace que sea difícil que el diseño de tu formulario de contacto coincida con el tema de tu sitio web o cambiar detalles básicos como la fuente y el color de fondo para que tu formulario destaque.

Más importante aún, el plugin ha congelado el desarrollo de nuevas funciones, lo que significa que no recibirá actualizaciones más allá de correcciones críticas de errores y parches de seguridad.

Dicho esto, ahora veremos cómo estilizar un formulario de Contact Form 7 en WordPress. Esto es lo que cubriremos en las siguientes secciones:

¡Empecemos!

Primeros pasos con Contact Form 7

Primero, necesitarás instalar y activar el plugin Contact Form 7 en tu sitio web.

Para hacer esto, dirígete a Plugins » Añadir nuevo plugin en tu área de administración de WordPress.

Esto abrirá la página donde puedes elegir un plugin del directorio de plugins de WordPress.

Usa la función de búsqueda para encontrar rápidamente el plugin. Luego, puedes hacer clic en el botón ‘Instalar ahora’ en el resultado de la búsqueda.

No olvides hacer clic en el botón 'Activar' para habilitarlo en tu sitio de WordPress. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Al activarlo, puedes dirigirte a Contacto » Añadir nuevo desde tu panel de WordPress.

Ahora puedes editar la configuración del formulario para tu sitio web y comenzar ingresando un título para tu formulario.

El plugin agregará automáticamente los campos predeterminados para nombre, dirección de correo electrónico, asunto y mensaje. También puedes agregar más campos simplemente arrastrándolos y soltándolos donde quieras.

Cuando hayas terminado, no olvides hacer clic en el botón 'Guardar' y copiar el shortcode.

Lo siguiente que debes hacer es incrustar el formulario en tu publicación de blog o página.

Para hacer eso, simplemente edita una publicación o agrega una nueva.

Una vez que estés en el editor de WordPress, haz clic en el signo '+' en la parte superior y luego agrega un bloque de Shortcode.

Después de eso, simplemente ingresa el shortcode para tu formulario de Contact Form 7 en el bloque de shortcode. Se verá algo así:

[contact-form-7 id="117" title="Contact Form"]

Ahora, publica tu entrada o página para ver el formulario de contacto en acción.

Para este tutorial, usamos el formulario de contacto predeterminado y lo agregamos a una página de WordPress. Así es como se veía el formulario de contacto en nuestro sitio de prueba.

Ahora está listo para personalizar su formulario de Contact Form 7 en WordPress.

Método 1: Estilizar formularios de Contact Form 7 usando CSS personalizado

Dado que Contact Form 7 no tiene opciones de estilo integradas, necesitarás usar CSS para dar estilo a tus formularios.

Contact Form 7 agrega clases CSS e IDs estándar a los elementos del formulario. Esto facilita la personalización del diseño si conoce un poco de CSS.

Cada formulario de Contact Form 7 utiliza la clase CSS .wpcf7, a la que puede dirigirse para estilizar su formulario.

En este ejemplo, usaremos una fuente personalizada llamada Lora en nuestros campos de entrada y cambiaremos el color de fondo del formulario. Asegúrate de que esta fuente esté cargada por tu tema de WordPress, o simplemente cambia 'lora' por una fuente que tu tema ya utilice:

.wpcf7 {
  background-color: #fbefde;
  border: 1px solid #f28f27;
  padding: 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  background-color: #725f4c;
  color: #FFF;
  font-family: lora, sans-serif;
  font-style: italic;
}

.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
  background-color: #725f4c;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}

Puedes agregar fácilmente este CSS yendo a Apariencia » Personalizar » CSS adicional en tu panel de WordPress.

Si necesitas más ayuda, consulta nuestra guía sobre cómo agregar fácilmente CSS personalizado a un sitio de WordPress.

Así se veía nuestro formulario de contacto después de aplicar este CSS.

Estilizando múltiples formularios de Contact Form 7

Si estás utilizando varios formularios de contacto y quieres darles un estilo diferente, puedes apuntar al ID único que Contact Form 7 genera para cada formulario.

La desventaja del CSS que usamos anteriormente es que se aplicará a todos los formularios de Contact Form 7 en tu sitio web.

Para empezar, simplemente abre la página que contiene el formulario que deseas modificar. Luego, haz clic derecho en el primer campo del formulario y selecciona la opción 'Inspeccionar'.

No te preocupes si el código parece complejo; solo necesitas encontrar una línea específica.

Se abrirá un panel de Herramientas para desarrolladores en la parte inferior o lateral de tu pantalla, mostrando el código HTML de la página. En este panel, necesitas localizar la línea de inicio del código del formulario.

Como puedes ver en la captura de pantalla anterior, nuestro código de formulario de contacto comienza con la línea:

<div role="form" class="wpcf7" id="wpcf7-f113-p114-o1" lang="en-US" dir="ltr">

El atributo ID es un identificador único generado por Contact Form 7 para este formulario en particular. Es una combinación del ID del formulario y el ID de la publicación donde se agrega este formulario.

Usaremos este ID en nuestro CSS para dar estilo solo a este formulario de contacto específico. En el código a continuación, reemplaza el .wpcf7 estándar con tu ID único (por ejemplo, #wpcf7-f113-p114-o1).

div#wpcf7-f113-p114-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f113-p114-o1 input[type="text"],
#wpcf7-f113-p114-o1 input[type="email"],
#wpcf7-f113-p114-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f113-p114-o1 input[type="submit"],
#wpcf7-f113-p114-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}

Ten en cuenta que debes usar el ID generado en tu propio sitio, o el CSS no funcionará. Además, dado que este ID incluye el ID específico de la página (como p114), si mueves este formulario de contacto a otra página más adelante, deberás actualizar tu CSS con el nuevo ID.

Ahora puedes repetir este proceso para cada formulario que desees personalizar, reemplazando el ID con el generado para ese formulario específico.

Estilizar formularios según el estado de envío

Contact Form 7 agrega automáticamente clases CSS a tu formulario según las interacciones del usuario, lo que te permite estilizar los mensajes de éxito, los estados de error y los estados de carga de manera diferente.

Aquí están las clases de estado que aplica Contact Form 7:

• .wpcf7-init — Estado inicial (antes de la interacción del usuario)
• .wpcf7-sent — Formulario enviado con éxito
• .wpcf7-failed — Envío fallido (error del servidor)
• .wpcf7-invalid — El formulario tiene errores de validación
• .wpcf7-spam — Envío marcado como spam
• .wpcf7-aborted — Envío abortado por el usuario

Ejemplo: Estiliza el envío exitoso de un formulario con un borde verde:

div.wpcf7.wpcf7-sent {
    border: 3px solid #4caf50;
    background-color: #e8f5e9;
    padding: 20px;
}

Ejemplo: Estiliza los errores de validación con un borde rojo:

div.wpcf7.wpcf7-invalid {
    border: 3px solid #f44336;
    background-color: #ffebee;
}

Ejemplo: Agrega un indicador de carga sutil:

div.wpcf7.wpcf7 form.submitting {
    opacity: 0.7;
    pointer-events: none;
}

Estas clases de estado te permiten proporcionar retroalimentación visual clara a los usuarios, mejorando la usabilidad y la experiencia del formulario.

Método 2: Estilizar formularios de Contact Form 7 con CSS Hero

Una forma más fácil de cambiar el estilo de los formularios de Contact Form 7 es usando CSS Hero. Te permite editar tus formularios sin escribir ningún CSS.

Hemos probado este plugin para ver si es bueno. Descubre todo sobre él en nuestra reseña completa de CSS Hero.

Dado que CSS Hero es un plugin premium, primero deberás crear una cuenta de CSS Hero en su sitio web. Simplemente haz clic en el botón 'Obtener ahora', selecciona un plan y completa el proceso de pago.

Una vez hecho esto, obtendrás el panel de tu cuenta de CSS Hero, donde podrás encontrar el archivo zip de tu plugin y la clave de licencia.

Ahora puedes instalar y activar el plugin CSS Hero en tu sitio web. En tu área de administración de WordPress, ve a Plugins » Añadir nuevo plugin.

Luego puedes hacer clic en el botón ‘Subir Plugin’ para abrir el cargador de archivos.

Después de eso, simplemente haz clic en ‘Elegir archivo’ y selecciona el archivo .zip del plugin.

Una vez subido, puedes hacer clic en el botón 'Instalar ahora' y luego en 'Activar' cuando aparezca. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Al activarse, puedes visitar la página que contiene tu formulario en tu sitio web en vivo. Verás una opción de ‘Personalizar con CSS Hero’ en la barra de administración en la parte superior.

CSS Hero proporciona una interfaz fácil de usar, de apuntar y hacer clic, para editar el CSS sin escribir ningún código.

Usando el plugin, puedes hacer clic en cualquier campo, encabezado y otros elementos de tu formulario y editar el color de fondo, la fuente, los bordes, el espaciado y mucho más.

Después de haber personalizado tu formulario, simplemente haz clic en el botón ‘Guardar y Publicar’ en la parte inferior.

Consejo adicional 💡: Una forma sin código para estilizar formularios de WordPress

Si el CSS no es lo tuyo, hay una forma mucho más fácil de crear formularios bellamente estilizados en minutos: WPForms. Mientras que Contact Form 7 requiere conocimientos de CSS para personalizarse, WPForms te ofrece formularios de aspecto profesional listos para usar sin necesidad de codificación.

Por qué los usuarios de WPForms lo aman (más que Contact Form 7)

WPForms es utilizado por más de 6 millones de sitios web y consistentemente calificado como más fácil de usar que Contact Form 7. Aquí te explicamos por qué:

• Creación de formularios en 5 minutos: Usuarios reales informan haber creado su primer formulario profesional en menos de 5 minutos usando el constructor de arrastrar y soltar. No se requiere curva de aprendizaje de CSS.
• Más de 2100 plantillas preconstruidas: Elige entre miles de plantillas de formularios listas para formularios de contacto, encuestas, registros, pagos y más. Simplemente elige una y personalízala.
• Constructor de formularios con IA: Describe tu formulario en lenguaje sencillo, como "Necesito un formulario de registro para una conferencia con opciones de comida", y WPForms AI lo generará al instante.
• Diseño profesional sin habilidades de diseño: Los formularios se ven limpios y pulidos en tu sitio automáticamente, coincidiendo con los estándares de diseño web moderno sin trabajo manual de estilo.
• Soporte excepcional: Cuando necesites ayuda, obtendrás respuestas rápidas y expertas del equipo de WPForms, a diferencia de depender de foros comunitarios para plugins gratuitos.

Cómo estilizar un formulario en WPForms

Mientras crea tu formulario de contacto, ve a la sección Configuración » Temas dentro del constructor de arrastrar y soltar de WPForms.

Una vez dentro, elige entre más de 40 temas hermosos y prediseñados para que coincidan instantáneamente con el diseño de tu sitio.

Estos temas son completamente personalizables. Puedes:

• Ajustar el tamaño de los campos, bordes y colores
• Modificar las fuentes de las etiquetas, subetiquetas y mensajes de error
• Estiliza el botón de envío para que coincida con tu marca

Así es como podría verse en tu pantalla:

Alternativamente, puedes aplicar un tema de WPForms desde el editor de bloques de WordPress.

Después de agregar tu formulario a una página, abre el panel de configuración de bloques a la derecha y desplázate hasta la sección 'Temas'. Luego encontrarás los temas de formularios integrados de WPForms, la misma lista que la del constructor de formularios.

También encontrarás opciones de personalización para el campo del formulario, la etiqueta, el botón, el contenedor y el fondo.

Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo personalizar y estilizar formularios de WordPress.

En resumen: Si quieres saltarte el tutorial de CSS y tener formularios profesionales funcionando hoy mismo, WPForms es tu mejor opción. Ahorra horas de trabajo de estilo y ofrece resultados que parecen creados por un diseñador.

Preguntas frecuentes: Estilizar Contact Form 7 en WordPress

Si recién estás comenzando con Contact Form 7 o quieres ajustar tu diseño, estas rápidas preguntas frecuentes te ayudarán con las dudas de estilo más comunes.

¿Cómo estilizo el botón de envío de Contact Form 7?

Puedes estilizar el botón de envío de Contact Form 7 con CSS apuntando a la clase de envío predeterminada .wpcf7-submit. Luego, agrega tus estilos personalizados en Apariencia » Personalizar » CSS adicional.

¿Cómo configurar Contact Form 7 en WordPress?

Para configurar Contact Form 7, puedes abrir tu formulario, ir a la pestaña 'Correo', establecer la dirección 'Para' (a dónde deben enviarse los mensajes) y asegurarte de que las etiquetas de correo coincidan con los campos de tu formulario.

¿Contact Form 7 es gratuito?

Sí, Contact Form 7 es completamente gratuito para descargar y usar desde el directorio oficial de plugins de WordPress.org. El plugin principal no cuesta nada, aunque algunos complementos o integraciones opcionales de terceros pueden tener costo.

¿Es bueno Contact Form 7?

Contact Form 7 es una opción funcional y ampliamente utilizada si deseas un plugin de formularios gratuito y flexible y no te importa una configuración un poco más técnica.

Es potente cuando se combina con HTML personalizado y CSS, pero no ofrece un constructor visual de arrastrar y soltar, por lo que los cambios de estilo y diseño a menudo requieren editar código o usar herramientas adicionales.

¿Puedo poner Contact Form 7 en Canva para editarlo?

No, no puedes editar un formulario de Contact Form 7 dentro de Canva porque Contact Form 7 es un plugin de WordPress y necesita un entorno de WordPress para funcionar. Sin embargo, puedes diseñar el aspecto de tu formulario en Canva como una maqueta y luego recrear ese diseño en WordPress.

Recursos adicionales para la personalización de formularios de WordPress

Esperamos que este artículo te haya ayudado a aprender cómo estilizar formularios de Contact Form 7 en WordPress.

También te pueden interesar nuestras otras guías útiles sobre:

• Cómo agregar opciones de imagen en formularios de WordPress
• Cómo agregar autocompletado para campos de dirección en WordPress
• Consejos para crear formularios más interactivos en WordPress
• Usar lógica condicional en formularios de WordPress
• Guía definitiva para usar formularios de WordPress

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.