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.
Want to easily manage your form submissions? Take a peek at our tutorial on how to save your form data in the WordPress Database.
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.
Yikes…Are you guilty of any of these? Be sure to check out our list of the biggest complaints about contact forms from site visitors.
Create a Simple Contact Form
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:
- Your website
- How did you find us?
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.
From there, we’ll select the two column layout option.
When you do this, the column selection you’ve chosen will enlarge so you can customize it to your liking.
Click on the column you want to customize. You’ll notice that CSS classes will automatically add to the CSS Classes field.
Still collecting data using Google Forms? You don’t have to! Check out this list of the best Google Forms alternatives.
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:
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.
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.
The image below shows three different common column layouts. The red text below each field CSS classes that were used from the list above.
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.
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:
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.