Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo dar estilo a los formularios de Contact Form 7 en WordPress

¿Desea personalizar sus formularios Contact Form 7 y cambiar su estilo?

Contact Form 7 es uno de los plugins de formularios de contacto más populares para WordPress. Sin embargo, su mayor desventaja es que los formularios que añade son muy sencillos.

En este artículo, le mostraremos cómo dar estilo a los formularios del formulario de contacto 7 en WordPress.

How to style Contact Form 7 in WordPress

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

Contact Form 7 es uno de los plugins de formulario de contacto más populares para WordPress. Es de uso gratuito y te permite añadir un formulario de WordPress usando shortcode.

Sin embargo, Contact Form 7 tiene características muy limitadas. Uno de los problemas de Contact Form 7 es que los formularios tienen un estilo sencillo. Además, el plugin no ofrece opciones integradas para cambiar el estilo de los formularios.

Esto hace que sea difícil adaptar el diseño del formulario de contacto al tema de su sitio web o si desea editar la fuente y el color de fondo para que su formulario destaque.

Si quieres formularios más personalizables con características avanzadas, entonces te recomendamos WPForms, que es el plugin de formularios de contacto más fácil de usar para principiantes. Viene con un maquetador de arrastrar y soltar, más de 1.800 plantillas de formularios prediseñadas y numerosas opciones de personalización.

También existe una versión gratuita de WPForms que incluye más de 60 plantillas, lógica condicional, pagos con Stripe y mucho más. Vea nuestra comparación de Contact Form 7 vs WPForms para obtener más información.

Dicho esto, veamos cómo aplicar estilo a un formulario Contact Form 7 en WordPress.

Primeros pasos con Contact Form 7

En primer lugar, tendrá que instalar y activar el plugin Contact Form 7 en su sitio web. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, puede dirigirse a Contacto ” Añadir nuevo desde su escritorio de WordPress.

Edit Contact Form 7 settings

Ahora puede editar el formulario para su sitio web y empezar por introducir un título para su formulario.

El plugin añadirá automáticamente los campos por defecto del formulario: nombre, correo electrónico, asunto y mensaje. Sin embargo, también puedes añadir 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.

Copy the shortcode

Lo siguiente que tienes que hacer es añadirlo a la entrada o página de tu blog.

Para ello, simplemente edita una entrada o añade una nueva. Una vez que estés en el editor de WordPress, sigue adelante y haz clic en el signo ‘+’ en la parte superior y luego añade un bloque Shortcode.

Add a shortcode block

Después de eso, simplemente introduzca el shortcode para su formulario Contact Form 7 en el bloque shortcode. Se verá algo como esto:

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

Ahora, siga adelante y publique su entrada de blog de WordPress para ver el formulario de contacto en acción. Para este artículo, hemos utilizado el formulario de contacto por defecto y lo hemos añadido a una página de WordPress. Este es el aspecto del formulario de contacto en nuestro sitio de prueba.

Contact form 7 preview

¿Está listo para personalizar su formulario Contact Form 7 en WordPress?

Estilizar formularios Contact Form 7 en WordPress usando CSS personalizado

Dado que Contact Form 7 no tiene opciones de estilo integradas, tendrá que utilizar CSS para dar estilo a sus formularios.

Contact Form 7 genera código compatible con los estándares para los formularios. Cada elemento del formulario tiene un ID propio y una clase CSS asociada, lo que facilita su personalización si conoce CSS.

Cada formulario Contact Form 7 utiliza la clase CSS .wpcf7 que puede utilizar para dar estilo a su formulario.

En este ejemplo, utilizaremos la fuente personalizada llamada Lora en nuestros campos de entrada y cambiaremos el color de fondo del formulario.

div.wpcf7 { 
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#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;
}

Si necesita ayuda para añadir el CSS personalizado, consulte nuestra guía sobre cómo añadir fácilmente CSS personalizado a un sitio de WordPress.

Así es como quedó nuestro formulario de contacto después de aplicar este CSS.

Custom CSS preview

Estilizar varios formularios Contact Form 7

Si estás usando múltiples formularios de contacto y quieres darles un estilo diferente, entonces necesitarás usar el ID generado por contact form 7 para cada formulario. El problema con el CSS que utilizamos anteriormente es que se aplicará a todos los formularios de Contact Form 7 en su sitio web.

Para empezar, basta con abrir una página que contenga el formulario que desea modificar. A continuación, sitúe el ratón en el primer campo del formulario, haga clic con el botón derecho y seleccione la opción“Inspeccionar“.

