WordPress Contact Form 7 – How to Change Width
PDF Contact Form 7 is one of the most popular WordPress plugins. Is it very simple to create forms with this plugin however many people battle to get the forms to fit into narrow columns such as widgets. This brief tutorial shows just how simple it is to reduce the width of forms created with Contact Form 7:
- Whilst logged in as an Admin user, click ‘Contact’ then ‘Edit’ then ‘Generate Tag’.
- In the ‘size’ field enter a value (for my WordPress theme 30 is a good fit to include the form as a Widget).
- Follow the rest of the instructions given by Contact Form 7 i.e. when it says ‘Copy this code and paste it into the form left’ then do just that.
Note that some tags don’t have the ‘size’ field so it is necessary to make similar adjustments. The ‘Text area’ tag for example requires that the ‘cols’ field be populated to reduce it’s size.
Gary E
Jul 08, 2010 @ 08:37:37
New post, "WordPress Contact Form 7 – How to Change Width" – http://eckstein.id.au/7088/wordpress/wordpress-contact-form-7-tutorial/
Gary E
Aug 13, 2010 @ 04:43:54
RT @ecksteing WordPress Contact Form 7 Tutorial | Gary Eckstein http://bit.ly/c1ut5C
Mar 10, 2011 @ 19:39:40
Nice plugin, I’ve been using it for a while with no problem. Would recommend it to everyone.
Jul 18, 2011 @ 19:19:47
Works in firefox doesnt work in IE 8 or safari
Jul 19, 2011 @ 08:34:41
Hi Mark,
Try to update IE and Safari and make sure you’re using the latest version of Contact Form 7. I’ve used this ‘field size’ method on many WordPress Sites with success.
Aug 28, 2011 @ 17:57:21
Excellent !
But how does one change the width of the message area (textarea) ?
Thanks
Aug 28, 2011 @ 18:05:04
Sorry, please ignore my earlier question
Jan 05, 2012 @ 03:31:03
how do I create a mask in contact 7 phone? (11) 1111-1111
congratulations for your blog
Jan 05, 2012 @ 09:46:37
Hi Mario,
Please will you explain your question further
Jan 07, 2012 @ 05:26:05
I’ve been struggling with changing the width of the fields for contact 7. I tried your method, playing with 30, 50, 100 in the “size” section of the tag generator. It doesn’t seem to make any difference. they’re just short stubby little fields…
Also: with this contact 7 form, when I send myself an email test through it, including all my added fields (such as company, address, phone, etc), none of this information comes through the test message. only the basics that come with the default layout.
I see this post is fairly recent, so I hope i hear back!!
Thanks
Eleah
Jan 07, 2012 @ 14:35:55
Hi Eleah,
Have you tried various Browsers? Contact Form 7 is usually very reliable and you shouldn’t be having problems. Try various Browsers to see if it isn’t perhaps a Browser issue.
Feb 07, 2012 @ 00:41:35
Hello,
I want to resize my ‘textarea field’. The width must be 270 px….hoe does it work?
Greetz,
René
Feb 07, 2012 @ 10:10:58
Rene,
Using the method described in this post you can’t size in pixels. Just increase or decrease the number in the size field until it is the correct width.