Life, the Internet, and Everything!

How to Quickly Adjust Contact Form 7 So It Fits in Your Sidebar

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.

Text area too big

(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 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:

CF7 Admin Area

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.

Text area all better

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.

Related articles
Tags: , , , , , , , , , , , , , , ,
Previous Post


Next Post

Fixing an Annoying Lenovo Flaw


    • Mel
    • January 27, 2017

    Shazaam! Thank you for giving the perfect, easy solution. Made my day!

    View Comment

Leave a Reply