La pantalla del navegador se dividirá y verá el código fuente de la página. En el código fuente, debe localizar la línea de inicio del código del formulario.

Inspect form and get form id

Como puede ver en la captura de pantalla anterior, el código de nuestro 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 entrada donde se añade este formulario.

Utilizaremos este ID en nuestro CSS para dar estilo a nuestro formulario de contacto y sustituiremos .wpcf7 en nuestro primer fragmento de código CSS por #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;
}

Ahora puede repetir el paso para todos sus formularios y reemplazar el ID del formulario para cada formulario de Contact Form 7 que desee personalizar.

Estilizar formularios Contact Form 7 con CSS Hero

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

Simplemente instala y activa el plugin CSS Hero en tu sitio web. Puedes seguir nuestra guía sobre cómo instalar un plugin de WordPress.

A continuación, vaya a la página que contiene su formulario y haga clic en la opción “Personalizar con CSS Hero” de la barra de herramientas de la parte superior.

Customize with CSS hero

CSS Hero te proporcionará una interfaz de usuario sencilla 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.

CSS hero interface

Una vez que haya personalizado su formulario, sólo tiene que hacer clic en el botón “Guardar y publicar” de la parte inferior.

Esperamos que este artículo te haya ayudado a aprender a diseñar formularios Contact Form 7 en WordPress. También puedes consultar nuestra guía sobre cómo crear un boletín de correo electrónico y la selección de nuestros expertos de los mejores plugins de calculadoras para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

