Iphone - Embedded form does not display properly

  • Profile Image
    nini1078
    Asked on October 30, 2013 at 04:30 PM

    I'm at my whits end on this!  I've read lots of form questions and I simply can't figure out why I'm still having issues.  I have a jotform ( http://form.jotform.us/form/33025743168150 ) that I've embeded on a hosted wordpress site.  The form looks great on my webpage but when I access it from my iphone it's not rendering correctly.  It resizes part of the form but the heading text and some of the button text run right off the page.  

    I tried using the wordpress embeded code and then switched to the iframe embedded code, neither render correctly on my iphone.  Any help would be greatly appreciated!  I don't know if I need to use different form tools in design, or if it's an embedding problem, or if jotform simply can't handle rendering this form on my phone. 

    Here is the link to the form on my hosted site: http://paintingwithsunlightphotography.com/model-release/

    Thanks in advance!!!

    Jennifer

  • Profile Image
    EliezerN
    Answered on October 30, 2013 at 05:18 PM

    Thanks for contacting us.

    In order to fix your form please try inserting this CSS code to your form:

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

    {

    .form-header-group

    {

    width:250px !important;

    }

    }

    Use the next guide to know how to insert CSS codes to your form: How to inject custom CSS codes

    I hope that helps, but if you need further assistance, please let us know.

    Thanks

  • Profile Image
    nini1078
    Answered on October 30, 2013 at 09:48 PM
    I got the css code inserted in the form but it didn't fix it. It's better
    if I use the direct jotform link, although the radio button text still runs
    off the page as well as the signature page, but when I embed the iframe
    code into my hosted wordpress code it still isn't re-sizing correctly on a
    mobile device.
    wordpress embed form:
    http://paintingwithsunlightphotography.com/model-release/
    direct jotform link: http://form.jotform.us/form/33025743168150
    Any other ideas?
  • Profile Image
    Cesar
    Answered on October 30, 2013 at 11:57 PM

    Hello, 

    Is this happening on all Iphone Browsers, have you tried a browser other than Safari?

    Kindly try injecting the following CSS code and verify if there are any improvements on how the form displays.

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

    .form-textbox, .form-textarea
    {
    width:200px !important;
    min-width:200px !important;
    max-width:200px !important;
    }

    .form-label-left
    {
    float: left;
    }

    }

     

    Do let us know if the issue persists. Thank you.