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

    My form is not viewable on a mobile device

    Asked by CityBox on May 09, 2013 at 10:08 AM

    I have embedded my form into my website (citybox.us) under the "Order Now" section. For some reason the form does not appear on mobile devices when viewing the mobile version of the site. Do I need to click a button / redesign the form the make this work?

     

    Thanks!

    Mobile mobile device site section thanks
  • Profile Image
    JotForm Support

    Answered by KadeJM on May 09, 2013 at 10:51 AM

    So you are having viewing issues for the mobile version of the form on your website then if I am understanding you correctly?

    I looked at your form on your website by checking this on my iPhone and I was able to view it in a ThirdParty Browser using Photon where it showed up. But then when I checked it in Safari I found the same problem you are having. 

     

     

    You can try re-embedding your form onto your website with the iFrame Code to see if this helps. Please let us know if you are still having issues.

  • Profile Image

    Answered by CityBox on May 09, 2013 at 01:30 PM

    Yes, exactly. I cannot view the order form in Safari on a mobile device.

  • Profile Image

    Answered by moonzkie on May 09, 2013 at 02:17 PM

    Hi,

    I can see that you have followed my colleague's suggestion as to embedding your form using iFrame and upon your form on Safari mobile and was able to see the form now. Just to confirm, are you still experiencing the said problem?

    Thank you.

  • Profile Image

    Answered by CityBox on May 09, 2013 at 02:30 PM

    Hi! Yes. I did try the iFrame solution and it helped. However, do you see how some of the subtext got cut off on the far right? Any thoughts on how to fix that?

    Thank you guys for your prompt responses! This is helpful.

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 09, 2013 at 03:24 PM

    Hello, can you please try using this code and Inject the CSS into your Form to see if this helps correct the problem. The only field that is going to be a slight problem is going to be the Address Field since it's sublabels to gather the address information are much larger but you can still see it.

     

    CSS CODE:

    @media only screen and (max-device-width: 550px){

    .form-subHeader, .form-header { margin: 5px; width: 300px !important;}

    }

    .form-all { margin: 2px; }

     

     

    Cloned Form:

    http://form.jotform.us/form/31285924577161

     

    Final Result:

     

  • Profile Image

    Answered by CityBox on May 09, 2013 at 03:32 PM

    Yes, your're exactly right. That helps a bit. The top subheading now looks good. But the address field and disclaimer at the end get cut off.

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 09, 2013 at 03:53 PM

    No problem, please give me a little while if you don't mind and I will see if I can tweak it a little bit more for you so that it looks better. I will get back to you as soon as I can on this.

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 09, 2013 at 05:13 PM

    Okay, I think I've figured it out now, took some additional tweaking to get it to this stage.

     

    Here's the New Script to Inject:

    @media only screen and (max-device-width: 550px){.form-address-table{

    width:260px;

    }

    .form-address-line{

    width:240px;

    }

    .form-address-city, .form-address-state{

    width:110px;

    }

    .form-subHeader, .form-header { margin: 5px; }

    label#label_15.form-label-left { width: 300px !important; }

    }

     

    Here's the Form Again now http://form.jotform.us/form/31285924577161 with the updated css script. Let me know if it looks any better this time.

  • Profile Image

    Answered by CityBox on May 09, 2013 at 07:49 PM

    The address field looks good now. However, the subheading at the top and disclaimer still get cut off on the right hand side a bit. Much better though! Thank you for helping me with this.

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 09, 2013 at 11:39 PM

    @CityBox 

    Try the following code, this may help reduce the sub header and the disclaimer message width on mobile view. I just appended my codes from the previous codes provided by my colleague above. Hope this helps. Thank you!

    @media only screen and (max-device-width: 550px){

    .form-address-table{

    width:260px;

    }

    .form-address-line{

    width:240px;

    }

    .form-address-city, .form-address-state{

    width:110px;

    }

    .form-subHeader, .form-header { 

    margin: 5px; 

    }

    label#label_15.form-label-left { 

    width: 300px !important; 

    }

    #id_24{

    width: 280px !important;

    }

    .form-subHeader{

    width: 280px !important;

    }

    }

  • Profile Image

    Answered by CityBox on May 10, 2013 at 07:37 AM

    Looks great now. Thank you! You guys are great!

  • Profile Image
    JotForm Support

    Answered by jonathan on May 10, 2013 at 08:25 AM

    Hi,

    Thank you for updating us. We're glad to know all is good now.

    Contact us again anytime should you have any other concerns.

    Regards,