Support » Fixing WordPress » Contact Form 7 in Sidebar (dynamic, not sitewide)

  • Resolved keigh


    I have successfully added contact form 7 to my sidebar (I am using Graphene theme) but cannot figure out how to get the form fields to stay within the constrained sidebar width.

    Sidebar set at 210px – so would need form fields to be 200 or less in width. I want this width specified for sidebar only and not when inserted in pages.

    Since I am using dynamic widgets – using this particular sidebar on one page only, I don’t know if adding php to sidebar file would be the correct answer. Any advice?

    You can see full width contact form (in page) here:
    You can see contact form breaking out of sidebar here:

Viewing 9 replies - 1 through 9 (of 9 total)
  • The way I did mine I have mine on the sidebar as well, and same theme Graphene. I specified a class for each value.

    For example
    [text Name class:forms_1]

    Then on your CSS you can specify the class characteristics, even colors etc etc.. So each field with that class will b set to 175px.

    .forms_1 {

    Or you can use firbug find the column set for that field and manual input each for example:
    [text Name 35/1]

    Thank you to Tee888

    Setting class then specifying class in CSS file solved it. So simple it’s genius! 🙂

    Where do I put “[text Name class:forms_1]”

    Where do I put:
    .forms_1 {

    I am using Contact Form 7 in a text widget, just pasting [contact-form 1 “Contact form 1”] into a text widget and dragging it into my sidebar widget area. Using Weaver 2.2.6 theme

    thank you

    When you create a field in your contact form there is a dialogue box (optional) called “class” just type forms_1 in the class field – no need to worry about ID field or anything. It will then insert into the code you need for the contact form.

    An example of how it looks in the form (the info you copy paste on the left side of your admin screen) is below:

    <h6>Your Name (required)
        [text* your-name class:forms_1] </h6>

    You place the Style info (below) into your theme’s CSS file. If you have a theme that allows custom css – you can add it there, or if you are using a child theme, simply add to that style.css file. Works like a charm!

    .forms_1 {

    I can send you a screenshot of the admin page that shows the “fields in action” if you email me.

    Sorry – just read that you are using the sidebar widget version of Contact Form 7 as opposed to the full version. Didn’t try using that one. Though hopefully the above still applies?

    figured it out by using Contact Form 7 tags to adjust fields to fit… thanks


    I’ve used the contact form 7 widget in the sidebar for my site. I’ve adjusted the width to fit the side by be using the class method above, which works great on my computer browser.

    However when viewed on a mobile browser with a smaller screen the fixed pixel width of 255px is far too big and extends off the side of the sidebar.

    Is there any code I can use so that the width of the input field is dynamic, and automatically 90% of the sidebar.
    Any help would be great. Thanks


    Hi guys… Thx for this great explanation on Contact Form 7 – Widget Area Styling.

    I need help in changing the padding in my contact form 7 – that is located in my sidebar.

    I do not know where to adjust the code for the padding between the lines of text.

    If you look at my site:
    you will see that I have way too much space between the text boxes.

    Any guidance would be helpful.



Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Contact Form 7 in Sidebar (dynamic, not sitewide)’ is closed to new replies.