responsive contact form

How to Create a Responsive Contact Form With Multiple Columns

Do you want to create a responsive contact form in WordPress? Out of the box, all forms you create using the WPForms plugin will be responsive and adjust to fit any size screen.

However, if you choose a multi-column layout for your form, it may be difficult for your mobile visitors to navigate.

In this article, we’ll show you how to create a responsive contact form and display a multi-column form layout as a single column only to mobile visitors.

Responsive Contact Form With Multiple Columns

Creating a multi-column form layout is a great strategy to reduce the height of your form.

Reducing your form’s height is helpful for those time you want to add a lot of fields to your form to attract high-quality leads. This way you can make your form look shorter and entice your site visitors to submit your form.

But the problem with a multiple column form is that when viewed on a mobile device, it can be difficult for your visitors to navigate. After all, they may have to scroll horizontally to see the whole form depending on the type of device they have.

WPForms is the best WordPress Form Builder plugin. Get it for free!

This can lead to form abandonment and hurt your overall form conversion rates.

To give your site visitors an easier time navigating your form on their small mobile devices, it’s highly recommended you show your multi-column form layout as a single column, but only to your mobile visitors.

So, let’s take a look at how to do just that using WPForms.

Create a Simple Contact Form

The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Now you need to create a new form. You can see our tutorial on creating a simple contact form to get started.

In our example, we’ll add a few more fields to the form to make it long.

All of the form fields we’ll have on our contact form will be:

  • Name
  • Email
  • Your website
  • How did you find us?
  • Message

long contact form example

Just remember, WPForms is very flexible and can have as many form fields as you need. For instance, if you need to create a job application form using the pre-designed template, which comes with a lot of form fields, that’s ok.

And if you need to add more to fit your needs, that’s ok too.

We strive to make the most beginner friendly WordPress form builder plugin in the market. However, that doesn’t mean we don’t pack it full of great features too. After all, being easy to use is great, but so is being powerful.

Create a Multi-Column Form Layout

WPForms comes with several multiple column form layouts. You can create a multi-column form either by adding CSS classes with visual layouts or by manual insertion.

In our example, we’ll create a two-column layout using the visual layout options.

To select a column layout for your form, click any field on your form in the form builder. We’ll click the Name field.

Next, in the left hand panel, scroll down and click on the Advanced Options section. Then, select Show Layouts to see all available column options.

multiple column layout section

From there, we’ll select the two column layout option.

multiple column layout options

When you do this, the column selection you’ve chosen will enlarge so you can customize it to your liking.

multiple column selection

Click on the column you want to customize. You’ll notice that CSS classes will automatically add to the CSS Classes field.

css classes multiple layout option

This tells your contact form that you want the form field you’re customizing, in this case the Name field, to take up one half the width of the form since we have cut the form in half with a two column layout.

More specifically, the wpforms-one-half class tells the field to take up half of the available width, while the wpforms-first class tells the field that it needs to start a new row.

Take a look at how to do this in real-time:

Add CSS classes with visual layout tool

Follow those same exact steps for all form fields on your form, assigning them to either the right or left hand column. If you choose a different layout, assign each form field to its respective column.

This is what our form looks like after assigning each form field its column.

multiple column form example

Notice that we didn’t assign the Message form field to either column. Instead, we left it to a single column.

Manually Add the CSS Classes

If you would prefer not to use the visual builder to create and assign columns for your form, you can type in the CSS classes manually instead.

In case you want to check out all the available CSS classes for layouts, take a look at them below.

  • wpforms-one-half
  • wpforms-one-third
  • wpforms-one-fourth
  • wpforms-one-fifth
  • wpforms-one-sixth
  • wpforms-two-thirds
  • wpforms-two-fourths
  • wpforms-two-fifths
  • wpforms-two-sixths
  • wpforms-three-fourths
  • wpforms-three-fifths
  • wpforms-three-sixths
  • wpforms-four-fifths
  • wpforms-five-sixths

The image below shows three different common column layouts. The red text below each field CSS classes that were used from the list above.

manual css classes

Display Fields in a Single Column on Mobile

Now that you’ve created your multiple column form, it’s time to make sure your mobile visitors do not see the multiple columns.

To do this, all you have to do is add the CSS class wpforms-mobile-full to the CSS Classes field under Advanced Options.

single column on mobile

Make sure to do this form all of your form fields so they appear the same on all mobile devices.

This is what our form will look like on a mobile device:

single column on mobile final

And there you have it! You now know how to create a responsive contact form with multiple columns, while simultaneously displaying a single column to mobile site visitors.

If you enjoyed this article, you might also want to check out 10 tips to boost contact form conversions so that whether your site visitors view your form on their desktop or mobile device, they’ll click “Submit.”

So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.

