How to Make Contact Form 7 Full Width and Responsive

>How to Make Contact Form 7 Full Width and Responsive
  • contact form responsive

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

contact form 7 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.

contact form 7 not responsive

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

contact form 7 fields 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;}

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.


You might also want to read:

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!

By |2018-07-19T08:48:25+00:00June 2nd, 2018|Fix, Plugins|1 Comment

One Comment

  1. Kalpana June 11, 2018 at 2:59 PM - Reply

    Thanks, i just loved your article.. theses are so helpful and comprehensive..

Leave A Comment

Subscribe
SIGN ME UP

All Aboard!

Get WordPress guides and tutorials right in your inbox once per week, plus some cool   offers from time to time!
close-link