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.

SEE ALSO  Side Dish Recipes

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 an ideal , easy solution. Made my day!

    View Comment
    • Katie
    • February 27, 2017

    THANK YOU! I just spent an hour trying to figure out how to fix this and your blog post finally did it.

    View Comment
  1. Reply

    How the hell CF7 expect us to know all those codes ?

    View Comment
    1. Reply

      Your guess is as good as mine. This was a while ago, but I remember doing a LOT of searching before I found the answer. I don’t use CF7 anymore, but perhaps their support and documentation has improved since then.

      Thanks for stopping by and commenting.

      View Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: