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

    GoDaddy Website Builder: Embedded form is not scrolling page in iOS

    Asked by Npedronan on April 28, 2017 at 06:48 PM

    I am using GoDaddy website builder and every time I embed jotForm it does not seem to integrate well with my website code when viewed on an iphone. I have tried iFrame, Sorucecode, and regular embedding. I have faced this issue for the last week with no solution.

    It looks fine on desktop, but over mobile (iphone) either parts of the form are cut off, or the form will not allow me to swipe/scroll down the page. This seems to only occur with Jotform's code. v

     

    Please assist...

    Page URL:
    http://www.insiderecruiter.com/get-started-.html

  • Profile Image
    JotForm Support

    Answered by Mike on April 28, 2017 at 07:52 PM

    If you would like to have your form on mobile in a format which is similar to the desktop, you may try adding the next CSS:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    .form-all {
    max-width: 450px;
    }

    It will change the mobile view to:

    Your iFrame embedded form seems to be fine on my Android phone.

    If you need any further assistance on this, please let us know.

  • Profile Image

    Answered by Npedronan on April 28, 2017 at 09:47 PM

    I still have the same issue, i am not able to scroll on my site when i use Jotform and it cuts off my site.

    The page is "frozen" on each view (but  can still use the form) meaning if i try to scroll all i see is white sections where my website is now cut off. 

     

     

  • Profile Image

    Answered by Npedronan on April 28, 2017 at 09:48 PM

    if it helps I am currently using an iPhone so not able to test on android. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 29, 2017 at 01:37 AM

    Can you please remove the excess JotForm scripts and leave only the iFrame embed code?  

    If the issue still persists, please let us know.
    Regards.

  • Profile Image

    Answered by Npedronan on April 29, 2017 at 02:31 AM

    The problem is still persisting. The header image is still cut off

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 29, 2017 at 05:04 AM

    Can you please try to add this meta tag on your website's code before the head tag?

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    Please also try removing the script part on the iframe code and see if this helps to solve the issue. 

    If you have removed it, please let us know so that we can further check.
    Regards.

  • Profile Image

    Answered by Npedronan on April 29, 2017 at 05:32 AM

    When i remove the code the entire form goes blank. Adding the meta tag had no effect.

     

    Thanks for your patience with this any other ideas? 

  • Profile Image
    JotForm Support

    Answered by Mike on April 29, 2017 at 10:08 AM

    The empty space below form is coming from a form placeholder element of your website which has a static height.

    The scrolling is fine in Windows, macOS and Android. Regarding iOS scrolling, you may try a workaround from this article, however, we do not know if this is something that will work in your case.

  • Profile Image

    Answered by Npedronan on April 29, 2017 at 06:26 PM

    hi! The empty space is put there on purpose to compensate for the form extending due to length of page 2. But the article you provided seems to be the solution. i'm not a pro at html code, how would the code look like to integrate on my site using the article?

     

    Thanks for your help/patience guys we are close!

  • Profile Image

    Answered by Npedronan on April 29, 2017 at 06:33 PM

    I JUST GOT IT TO WORK! Great job guys thank you thank you for that solution. This was it! You and your team are amazing. There are several threads that face this issue and this article is the solution. Amazing. 

  • Profile Image

    Answered by Npedronan on April 29, 2017 at 07:02 PM

    Scratch that... its not working again.  We are closer but the screen in part is still cut off. in the solution in the article i see there is a scroll bar incorporated in the demo. Unfortunately, my code doesn't show a scroll bar. suggestions?

  • Profile Image

    Answered by Npedronan on April 29, 2017 at 07:11 PM

    Ok so we are close.

    The problem I am having is on my iPhone if i am touching outside of the jotform i am able to scroll up and down my website normally. However, if i am touching on the actual form and trying to scroll, the screen is "locked" and i am unable to scroll resulting in the page looking like it is cut off. Does that distinction make sense? 

    Any solutions?

     

  • Profile Image
    JotForm Support

    Answered by Welvin on April 29, 2017 at 11:26 PM

    If you are using the iframe codes, try to set the scrolling to YES. It's currently set to "NO. After that, you should be able to scroll within the form frame. 

  • Profile Image

    Answered by Npedronan on April 30, 2017 at 02:24 AM

    Just made the update, still no affect. If I try to scroll while touching the form, the screen is frozen in place essentially cutting my website. If i scroll while touching outside the form it works normally. Any other solutions?

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2017 at 05:00 AM

    I reviewed your form but I see it was using different custom CSS codes and not those that were suggested by my colleagues from this thread.

     

    May I suggest you try first applying what was suggested and allow us to see the result. 

    We will wait for your updated response.

    Thanks.

  • Profile Image

    Answered by   on April 30, 2017 at 02:06 PM

    That CSS code is from the article suggested. It is updated from the comments in the article as an improved version.

    if the code is incorrectly placed please let me know how. 

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2017 at 04:07 PM

    I apologize for the confusion. But I could not see which article you were referring to on this discussion thread.

    From what I understand on the existing CSS codes on the form, it was just for the scrollbar of the iframe. So I do not see any code that addresses the @media part since the issue I understand was about the mobile browser view of the form (iOS).

    Can you try first refreshing the codes and apply only the one suggested from this thread. We will be able identify what can be missing if we do troubleshooting according to procedures.

    Try adding the CSS codes suggested below.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    .form-all {
    max-width: 450px;
    }