I was working on a website for a friend, and in order to “comply” with best design standards, installed the Contact Form 7 plugin so I could add a highly visible contact form prompt to the sidebar.
CF7 performs its duties via a shortcode. So, I added a text widget to the sidebar and copy/pasted in ‘[contact-form-7 id=”851″ title=”Contact form 1″]’, and clicked save. Then I checked the resolved site to see how it would look (I expected “perfect”).
Unfortunately, the result I saw was not what I expected. Damn. As you can see from the first image below, the text box for the message was way too wide for the sidebar. The other text boxes were OK though, so I figured a minor modification would get it all straightened out.
(For those of you not familiar with HTML input fields, the TextArea type doesn’t behave exactly like the regular single line Text type. It uses rows and columns instead of a length value, and more often than not you have to experiment to get it right. It’s one of those things you eventually learn to deal with).
The WordPress.org forums yielded very little in the way of help. I found several suggestions regarding CSS mods (nah), and a couple that actually suggested changing code inside the plugin (wow, I thought we’d gone way beyond that by now).
Finally, I found a post on a blog where the issue was specifically addressed (I’m not going to link there because my solution is much, much better). The post suggested creating new “shortcode fields” and showed (via the long way), how to do that and make it work in CF7’s framework.
At first I duplicated the post’s suggestions, and what do you know – they actually worked. But, it simply entailed too many steps for me to easily remember on down the road.
However, and this is a major point, I discovered that the solution could be applied to the default form very easily. Here it is in a nutshell:
The highlighted text is all I had to add to influence the width of the form. I tried 30x and 32x, and settled on 31x as the best “fit”. (The ‘x’ is how CF7 labels ‘columns’ in their code. So, this basically translates to ’31 columns wide’). The fixed widget can be seen below.
By the way, if you need to adjust the length of the regular text fields (I did not), you can use ‘/’ as a label for length (as in ’20/’). Just be sure to add your override values right before the closing ‘]’ in the line you’re fixing.
- Contact Form 7: The Best Contact Form Plugin For WordPress(makeuseof.com)
- How to validate contact form required fields and display the error message accordingly(stackoverflow.com)