How to Make Contact Form 7 Full Width and Responsive

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

This post was last updated on 9/19/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

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;}

Update: I don’t think label works anymore, so add input types and textarea instead:

.wpcf7-form input[type="date"], input[type="time"], input[type="datetime-local"], input[type="week"], input[type="month"], input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], 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.

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!

WP Rocket - WordPress Caching Plugin
By |2018-10-21T14:34:40+00:00June 2nd, 2018|Fixes, Plugins|12 Comments

12 Comments

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

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

    • ThemeSkills September 13, 2018 at 4:04 PM - Reply

      Thank you! I appreciate it!

      Sorry for the late reply 🙁

  2. luke mersh September 13, 2018 at 2:42 PM - Reply

    worked the first time, but when i tried again those fixes didnt have any effect.

    • ThemeSkills September 13, 2018 at 4:00 PM - Reply

      I checked it out a bit and I think that some things have changed with the recent updates.

      Add input instead of label, like this: .wpcf7-form input {width:100% !important;}.

      The code for the whole form (scenario 1) should still work.

      I’ll update the post as well.

      Thanks for letting me know!

  3. Er September 19, 2018 at 1:25 PM - Reply

    i tried this using “input” and it is working except that the message box (the biggest box) is still fixed size and not responsive, The “Send” button on the other hand, is the one stretching and it stretched screen-wide. “Your name” “Your email” and “Subject” text boxes are working perfectly

    • ThemeSkills September 19, 2018 at 2:36 PM - Reply

      Thanks for pointing this out! You’re right, it’s my bad.

      input works for all input types, including input[type="submit"], which is the button. And the message box doesn’t use input, it uses textarea, that’s why it didn’t change.

      So, you’ll want to use this:

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

      This will make the text, email, and message fields responsive, without the button.

      I’ve also updated the post with more input types that you and others might use.

      Let me know if it works now.

  4. Ben Hasler October 30, 2018 at 1:30 PM - Reply

    hi these tutorials are great but the one thing i cant get to work is to make the text within the submit button responsive? the button its self is responsive but the text bleeds out the right hand side when reduced small.

    i do have a long amount of text ‘GET YOUR FREE INVESTMENT GUIDE’ but i assumed it would just line break onto two lines when small?

    what am i missing?

    many thanks

    • ThemeSkills October 30, 2018 at 9:42 PM - Reply

      Hello!

      I hate it when that happens.

      Add this CSS code:

      .wpcf7-form input[type="submit"]{white-space:normal;}

      It works on my end, I tested it.

      Add !important if it doesn’t work:

      .wpcf7-form input[type="submit"]{white-space:normal !important;}

      Clear your page and browser cache as well.

  5. JG November 3, 2018 at 11:04 PM - Reply

    Any idea how to make the captcha container responsive? All the other fields behave themselves except that one. When I do tweak the CSS the “refresh” portion of the captcha doesn’t wrap or flow — it just is not viewable.

    • ThemeSkills November 4, 2018 at 1:37 AM - Reply

      If you’re referring to the [quiz] tag, then that’s a text field, so it should work with input[type="text"], as you see in the post.

      If you’re talking about reCaptcha, then those JS and CSS files are loaded externally from Google, so there’s not much you can do about it, at least not in this case.

      But reCaptcha fits well on mobiles. Are you using a 3rd party tool to add a captcha to Contact Form 7?

  6. JG November 6, 2018 at 9:09 PM - Reply

    I bought a theme that has turned out of be nightmare code.I’m trying to get the reCaptcha to play nice with within a sidebar and the sidebar is only displayed on post pages and category post pages.

    I am using Contact 7 Form Mailchimp Extension.

    • ThemeSkills November 7, 2018 at 6:42 AM - Reply

      I see. Well, you have a different situation here. First, you’re using the Contact 7 Form MailChimp Extension. Second, you’re using the form in a sidebar. Third, reCaptchca has a fixed width of 300px, so it won’t behave well on smaller sidebars. And last, you’re saying that the theme doesn’t help either.

      So, there are several different factors you have to deal with. Try asking for help on CF7 MailChimp Extension’s forum. Maybe they’ll have a quick solution.

Leave A Comment

SUBSCRIBE BEFORE YOU GO?

- Get guides and offers right into your inbox -

The type of emails that you would like to receive (multiple selection allowed):

You can unsubscribe at any time by clicking the link in the footer of the emails. For more information, please check the privacy policy.

I use MailChimp as my emailing service. By subscribing, you understand that your email and preferences will be transferred to MailChimp. Learn more about MailChimp's privacy practices here.

close-link