How to Make Mobile Friendly Forms on Jotform

Mobile web usage is mainstream. If your website doesn’t display correctly on the web, you’re missing users. People are frequently using their mobile devices to access websites. This includes your web forms, such as signup, contact, or lead generation forms. Forms should be mobile-friendly across all devices for usability and a high-quality user experience. One way to do this is to make your forms mobile responsive. This means that no matter what device a user accesses your form from, it will display appropriately. They won’t need to zoom in or out to view it. This tutorial will show you how to make mobile responsive forms with Jotform. 

Jotform has several options to make forms mobile responsive, even without writing any single line of code for non-technical users. Here are the ways to make mobile-friendly forms with Jotform.

Making Form Responsive on Form Designer

This is the recommended method as it will turn your form into a fully mobile responsive form across different devices like iPhones and iPads, in both portrait and landscape modes. Here are steps to enable this on your form. 

1. In the Form Builder, click the Form Designer icon.
2. Click the Advanced Designer button at the bottom of the Form Designer panel.
3. In the Advanced Designer, go to the Form Layout section.
4. Check the Make this form responsive option. 

The Power of Injecting CSS

If you have your style with form design and prefer custom CSS code, this is what you’re looking for. This is for advanced users. 

You can inject the custom CSS codes through the Form Builder or Form Designer. Here are instructions on how to inject CSS from the Form Builder. The Form Designer is more advanced, so we recommend writing CSS there. To start building custom CSS code, click the CSS tab in Form Designer. 

Quick tips on injecting custom CSS:

@media query is the typical way of making web pages responsive. This as well applies to the forms. It defines different style rules for different media types/devices. Here’s an example of a media query CSS targeting specific widths. 

/* Targets display area with 768px maximum width*/
@media screen and (max-width:768px) { 
/* STYLES GO HERE */
} 

Here’s one good source to learn about media query CSS codes targeting different devices.  

Using Mobile Responsive Widget 

If you would like to use a widget instead of keeping the two options above or injecting your own CSS code, this widget has seen it all and helped millions of forms to do what they needed – to be mobile responsive.

We suggest using one of the first two options instead, but for completeness, this widget is a great way to accomplish the same.

To learn more about adding widgets to your forms, visit How to Add a Widget to Your Form.

Mobile Responsive Themes

Sometimes the theme is the best choice to make your form look great and, at the same make it behave as it should no matter what device it is opened on. Get one of the great-looking Themes designed to give your form get the edge that you are after, hand-made by various designers and available for you here. 

If you are embedding your form onto your website and are unsatisfied with how it looks with the two options turned on, feel free to start experimenting.

You can try any combination mentioned above, and if you find some new way of achieving mobile responsiveness that is not covered here, please let us know in the comments below.

Go ahead and start making mobile responsive forms with Jotform!