WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Reduce size of Input Box (4 posts)

  1. civalp
    Member
    Posted 2 years ago #

    I'd like to create as small a form as I can to make it, small enough to put it on most pages in the site. Right now the form huge. The input boxes on my page seem huge. The font sizes in the form are small enough, and I can figure out how to adjust them. But how can I change the size of the input box. NOT THE FIELD LENGTH - The whole box itself. Here's what I'm getting: http://southlandremodel.com/
    I'd like the whole form to take up about as much space as the first 2-3 fields take up.
    Thanks in advance.

    http://wordpress.org/extend/plugins/contact-form-7/

  2. KristinCodesWP
    Member
    Posted 2 years ago #

    wpcf7 is the class name given to the div surrounding Contact Form 7 forms. You can adjust various items in it with css. Example:

    .wpcf7 input[type=text] {
    width:180px;
    margin-bottom:5px;
    font-size:11px;
    }
    
    .wpcf7 textarea {
    height:50px;
    margin-bottom:5px;
    font-size:11px;
    }

    etc.

  3. civalp
    Member
    Posted 2 years ago #

    This is exactly what I have been hoping for. Can you tell me where to find this file so that I can adjust it?
    Thanks for your help, Kristin. Much appreciated.

  4. KristinCodesWP
    Member
    Posted 2 years ago #

    You can just place that kind of CSS in the style.css of your active theme. I don't think it will need any !important declarations but if you place CSS for that in the style.ss and it's not taking effect like a width value or whatever, you may try placing that tag after it like:

    .wpcf7 input[type=text] {
    width:180px !important;
    margin-bottom:5px;
    font-size:11px;
    }

    It's just best not to edit the plug-in's CSS file directly as it will get overwritten with any update.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic