WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

responsive contact form

How to Create a Responsive Contact Form With Multiple Columns

by Lindsay Liedke on Nov 27, 2018

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.

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.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

  2. 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! 🙂

  3. 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! 🙂

  4. 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! 🙂

  5. 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

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.