And don’t forget, if you like this article, then please follow us on Facebook and Twitter.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.


  1. Very useful. Thanks. But is there a way view this class name in the help icon tooltip or something in the form editor itself.

    So I won’t have to remember or come back to this post to see what it was?

    1. Hi Hitesh,

      We don’t currently have this option in our layout picker, but I agree this would be useful. I’ll make note of your idea for our team to consider. Thanks for the suggestion! 🙂

    1. Hi Ash,

      This is on our feature request list to consider adding, and I’ll add your request to that also. I agree it could have useful applications.

      Thanks for the suggestion! 🙂

      1. What about this request? Wpform layouts are really limited without this feature!

      2. Hey Claudia, I apologize we can’t provide what you are looking for at the moment.

        However, I’ve noted your interest in this feature and added your email to our list to receive updates about this feature.


  2. This option doesn’t work for Name Fields or Email Fields that uses dual boxes. Is there a way to make this option work for those dual boxes?

    1. Hi Brad,

      I agree, these two-part fields can look small on some phones and I’ve made note of your request to address this. In the meantime, you can add a little custom CSS to make these fields full-width on small screen sizes:

      @media only screen and (max-width: 600px) {
      div.wpforms-container-full .wpforms-form .wpforms-mobile-full.wpforms-field-email .wpforms-one-half,
      div.wpforms-container-full .wpforms-form .wpforms-mobile-full.wpforms-field-name .wpforms-one-half {
      width: 100%;
      margin-left: 0;

      This adds those mobile, full-width styles to the First and Last Name fields, as well as the Email/Confirm Email fields. In case it helps, I made a quick demo to test this — here’s a screenshot of how these fields should appear on small screens with this CSS.

      You can quickly add this CSS by going to Appearance > Customize > Additional CSS, or WPBeginner has a great tutorial with all the ways you can add custom CSS like this to your site.

      I hope this helps! If you have any questions, could you please get in touch?

      Thanks! 🙂

  3. Are there other specific mobile css classes, like wpforms-mobile-two-thirds, that aren’t mentioned in this article but can be found elsewhere?

    1. Hi Allie,

      Great question. We currently have only one mobile-specific CSS class for layouts: wpforms-mobile-full

      The reason we have just this one option for mobile is to offer the best user experience in the large majority of cases. The point when this CSS class applies is such a narrow screen size that full-width fields will almost always make it easiest to tap on different fields, etc. It’s still possible to create custom CSS to create additional width options, but for most users this full-width approach will be the best way to go.

      Thanks! 🙂

  4. Hi, I added a border and background in CSS. all my forms are single (small) fields.

    On mobile they look fine, but on desktop the form background stretches way too wide. Is there a way to have the form border fit more precisely?

    Thank you

    1. Hi Bread Director,

      While we don’t have any integration specifically with Bootstrap styling, you can absolutely add custom CSS to your forms. I’d recommend starting with our button styling tutorial.

      The best approach in this case would most likely be to follow that tutorial to locate the CSS selectors you need, and then copy the styles from Bootstrap over into your custom CSS.

      I hope this helps!

  5. Can I use wpforms as a search form to search items that have been registered in a site by other users? Say a user registered with wpform things like . Name. Height. Eye colour. Hair colour. Etc and another user logs in to search this item with a wpform search form?

    1. Hi George! Thanks for your comment!
      This feature is not available in WPForms currently. You can try using a third-party plugin to create a custom search form on your site that can search a custom data on your site.
      Or, you can display a table with your form entries and that data will be available for the regular WordPress search. You can find more details on how to display form entries on the front end here.
      Hope this helps!
      Have a good one! 🙂

  6. Hi, thanks for the article but writing CSS classes by hand is not user-friendly at all, just add a checkbox like “Show full width on mobile” to field options please 🙂

    1. Hi Ahmed,
      I apologize for the inconvenience!
      We appreciate the suggestion, I will add a note regarding this in our system.

      Have a good one 🙂

  7. How can we have a two-column Checkbox field be single-column on mobile? I tried the above but it doesn’t take. Thanks for your help!

  8. Great article but I don’t understand why there is no hint for wpforms-mobile in the backend.

    I would really appreciate a button or checkbox to enable “wpforms-mobile-full” without having to remember the class name.

    1. Hey Matthias – Thanks for the feedback. We will keep that on our radar while we work in future for various style editing options. I am sorry for the inconvenience at this time.


  9. Thanks a lot for this article.
    Kindly add styling options in wpforms, so that we can completely change colors, borders,background etc with just clicks.

    1. Hey Ubaid – Yes, absolutely, this already a feature request in our list, I have gone ahead and added your vote to the request. Meanwhile, if it helps, we have CSS tutorial on how to style the form.

      Also, you can refer to this tutorial on how to customize the styles using a third-party plugin called CSS Hero.

      Have a good one 🙂

  10. Hi
    I made my website with Elementor on WP. When the forms are in a single column everything works fine. But when I change the design and assign one the above CSS classes, they are not fillable anymore!
    Please let me know how I should fix it.

    1. Hi spyridon! The reCaptcha badge is provided by them directly and isn’t something that can be controlled by our plugin unfortunately. You should be able to modify its dimensions with some custom code/CSS. We have a great article on how to use CSS for styling here.

      If you require further assistance and have an active WPForms license, please submit a support ticket.
      Otherwise, we provide limited complimentary support in the WPForms Lite support forum.


  11. I would need help to be able to see two columns on mobile devices. Since when creating a “checkboxes” with modern Imege choice Style and two-column layout I always see that in vertical view mobile devices the two columns become a single column. What or how can be done to display the two columns on mobile devices?

    Thanks in advance.

    1. Hi Facundo – We do not have an inbuilt feature to achieve what you have mentioned! However, this can be achieved using the CSS Code:

      @media only screen and (max-width: 600px) {
      div.wpforms-container-full .wpforms-form .wpforms-list-2-columns ul li {
      width: 50%;

      And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

      Hope this helps!

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.