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

    Iphone - Embedded form does not display properly

    Asked by nini1078 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

    Page URL:
    http://paintingwithsunlightphotography.com/model-release/

    JotForm form tools problem heading
  • Profile Image

    Answered by EliezerN 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

    Answered by nini1078 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

    Answered by Cesar 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.