How to make mobile friendly forms on JotForm

Last Update: April 18, 2017

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

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!


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:

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.

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

stonehillcollege (January 31, 2017 at 01:26 PM)

I have been adding in this orange code below and it works great on iphones at least:

View Answer

jmerhaut (February 01, 2017 at 01:12 PM)

I followed step 1 above, added the widget and removed it and I'm still having an issue in portrait view.

View Answer

charles845 (April 05, 2017 at 04:02 PM)

There is a service specifically for building mobile forms (APPS) ALL mobile devices - you design a mobile form based off your existing PDF. When you submit the mobile form - it will automatically fill out the PDF and email a completed form to you. You can set the email subject line to auto fill specific fields from your form. You can send copies of the PDF to a specific Google Drive folder.

You can email me if you want additional info

View Answer

katherineschutte (May 26, 2017 at 04:22 PM)

When I try method #1, there is no box to check to make the form mobile responsive in that location. There is a box that says "enable form columns". Where did the mobile responsive check box move to?

View Answer

Send Comment