Contact Form 7
[resolved] Formatting form for sidebar (4 posts)

  1. Mejms
    Posted 3 years ago #

    Hi everyone,

    I'm stuck on something fairly simple. I want to format the fields for the contact form so they fit on the sidebar. The spaces are too wide.

    I tried the suggestion found here of just changing the size tag, but nothing happens. However, I am able to change the maxlength tag without a problem.


    Here's my page with the contact form in the sidebar:



  2. Takayuki Miyoshi
    Plugin Author

    Posted 3 years ago #

    Line #1463

    #sidebar input[type="text"], #sidebar textarea {
        background: url("images/sidebar-form-bg.png") repeat scroll 0 0 #FFFFFF;
        border-color: #CCCBC6;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 10px;
        padding: 5px 8px;
        resize: none;
        width: 242px;

    The last width: 242px; is actually set for the fields. Try Firebug to find CSS problems.

  3. Mejms
    Posted 3 years ago #

    I'm really a non-techie, so I don't quite understand what to do. Could you explain the steps to me in changing the width of the fields? I'm unfamiliar with Firebug and would have no idea how to use it. Is it possible to change the width of the fields in some simple way?


  4. blindscientist
    Posted 3 years ago #

    Hi Mejms,
    Firebug is a free add-on to Mozilla Firefox, and it's a great tool for figuring out problems like this. That's how Takayuki figured out what stylesheet and line your problem was on. That said, you need to open your style sheet editor and open style.min.css. Then navigate down to line 1463. Then, look for the line that reads "width: 242px;" and change it to "width" 202px;" . Hope this helps.

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