How to: Change the width of your CF7 Form (Contact Form 7)

Sometimes you want to change the width of your Contact Form 7 (CF7) but don't have the means to do so. 

Luckily enough, the famous WordPress plugin, Contact Form 7, uses a simple HTML syntax that makes formatting the form fields with CSS easy. 

First, let's look at the outer structure of the form. 

By default, all CF7 forms have the class of "wpcf7-form" which means you can call out the form using the following syntax:

form.wpcf7-form

So, if you wanted to give this a set width, or a max width, you could do the following:

form.wpcf7-form { width:100%; max-width:400px;}

This tells the form to be 100% width on all devices up to the 400px max-width threshold. This is a great tactic for getting forms to respond well on mobile and to not have them be overly sized on desktop. 

If you want to change the width of the form SUBMIT button, you will want to apply the following CSS:

.wpcf7-submit {width:200px;}

If your theme has some pre-built styles that are overriding what you're doing, consider adding more selectors to make it more specific.

Something like this:

.wpcf7 input[type=submit].wpcf7-submit

So if you wanted the button to be always 300px wide, you could do the following:

.wpcf7 input[type=submit].wpcf7-submit { width:300px; }

If you want to change the width of the EMAIL field only, consider the following code:

input[type=email].wpcf7-email {width:300px;}

And if you want to change the width of the TEXT fields only, consider the following code:

input[type=text].wpcf7-text {width:300px;}

Let's say you have a spot for "More information" or "leave a message" and you want to style that. More times than not, you'll use the "Text Area" feature within CF7 instead of a Text Field. The syntax is similar but different. Here's how you style the text area.

textarea.wpcf7-textarea {width:400px; height:100px;}

If you need to go deeper, you can give the actual "TextArea" an ID within the CF7 settings when you're creating the form. That's what the ID means in CF7. Otherwise, you can apply the same form.wpcf7-form prior to the text area to further style the element.

It's important to note that sometimes the input[type=email] isn't necessary to achieve the results. This is only required when you have a premium theme and you need to override the existing theme settings.

Want more help? Contact Mittun today to get started.

Contact Mittun Today

Still need help? Contact Us Contact Us