User Guide

 

Deprecated: How to Make the Form Responsive Using the Form Designer Tool

Deprecated: How to Make the Form Responsive Using the Form Designer Tool

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


If you are looking for a way to make your forms to appear more user-friendly across different devices, then there's a quick option found in the Form Designer Tool that will make your form responsive. Below are the steps you can follow.

Step 1: Find the Designer icon

While on Edit mode, click the Designer button found at the right side of page. 

 

 

Step 2: Find the "Advanced Designer" button

It will open a side bar window where you can do some changes on your form, scroll down and you should find the "Advanced Designer" button.

 

Step 3: Full Featured Form Designer Tool

This will open the fully featured advanced Form Designer Tool. The screenshot below will show you where to find the option to enable responsiveness on your form. Under the "Design" tab->"Form Layout" section, you should enable the "Make this form responsive". Then hit the save button.

 

Step 4: Previewing the form

You can see how the form looks like in different mobile view when you click the "Preview" button in the Form Designer Tool. Here's a screencast on my end. 

In addition, we have lots of ready to use mobile responsive themes at our Theme Store that you can use for free! 

To see them check this link out: http://www.jotform.com/theme-store/collection/mobile 

Send Comment

24 Comments...

  • CscProvidence

    That's odd. I was able to create a brand new form a few days and it had the option available. A couple of days later, and the option was gone when creating an other new form. This is in late Sept 2017 !?

    However, if I clone a form which has the 'feature' to create a new form, the feature remains available in cloned copy. Using anything more than 2 columns messes things, so I leave to 2 columns and do some CSS to tweak...

    The catch is this : without the checkbox to turn on the feature, the form is not as responsive as it used to be ...

    The question : what's up with the different behavior ?

    To help with 'responsive' forms, it would be nice if the size (width, height, etc.) attributes would accept "%". It still looks only for "px". ;(

  • bodybuddies

    I followed all directions and I am not offered the "make form responsive check box - -I can only change my width settings :(

  • Alanyarestaurang

    Hello,
    But there is not checkbox!!!
    I couldn't find it.
    ALi

  • bjfitzpatrick

    I just check the code via Firebug and when I resize the screen to the break point where the form display issue is the form code just disappears, its the in the bigger screen but then gone. If I drag it bigger agin and refresh it comes back. Here is a link to it http://gotwake.constantcontrol.net/book.html please can someone get back to me on this?

  • bjfitzpatrick

    There is no option/checkbox for "Make this form responsive" within the "Design" tab->"Form Layout" section on my form.

    I just sent a support request regarding my form not being visible when I'm in mobile view. It works and shows fine when in a larger screen view but when I resize the screen down to the breakpoint the Jotform disappears. All I did was resize the width of it at the breakpoint. Why is it not showing on smaller screen sizes?

  • palmalockandgo

    I have it embeded and still not see anything. On computer works ok, but not on mobile phone. I also added the widget "mobile responsive". The link to our site: http://www.palmabikeandgo.com/bike-rental-palma/online-booking/

  • slabrehab

    I tried this solution and it still will not allow me to see my form in mobile mode. the form functions just fine in classic mode.

  • waynenoel

    Still no response?

  • gopanache

    Your answer does not work. This is a VERY POOR experience for customers and embarrassing to use.

  • AuDo

    It's not working for me also.

  • miohonda

    I already have this checked but my form does not appear to be responsive when opened from my iphone.

    I am guessing that this is because I customized the CSS, but I don't know how I can fix this without changing the layout of the PC version.

    Can you please help me fix this?

    https://form.jotform.me/62418076663460

  • mhew

    I'm using jotforms to make a popup lightbox for users to read my policies. Unfortunately, when I view it mobile (using the lightbox embed code) it is not adapting the lightbox window size in mobile. If a user clicks on this embed link on a mobile device, they will get stuck on it and can't "X" out from the popup. Nor can they even read the pop-up because it goes beyond the screen constraints and gets cut off. It works beautifully on desktop, but more and more people are viewing sites on mobile, so I really need this feature. Is there some way for me to get this working?
    My website is http://paintlifegrandparties.weebly.com/parties.html and the link is at the bottom of the page and reads "Policies & Cancellation".
    Thanks!

  • dcavalli

    Does this apply for Google sites? If so, I made the change and it still is not viewing correctly.

  • sonusudeep

    i have seen all the tutorials how to create a form but don't know how to convert my webpage into mobile friendly app .
    any advies ?
    please...

  • Paulina

    Hi, I followed the instructions in the user guide to see the form on mobile but simply not seen. What can I do?

  • caam_ayurveda

    Hi, I tried the recommendation above but the page is still cut off on the mobile phone. I'm using Safari on my iphone to test.

  • Kishan

    Hi, I am creating a form that I plan to use for a health survey. Have a few questions please:

    1) i don't want the form to be on a website. Instead, my team will examine patients and fill up a form per patient via an ipad. Is that possible?

    2) can I have multiple members from my team access the same form and fill it so it all gets added to the same data base.

    3) post review, we want to share a copy of the report with patients and hospital staff. Is that possible and can I design the report separately?

    Thanks

  • DigitalWebResults

    I have tried every idea I have seen in the forums on multiple threads and can't get it to work. I am using Xara Designer Pro X11 and when I embed the form on the main and mobile variants and then preview, one of the variants has no JotForm. Any suggestions? I have tried inserting placeholder, inserting code into jotform, making sure form is set to responsive design at both locations where that setting can be changed. Here is my website www.digitalwebresults.com
    Please use mmadson@ymail.com for response.

  • GentlemensAgency

    It didn't work for me, I have done everything from the instructions. Also I did re-embed the iframe code. But on IOS it is still a mess.

  • NekoStudios

    I'm viewing my form through the form's link, not my website (not embedded yet), and it looks a mess. I am extremely saddened by this as my forms are awesome and took a lot of time to create. My main issue is the fact that the conditions are not working. I will be satisfied with however it looks through mobile as long as the conditions work. Very important! Help me, please :)

    https://secure.jotform.us/NekoStudios/socialmediaservices1

  • Eric

    Thanks ! I had done the preferences - responsive already, but was unaware of the designer aspect. Will see how that goes.

  • tpbauer01

    Good work. THANK YOU!!

  • Mat

    Is there a description of what "Make this form responsive" does? Eg, what are the breakpoints and what formatting happens at these breakpoints?
    Thanks.

  • farmgrove

    I have used the purchase order and whilst the form is responsive on the pc, it's not on tablet or ipad - how can I rectify this please ?