This post was last updated on 12/26/2018

Depending on what theme or page builder you’re using, Contact Form 7 might end up not being responsive when you add it on your page.

The form might have a fixed width, which will result in fields getting cut off on mobile devices.

It happened to me on several occasions while working on some projects.

What can be done to fix this issue? I’ll show you in this post!

Make Contact Form 7 full width & responsive

These fixes will work in the majority of cases.

For some, though, it might not work, because it mostly depends on the theme or page builder, and how developers tweak the code.

Scenario 1 – The whole form has a fixed width

As you can see, the whole form has a fixed width of 400px. It doesn’t stretch all the way in the container like the text does.

On mobiles, the text will adjust to the screen size, but the form will get cut off, as you can see below.

In order to fix this, we’ll have to set a 100% width to the form by using the following CSS code, which you can simply add by going in your Dashboard -> Appearance -> Customize -> Additional CSS.

.wpcf7 {width:100% !important;}

You can also try the following one, if the first one somehow doesn’t work:

.wpcf7-form {width:100% !important;}

Here are 5 different ways to add CSS in WordPress.

Scenario 2 – The form has a 100% width, but the fields have a fixed width

Notice the difference from the first screenshot?

The blue frame is the form itself, the container, but now the fields within don’t stretch the whole form width.

So, we have to make their width to be 100%, and we can do this with another small piece of CSS code:

.wpcf7-form label {width:100% !important;}

Update: I don’t think label works anymore, so use these instead:

.wpcf7-form input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], select, textarea {width:100% !important;}

I’ve added all the input types that you might use. You should remove the ones that you don’t use.

For example, if you only use Name, Subject, Email, and Message fields, then your code should look like this:

.wpcf7-form input[type="text"], input[type="email"], textarea {width:100% !important;}

!important is not necessary in most cases, so see if it works without it first.

That’s it!

One of these two fixes, or even both, will make Contact Form 7 responsive, at least for most people.

Like I mentioned above, it depends on the theme and page builders as well.

That’s a wrap

Hope you found the post comprehensive, and it fixed your Contact Form 7 responsiveness issue.

If you have any questions or thoughts, drop a comment, contact us or message us on Facebook.

You can also follow us on Twitter and subscribe to our YouTube channel.

If you want to start your own WordPress blog, or need a website for your business, our WordPress services are at your disposal! We also provide WordPress support and maintenance!

You can also purchase a ready-made WordPress website with hosting and support included!