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

    Form Height is over running on Ipad and Iphone devices. Help Please!

    Asked by connecter on October 13, 2011 at 07:27 AM

    The forms I have designed run well in IE5 and in Chrome as well as Safari on computer applications.  However on iPad and iPhone versions they over run.

    How can I fix this....main website has be designed using Xara Webdesigner V7.

    While I can create a scrolling placeholder for the form which works on computer, again this code does not work on iPad/iPhone devices, so a solution to fix the for height across all platforms is most desirable.

     

    Thanks

    Page URL:
    http://www.stephen-caldwell.magix.net/public/boatquote.htm

  • Profile Image

    Answered by allanftd on October 13, 2011 at 08:00 AM

    Hi connecter,

    Thanks for posting your message. Is it possible for you to embed the form using the iframe embed code and then setting the iframe width to around 95% to 100%? Please let us know how it goes.

    Thank you for using JotForm!

    Best,
    Allan 

  • Profile Image

    Answered by connecter on October 13, 2011 at 08:11 AM

    Mmm interesting result. 

     

    Does not solve ipad over run issue. However in explorer we  we now have a very small iframe with txtscroll...

    do you want to take a quick look before I revert?

     

    Steve

  • Profile Image
    JotForm Support

    Answered by NeilVicente on October 13, 2011 at 08:32 AM

    Steve,

    Your embed codes are a little messed up. I am thinking that you manually embedded the form in an iframe inside Xara. Please use the iFrame Embed option in the Embed Form wizard instead.

    To get your form's iframe codes:

    1.  Go to Setup & Embed tab
    2.  Click Embed Form
    3.  Click iFrame



    4.  Copy the codes provided in the succeeding screen

    Modify the iframe codes so that the attribute "scrolling" is set to "auto"

    <iframe allowtransparency="true" src="//form.jotform.com/form/11012027246" frameborder="0" style="width:100%; height:1230px; border:none;" scrolling="auto">
    </iframe>

    Also, try decreasing the height property of the div tag holding the form to around 1230px.

    <div style="position: absolute; left: 260px; top: 203px; width: 756px; height: 1230px; overflow: hidden;">

    Please let us know the results of this solution. Thanks!

  • Profile Image

    Answered by connecter on October 13, 2011 at 09:47 AM

    I think I am getting there. 

    The form height restriction seems to help if set to 1150 although not sure this is wholey responsible for solving the issue.  As I reduced the width of two of the txtscroll boxes so they fit onto one line as ooposed to two seperate lines.  I would also be interested to know if it is posibble to easily adjust the height of each question field, especially the "FreeText HTML" box, as the spacing seems to be a little overkill.

    When adjusting the DIV tag it seems to cause more issues than it resolved.

    One issue seems to be that txtscroll boxes do not work on ipad/iphone, is this perhaps it uses a form of javascript or flash which is not recognised?  Would also explain why i can not seem to get any txtscroll boxes to work on them, jotform or otherwise...

     

    Thank you for your prompt help with this it has been most helpful and has added to my understanding and limited knowledge on iframes.

     

    Regards

     

    Steve

  • Profile Image
    JotForm Support

    Answered by NeilVicente on October 13, 2011 at 10:03 AM

    It is definitely possible to adjust the height of question fields. Just go to Setup & Embed > Preferences > Field Styles then adjust the value of Question Spacing.

    As for adjusting the Free Text, try injecting this custom css code (Preferences > Form Styles > Inject Custom CSS):

    .form-html p {
        margin0;
    }
    Now I don't exactly understand what you mean by text scroll boxes? Are you referring to the scrollbars for the iframed form?
  • Profile Image

    Answered by connecter on October 13, 2011 at 01:26 PM

    Re last point.. "Text Scroll Barss"  yes I am reffering to the scroll bars in the iframed form, on the "textArea" boxes used in the form.  They work find on standard computer browsers, but when viewing on ipad and iphone the scroll bar does not appear.

    Hope that helps to clarify.

     

    steve

  • Profile Image
    JotForm Support

    Answered by NeilVicente on October 13, 2011 at 01:56 PM

    After searching around the web, it seems that the iPhone and iPad's default browser (mobile Safari) does not dislay scrollbars. According to this page, the only way to scroll them is by dragging the content using two fingers.

    Kindly try that solution and see if it helps.