UPDATE: You can now use the Contact Form 7 shortcodes in text widgets. This plugin is no longer needed. If you’re looking for an easier alternative to Contact Form 7, try Formidable. If you’re using this widget for the styling, please note you can also use the Formidable shortcode in place of the Contact Form 7 shortcode.
The Contact Form 7 Widget plugin includes many widget options and must be used alongside either Formidable or Contact Form 7 plugin. We only support the widget plugin and Formidable, but not Contact Form 7. For help and support for the Contact Form 7 plugin, click here.
Installation
- Download Formidable or Contact Form 7 plugin.
- Download the Contact Form 7 Widget plugin.
- Activate both plugins.
- A new menu is now beneath the regular menu items. Copy the form shortcode at the top of the page ie [ formidable id=2] or [contact-form 1 "Contact form 1"]
- Go to “Widgets” in the “Appearance” menu.
- Find “Contact Form 7 Widget” and drag it to your sidebar.
- Update the settings and paste the right shortcode in the “Contact Form 7 Tag” line.
note: rounded corners do not work in Internet Explorer… Surprise!
another note: Use 6 digit hex colors for better results
{ 4 trackbacks }
{ 38 comments… read them below or add one }
I could not get this to work. All it would display was this tag… [contact-form 1 "Contact form 1"]. Good luck with this and regards.
Make sure you also have the Contact Form 7 plugin installed and active.
How do I control the width of the form fields? My sidebar is not that wide.
Looks like you figured it out because it looks good on your site. If it doesn’t work by default, you can always add a size to your fields in the Contact Form 7 form options or add a width in your css:
input[type="text"]{width:200px;}
Or something like that.
Hi there
You can do it, when you make your form
[text* telefon 20/50] = 20 size / 50 maxlength
[textarea* your-message 20/3] = 20 cols / 3 rows
That works!
Thomas
Thanks . .
It works.
I am having the same issue as “Fred” and have checked that it is installed, active and have set the colors, etc. but the tag still is the only thing showing in my sidebar.
Thanks for your help!
Deanna
Do you have a form with the tag [contact-form 1 "Contact form 1"]? If you changed the name of your contact form, this will be different. Check it out on http://…/wp-admin/admin.php?page=contact-form-7/admin/admin.php
I didn’t change anything. I followed the directions from your installation tab.
The only reason I see that this would be happening is if you haven’t installed and activated the Contact Form 7 plugin. Maybe you could double check that?
I have checked and rechecked it is activated and is in my widgets, has been placed in my sidebar and have set colors for each of the fields but when you visit my site it shows up with only the tag [contact-form 1 "Contact form 1"]. I have also set the title as “Contact Us” with the Sub title “We look forward to hearing from you!” Do I need to change the tag in some way because of the title???
Did you download a plugin in addition to this one? There is another plugin required. In order for this to work, you must install the plugin it depends on.
Thank you, if you mentioned that in your instructions and I missed it I apologize. However, if it isn’t there you may want to add that info into the instructions. : ) I am downloading the Contract Form 7 now. I’ll let you know if I have any further issues.
Thanks again for your help,
D~
I am having the same problem – my widget form fields are too wide for my sidebar – i think they need to be 100px – can you please tell me specifically how to change that?
i don’t see anywhere to change options in Contact Form 7 (which is active) and I don’t know what css is or where it is.
Thanks.
Thomas answered that question above. In your form, add in the two numbers for size and max length displayed below.
[text* telefon 20/50] = 20 size / 50 maxlength
[textarea* your-message 20/3] = 20 cols / 3 rows
Thanks Thomas!
Hi Steph. I saw this answer but have absolutley no idea what telwfon 20/50 means or what any of it means and i do not know where in the form to put it. i do know that my sidebar width is 100px if that helps.
i tried going into “edit widget” and i tested inputting your other suggestion —
input[type="text"]{width:100px;}
– changing it to 100px — but no matter where i put it nothing changed. maybe you can tell me where in the edit widget code i can put this other bit?
Thanks. and sorry, but i don’t know much about code except how to change the hex colors.
At the bottom of the admin menu should be a menu item called “Contact”. The Contact Form 7 forms are listed here. If you need more help on this one, go to the Contact Form 7 plugin support page. You’ll be able to find a lot more details there. Thanks!
Here’s the code that worked for me, based on the info Thomas provided:
<!–
Your Name (required)
[text* your-name 20/20]
Your Email (required)
[email* your-email 20/20]
Subject
[text your-subject 20/20]
Your Message
[textarea your-message 20/3]
[submit "send message"]
–>
Hi,
The plugin works ok until I press the submit button that stays looping. Any suggestion in what to do?
By the way very powerfull and esay to use plugin Thanks
Regards
PACO
Have you tried putting the form into a page to see if it works correctly there? Any idea where the lopping is occurring? (Which urls is it going between?)
Hi Steph,
I’d like to use the Widget to support Contact7 to let visitors request special report(s), or request information on services that are related to particular WP site pages.
I don’t want the widget to show up on *each* page, and I’d like to be able to separately re-invoke it, or just leave the sidebar empty, etc.
How can I do this?
This widget alone can’t do that, but try adding Display Widgets
Can we use this plugin to create a dropdown menu in the widget bar? CSS or otherwise? I am trying to add a custom dropdown menu with each state with a custom url.
This seems like an easy thing to do but due to the php code of wordpress, I guess the normal html coding wouldn’t work. Please help!
I don’t think I understand the question. This widget does not have any form editing capabilities. I also have a new form builder plugin, but the value shown in the drop-down is currently the same value of the option. For example,
option value="Option">Option</optionI’m not sure if I’m making sense either. You can start a forum post if you have more questions.
Thanks!
I have been unable to create a simple dropdown menu. I wouldn’t even think of using this plugin for this purpose otherwise (I usually use like everyone else just as a contact form:). But because Wordpress will not allow me to create simple widget dropdown menu w/custom url’s I guessed this plugin might work for that purpose.
I am embarrassed if I am completely incorrect. If you have another suggestion or would like to do this project for me I would more then willing to pay for your time, one quick look at my sidebar widget on my health insurance website will quickly make u understand my shortcoming. In any event thanks for getting back to me.
I understand your problem now. Here is a simple solution you can throw in a text widget:
<select name=”health_insurance_states” onChange=”goToStateInsPage(this.value)”>
<option value=”"></option>
<option value=”/alabama-health-insurance”>Alabama Health Insurance</option>
</select>
<script type=”text/javascript”>
function goToStateInsPage(state){
if(state){window.location=state}
}
</script>
This will automatically redirect when the state is selected. Feel free to make a donation!
I’ like the form, but Iave not been able to customize it, after many frustrating hours. In fact I’d like to to look like this form I’m writing on, with the text to the right of the box.
Anybody has any suggestion for a non-techie ?
thanks
thanks
nice plugin
Finally I found answers to all my qestions. With sufficient thrust, pigs fly just fine.
When I edit the colors ect. nothing changes. I have tried many variations and all result in the same default form. Is there a way I can go into the code and change it?