My form is not viewable on a mobile device

  • Profile Image
    CityBox
    Asked 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!

  • Profile Image
    KadeJM
    Answered 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
    CityBox
    Answered on May 09, 2013 at 01:30 PM

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

  • Profile Image
    moonzkie
    Answered 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
    CityBox
    Answered 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
    KadeJM
    Answered 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
    CityBox
    Answered 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
    KadeJM
    Answered 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
    KadeJM
    Answered 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
    CityBox
    Answered 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
    EltonCris
    Answered 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
    CityBox
    Answered on May 10, 2013 at 07:37 AM

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

  • Profile Image
    jonathan
    Answered 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,