User Guide

 

Deprecated: How to make mobile friendly forms on JotForm

Deprecated: How to make mobile friendly forms on JotForm

This guide is deprecated: Forms are now mobile responsive by default. This means no further configuration is required.


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!

Send Comment

15 Comments...

  • Andrew Walker

    I created a Jotform. It works perfectly on my laptop. However, on my mobile phone and tablet, the drop down menu options do not function, in either portrait or landscape view.

  • katherineschutte

    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?

  • charles845

    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

    info@digitalscans.net

  • jmerhaut

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

    https://form.jotform.com/jmerhaut/clean-amp-lean-2017

  • stonehillcollege

    I have been adding in this orange code below and it works great on iphones at least:
    https://www.jotform.com/answers/682431-Feedback-Button-form-is-not-responsive

  • Hgna

    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.

  • discoverdelicious

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

  • bonagiri

    what if responsive form on form prefrences is not avilable

  • neroplus

    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?

  • stuffmartusa

    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,

  • cubecritter

    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?

  • Dana

    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?

  • goshow

    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.

  • jessica.meyer

    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

  • guest_50323256841046

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