What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Responsive Form - For Mobile.

    Asked by art_crate on July 05, 2016 at 06:44 PM

    Hello,

    I am trying to format my form so it displays properly on mobile.

    Currently using an iFrame in Squarespace: http://artcrate.co/get-started/

     

    I am using the image radio widget and image checkboxes.

    Image attached of formatting issues.

    Page URL:
    https://form.jotform.com/61545333952962

    Screenshot
    checkboxes
  • Profile Image
    JotForm Support

    Answered by Kevin_G on July 05, 2016 at 07:25 PM

    I have checked your form and I can see the same, could you please try adding the mobile responsive widget to your form? 

    Here is the link to the widget: https://widgets.jotform.com/widget/mobile_responsive 

    This should help you to optimize your form in mobile devices; however, if not, please let us know and we will be glad to check your form again. 

    Thanks. 

  • Profile Image

    Answered by art_crate on July 05, 2016 at 09:00 PM

    Hi Kevin,

    Added the widget, didn't seem to fix the form for mobile.

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 05, 2016 at 11:36 PM

    I checked your site and it seems to be mobile responsive.

     

    Can you check again your site and see if it is working now?

  • Profile Image

    Answered by art_crate on July 06, 2016 at 01:30 AM

    Hi Chriistian,

     

    See the other pages on the form. Screenshot below.

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 06, 2016 at 02:59 AM

    Can you please try to inject this custom CSS code in your form?

    @media screen and (max-width: 480px){

    .form-multiple-column {

        width: 100% !important;

    }}

     

    To inject custom CSS code in your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

  • Profile Image

    Answered by art_crate on July 06, 2016 at 07:14 PM

    Chriistian,

     

    That looks much better.

    Is there any way to fix the progress bar? It appears as the whole width of the screem (blurry).

    Also - How complicated would it be to have alternate images load for mobile? As you can see this user experience is subpar for mobile.

     

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by Kiran on July 06, 2016 at 09:31 PM

    Please try replacing the CSS code provided by my colleague in the last response with the following code.

    @media screen and (max-width: 480px){

    .form-multiple-column {

        width: 100% !important;

    }

    #cid_137 > div > img.form-image, #cid_136 > div > img.form-image, #cid_135 > div > img.form-image, #cid_134 > div > img.form-image, #cid_69 > div > img.form-image, #cid_71 > div > img.form-image, #cid_84 > div > img.form-image, #cid_116 > div > img.form-image {

        width: 70% !important;

     

    }

    }

    This should be displaying the progress bar images with reduced width on mobiles. 

    How complicated would it be to have alternate images load for mobile?

    Do you mean to display separate images when the form is loaded on mobiles? Please provide us with more information on this question so that we can further assist you.

    Thank you!

     

  • Profile Image

    Answered by art_crate on July 07, 2016 at 01:34 AM

    Hi Kiran,

    Added your css to the form.

     

    That is correct, I would like for the form to display different images when loaded on mobile. Is this possible?
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 07, 2016 at 02:44 AM

    I think it may be possible to change the image seen on mobile by using the @media query. However, you will need to modify the css of the widgets. I will provide a detailed guide for you in a short while. Regards.

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 07, 2016 at 03:14 AM

    Since the guide is quite lengthy, I have decided to move it to a new thread. You can view this thread by following this link: https://www.jotform.com/answers/877271. If you have further questions on the guide, please post your response there. Thank you.