Deprecated: How to make mobile friendly forms on Jotform

September 15, 2021

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.
 
JotFormhas 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: https://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!
Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comment:

Podo CommentBe the first to comment.