Contact Form 7 in Sidebar (dynamic, not sitewide)

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 {
width:175px
}

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 {
width:175px
}

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 {
width:175px
}

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

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

Hi,

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

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: https://www.doncodesigns.com
you will see that I have way too much space between the text boxes.

Any guidance would be helpful.

Thx

D-