Contact Form 7
Box Height + Font Size (6 posts)

  1. staz1000
    Posted 3 years ago #

    How can I increase the height of the boxes in my form and the font inside?

    Is it taken from my theme's style.css? If so what part and how can I separate it??


  2. Josh Hardman
    Posted 3 years ago #

    In your main stylesheet you can control any form field height/font by simply using the form input CSS class. For example:

         width: 300px;
         height: 30px;
         font-size: 15px;
         font-color: #000;

    Bear in mind though, if you are using forms anywhere else on your website, these will also take the same styles. If you want separate form styles, you will need to create a class for the form fields which can be done in the Contact Form 7 admin menu, and simply add the style to your main stylesheet.

  3. staz1000
    Posted 3 years ago #

    Excellent, thanks for taking the time to explain Josh!

    I had a drop-down box and a comments text area which were unaffected so I added:

    .wpcf7-form-control  {
         font-size: 17px;

    That fixed it.

    Another quick question though, all the boxes use the same font as my theme's apart from the comments text area, how do I make it inherit the font too?

  4. Josh Hardman
    Posted 3 years ago #

    The text area are not inputs. These are textareas. You can target global text areas using:

  5. staz1000
    Posted 3 years ago #

    I couldn't get it to work but I added the font-family to the .wpcf7-form-control and that worked.

    Thanks Josh

  6. James
    Posted 2 years ago #

    This wont work
    styles.css ?ver=1.0 cant find this file, its not at the server
    can you serch it from my website lindenleaf

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic