How to make mobile friendly forms on JotForm

Last Update: November 27, 2016

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 login, signup, contact or lead generation forms. Forms should be mobile friendly across all devices for good usability and a high quality user experience. One way to do this is to make your forms mobile responsive. What this means is 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.
 
1. Make this 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.
 
    a. While on the form builder, click the Designer icon. This will open up the mini designer.
    b. In the mini designer window, click the Advanced Designer button to open the full designer.
    c. In the Advanced Designer, click the Form Layout on the right panel and check the Make this form responsive option.
 
 
Tip: The Form Designer has a built in preview mode for different devices and views. Simply save your form, which causes the preview button to appear.
 
 
2. The Power of Injecting CSS - If you have your own personal style with form design and would prefer to use custom CSS code, this is what you’re looking for. This is for advanced users.
 
Injecting CSS can be done either from 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, simply click the CSS tab while in the Form Designer.
 
Quick tips on injecting custom CSS:
 
 @media query is the common way of making web pages responsive, this as well applies to the forms. It is used to define different style rules for different media types/devices. Here’s an example of a media query CSS targeting specific width.
 
/* Targets display area with 768px maximum width*/
@media screen and (max-width:768px) { /* STYLES GO HERE */}
 
If you want to find out more about media query CSS codes targeting different devices, here’s one good source. http://stephen.io/mediaqueries/.
 
 
3. 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 do suggest using one of the first two options instead, but for completeness, this widget is a great way to accomplish the same.

- If you are new to widgets, you can see how to add it to your form here: How to Add a Widget to your Form.


4. Mobile Responsive Themes - sometimes the theme is the best choice to make your form look great and in 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 make your form get the edge that you are after, hand made by various designers and available for you here: http://www.jotform.com/theme-store/collection/mobile.
 


NOTE:
Please do note that mobile responsiveness is a tricky thing. With so many different devices available and the difference in performance coming so close to those of desktop computers and various CMS, designs and so many other factors playing a role each of the options above will work on its own, but also in combinations with other options. 

If you are embedding your form onto your website and you are not satisfied 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 the mobile responsiveness that is not covered here, please do let us know in the comments bellow :)

Go ahead and start making mobile responsive forms with Jotform!


10 Comments...


   
guest_50323256841046 (August 14, 2015 at 11:27 AM)

What if I already have a form that I created previously. Do I have to start from scratch to make it mobile friendly?

View Answer


   
jessica.meyer (September 08, 2015 at 08:42 PM)

I have a current form and it doesn't show any options in the designer settings. It just has a bunch of lines with nothing between them. I even took a screen shot.

Or check out my form here: https://www.jotform.com//?formID=42548399847171#design

View Answer


   
goshow (September 30, 2015 at 04:18 AM)

How does this work with the lightbox popup? Because I have to set the size in the popup, but it is too wide in the mobile version.
Thanks.

View Answer


   
Dana (December 16, 2015 at 02:51 PM)

I have created an order form and added it to our Facebook page. However, I am having difficulties allowing the form to be accessed from mobile devices. I have followed instructions via your User Guide but am still having no luck. Can you please help?

View Answer


   
cubecritter (January 24, 2016 at 05:50 PM)

I have a form created with 1and1 website builder that cannot be seen on mobile devices. I have enabled responsive form options 1 and 2 above and that did not work. I then tried adding the mobile responsive widget. After adding the widget, when I preview the form for mobile devices, I see the form "flash" and then vanish, leaving the field blank as it was before. Any other thoughts?

View Answer


   
stuffmartusa (February 08, 2016 at 11:21 AM)

My form works flawlessly on the desktop but seems to be very slow and hard to fill in on my mobile device.. is there a fix for that? BTW, I enabled form responsiveness in both the editor and the form designer,

View Answer


   
neroplus (March 09, 2016 at 06:55 PM)

When I make my form mobile responsive and embed into my site, my form moves from 2 columns to 1 column. This is very frustrating, any fixes?

View Answer


   
bonagiri (April 26, 2016 at 02:24 AM)

what if responsive form on form prefrences is not avilable

View Answer


   
discoverdelicious (July 20, 2016 at 05:10 AM)

Whatever I change, my lightbox newsletter form will not adjust to the correct width on mobile. Can you help?

View Answer


   
Hgna (October 04, 2016 at 04:17 PM)

it is very disappointing that after almost two years of encountering this issue, Jotform has not yet made lightbox responsive. any progress on that front would be highly appreciated - if not an automated fix then at least a ready-to-copy media query code standard which one could then adjust according to width and height etc.

View Answer


Send Comment