How To Make Contact Form 7 Plugin Fields Responsive & Full Width

I love the Contact Form 7 plugin for WordPress. It’s simple and reliable and we use it a lot for WordPress website we design and develop. However I wish it was fully responsive and mobile friendly.

responsive contact form7

For example, take a look at this screenshots of a form I’m currently developing for client website using Contact Form 7. (This form is for a phone repair service website in Aukland, New Zealand)

contact form plugin

This is how the form I added using CF7 looks like by default in screen sizes with a width of more than 1200 pixels. Notice the different width sizes for different Contact Form 7 field box types like select drop down, text field and text area field boxes. It looks very unprofessional and maybe difficult to fill out for user too. Would be good if they were all the same width by default.


This second image screenshot I got from Firefox. It shows how the same form will look in a mobile device with a display width of 480 pixels. Notice, the Contact Form 7 Text Area, Text Field and Drop down boxes all have different default widths.

However no worries with a little bit of CSS tweaking I was able get it to be fully responsive with all field boxes having the same width like in this below images.

Here is the code snippet I add to the Style.css file of this custom WordPress theme I’m building for this client.

Making WordPress Contact Form 7 Plugin form responsive and full width with CSS customization
Add this code snippet to your WordPress theme's style.css file.
div.wpcf7 .wpcf7-form-control { 
	max-width: 95%; 

/* Make Contact Form 7 Select Dropdown field responsive & full width */
.wpcf7 select {  
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0;
    padding: 4px;
    text-indent: 0px;
    width: 100%;
    z-index: 100;
/* Make Contact Form 7 text field full width & responsive */
.wpcf7-text { 
	width: 100%;

/* Some additional CSS customization to the whole Contact Form 7 form */
div.wpcf7 { 
	background-color: #f5f5f5; /* Adds background color */
	border: 2px solid #eee; /* Adds a form border */
	padding:20px 10px 10px 10px;
	-webkit-border-radius: 4px; /* Making form border rounded */
	-moz-border-radius: 4px; 
	border-radius: 4px; 

The screenshots below shows how the fully responsive Contact Form 7 form looks like in 1200px+ screen size and 480px screen size after applying the above CSS customizations. Now the input fields have the same size boxes.
responsive form WordPress

Only a few lines of CSS code did the trick. The first time I wanted to make Contact Form 7 responsive like this it took me a long while to figure out.
wordpress mobile form

I find myself regularly using this code snippet or a variant with most WordPress projects I do using the Contact Form 7 plugin. So you might want to copy it and save it somewhere for future use or bookmark this page for future reference. If you have trouble with making any other field types responsive you might be able to get an idea about it from this Styling Contact Form documentation page found on the official Contact Form 7 site.

I’d love to hear comments, questions or tips. Please share them in the comments below. Thanks.

Written by: Aksam Zarook
Aksam Zarook is a web designer, developer, online marketer and founder of Zeeron Solutions. With nearly 11 years of work and business experience he excels in web design, web development, graphic design and Internet marketing. He is also a family man with two adorable little kids and rides a motorbike.

Join Discussion Now!

14 comments on “How To Make Contact Form 7 Plugin Fields Responsive & Full Width

    1. Hi Aksam, I use CSS codes which are all over the net, possibly including your solution and modify them with Firefox Inspector and other similar tools to fit into my specific design requirements. The biggest problem is actually functionality as I need it. For me, the most useful WP form programs out there are cFORMS II and CF7 (with 3rd party add-ons, like DBs).

      After re-evaluating for usefulness, I will republish all my CF7 links again early next year for all to gain easy access to.
      — Rainer

    2. There is a two years old code I would love to see it adapted fully for CF7, including the jquery for most of the browsers. The demo looks like it is working, but if no data entered into the form, the submit button still says ‘…sending’ sometimes. Anyhow, I think it would be great if we could use this html5/css3 jquery form.

      The form is fully RESPONSIVE.

      Please take a look at:

      and try it with the latest FF browser first.

      Do you think it is possible? The css code is no problem, but I do not know very much about jquery in order to adapt.

      A new project for all of us? 😉

      — Rainer

      1. Hi Rainer,
        Sorry I got late to respond. I was hoping to have try your example out yesterday and then today too. But unfortunately didn’t get time. I’m currently trying to make another form using contact form 7 for the phone repair service website I used in this post example. Here’s a photo of that form dynamic contact form
        This a free quote request form I’ve built with contact form 7 plugin. Building this form is proving difficult as it much advanced than the simple forms we can build in cf7. The select dropdowns need to be loaded dynamically from custom category taxonomies. I’ve got that working with contact form 7 dynamic text extention plugin and a bit of custom function. My next challenge is to filter the brand/fault dropdown based on device type selected. I’m currently working trying Ajax to filter the dropdown.

        1. Indeed, I have checked every other day if there was something new 😉 But I can understand that you have only 24 hours per day to do something 😉 Hope you still find the time to evaluate the form I gave you.

          Aksam, what would make your forum very interesting is if you could provide also the full CF7/MARKUP/CSS/JQUERY/AJAX source code each time you have developed, tested and approved a new form completely. It would enable others to build upon it. There are not many complete CF7 code samples out there who are provided for free, that is, the ones beyond the basics. Of course, better yet, if you could find the time to write a complete article/tutorial about it, too.

          I know it is a very time consuming process, but peoples will interact with you and your site and may provide their own versions later. Make your one developed forms open (as much as you can) and you will get useful feedbacks quickly.

          The form you have developed looks interesting. I hope you can share more coding details about the advanced part later.

          Still, please take a look at ‘my’ form later, too and let me know.

          — Rainer

  1. You are right. Getting the functionality is more difficult than styling these CF7 forms. Even in this example form I’ve used in this post, I need to get the ‘Brands’ select dropdown field from a custom taxonomy/category type. For that I need to add a additional plugin or add some code that will do it into the theme/custom plugin file. I guess the plugin author wants to keep it simple and let people who need more advanced options use premium form plugins like Gravity forms or Ninja Forms.

  2. Thank you so much! I have used your code and my contact form fields are perfectly responsive and i also could addapt the code to my client’s theme custom colors.

    ¿Could you perhaps add a CSS line to make the “Send” Button also responsive width? It would be great if i could have a button that addapts to the column width, now it is really small and i can’t find the class where i should add the 100% width value.


Leave a Reply