48 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Alejandro

    Thanks!
    Your instructions were very useful.
    Thanks for taking the time to share them!

    • WPBeginner Support

      Glad our guide was helpful :)

      Administrador

  3. hmi

    Hi sir, where can I find the css code of fields ?
    Thank you

  4. Tony Tran

    i can’t change color background css button submit….please help

  5. Deshave

    Submit button in pdf no longer works since uploading form to WordPress website.

    • WPBeginner Support

      The pdf embed we’re recommending is for viewing content. For filling out forms we recommend using a form plugin

      Administrador

  6. zeeshan alam

    Thanks for sharing Sir

    • WPBeginner Support

      You’re welcome :)

      Administrador

  7. Steve

    Hello is it possible to ad a message if i dont filled out one ore more “Required fields” to get a Message ? Because i Only get the “red arrows” on the “Required fields” that I don’t filled out. In I want additionally a error Message like

    “One or more Required fields have an error. Please check and try again.”
    But i Only have the red arrows, and the Problem is on mobile Phones the red arrows are not in the window and the Client don’t see it.

    • WPBeginner Support

      You would need to reach out to contact form 7’s support for what they currently have available.

      Administrador

  8. FRED_VERSATILE

    Hello,
    Thank you for this tutorial.
    I would like to add a custom image at the right of the “send” label, in the button.
    I’ve done it with a :before for the other buttons on my website, but i can’t find the element in the send form to put the CSS…

  9. Muhammad Tahir

    How to change response text color of SPECIFIC contact form

  10. waqas

    Can we add a time field in contact form 7 without plugin?

  11. Mary Lou Hoffman

    I’m a novice, but determined to figure this out! So, please – give me baby steps if you answer.

    I have a contact7 form on my website. The font is showing up as white on a white background for the labels (Your name, Your email, etc).
    How do I change the color – where do I go to tell it to change color?
    I tried copying and pasting some of the codes ya’all had in your answers above, but they just showed up on my page, but didn’t change the font.

    • Karu Price

      You can target the lable area like this-

      .wpcf7 form p label {
      color: white;
      background: black;
      font-family: sans-serif;
      }

      • Rita Accarpio

        Hi there!

        I’m here struggling with modal headings. I changed the form background to a darker color but now I want to change the heading’s color. Doesn’t seem to change at all with all the different options I tried so far.

        Do you know anyway to do this? Help me please!

        Thanks!

  12. Abhijeet

    I want to reduce gap between name and email boxes…how to do it.

  13. Naveen

    Thanks for a great post, was very helpful.

  14. Joel Desrosiers

    My contact form has a dark image background so I need “your name”, “your email” and “your message” to be white. I can’t find a class or id for those elements, I tried with inspect element but I can’t find anything that works. This is the only contact form on this site. I’m using css on the stylesheet of my childtheme and I tried different options but can’t change the color. Can anyone help me?

  15. Merriann Fu

    I’m pretty new to Wordpress and Plugins in general but have this Plugin installed and everything is working correctly but instead of seeing the person’s message, it just shows [your-message] in the body of the email. I have everything set up like above and spelled correctly so i’m not sure what the problem is. Any help would be much appreciated! Thanks!

    • Don Walley

      I have the same problem. I’m only new to forms on WP but I’m stuck too. I’m trying to build a Registration page with business name, address, etc along with personal contact information and a drop down to make their choice and of course a comment field. After testing this numerous times I get the same as you; the content of the comment field.

      Wish there had been an example or two on the Docs page of Contact 7; something besides only the default Contact Form.

  16. Miguel Ceballos

    I don’t think Contact Form 7 is the most popular. It comes pre-installed with many themes and wordpress instalations, that’s the reason they have so many users. It is so frustrating to edit anything in this plugin.

  17. Osama Ali Khan

    Hello if some one want contact form with transparent background or want to add contact form 7 on the big banner image with transparent background then add this code to your custom css.

    .wpcf7 input[type=”text”],
    .wpcf7 input[type=”email”],
    .wpcf7 textarea
    {
    background-color: Transparent;
    color: BLUE;
    width: 100%;

    }

    div.wpcf7 {
    color: white;
    margin: 0;
    padding: 0;
    }

  18. Deborah

    You are an absolute life saver. I’ve been battling with this for hours.
    One point I’d make that others might find it useful to know, is that I was trying to style the submit button, which was on a contact form 7 I’d put on my sidebar.

    This worked for the first page it was on but then wouldn’t on subsequent pages. However, I then noticed that the f2 code on the second page had a suffix of ‘o2’, and when I added this to my css, the styling on this page worked too.

    Thank you again.

  19. Mikko

    Thanks for a great post, was very helpful. One thing still bothering me and it’s that i haven’t found a way to customize checkboxes. Have you found a way how it would be possible to change checkbox size for example so that it would work on every browser?

    Seems like the input structure isn’t modified so no extra spans could be added to fake the checkboxes an i right?

    Glad if you have time to help me out, cheers.

  20. Wendy

    Oh my gosh! You have no idea how grateful I am for this post! THANK YOU!

    I simply wanted to change the font used in the Submit button. I searched and searched for hours and tried various CSS code variations and nothing worked until I came across your code and then added a font element to it. Problem solved!

  21. pranav shinde

    contact-form-7/includes/css/styles.css (inactive) this appears above my css edit file,,by which none of changes are applied to website help me how to make it active

    • WPBeginner Support

      You should not edit the core plugin files. Instead you should add your CSS to your theme’s stylesheet.

      Administrador

      • pranav shinde

        ya i understood then can you please help me how can i do it..please help me in detail

        • pranav shinde

          thanks a lot sir very much helpfull will suscribe your channel

        • pranav shinde

          means i hould copy this code in my themes css file righht??

  22. Monique

    Hello,

    I am wondering if any one can help me fix the contact form for mobile. I am able to see the form but it is too wide and gets cut off.

    Thank you.

  23. puneet singh

    this very helpful realy nice tutorial

  24. Jiniya

    I find your website very helpful.just a suggestion it would be great if u could launch an app for your website soon…apps are more convenient than following emails

    • WPBeginner Support

      Sound like a good idea. Meanwhile, you can access WPBeginner using Feedly app on your mobile device.

      Administrador

  25. Anee

    Top most features in WordPress you can own style easily no need deeply knowledge for manage your site in WordPress. In Contact 7 form, you can your own structure that you have already design in HTML or other one.

  26. Neil Murray

    If working with CSS is a little beyond your current skill levels you might also consider using https://wordpress.org/plugins/contact-form-7-skins/ .

    Contact Form 7 Skins which works right within the normal Contact Form 7 interface, making it easier for regular WordPress users to create professional looking Contact Form 7 forms using a range of compatible Templates and Styles – even if you don’t have HTML and CSS skills.

    • Andrew Wilkerson

      Thanks Neil, I think that’s just what I needed. I got excited and installed it then wiped out my existing form, so I had to restore a backup of my site to get it working again, I’ll look into it more when I have time, I guess i’ll have to copy my current form into it or start from scratch with a new one. Off to watch some tutorials. Hopefully this is still the best one to use. I know it’s an old post here but it does say it was recently updated on the plugin page.

  27. Bhongo

    Fantastic article. I will use this to style one my website.

  28. Mark

    Another good article where you do not end up using yet another plug in.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.