Scrolling messing up my mobile form

  • Vze2ygz2A
    Asked on July 2, 2019 at 9:12 PM

    Jotform,

    I'm trying to get rid of the scroll bars on my forms. They are showing up on the desktop view but they are really playing havoc on mobile. The form "bounces" up and down when I try to fill it out and then just gets stuck and won't scroll at all.

    I appreciate whatever help you can give me.

  • Mike_G JotForm Support
    Replied on July 3, 2019 at 2:27 AM

    To my understanding, the form when embedded on the website shows a separate scrollbar from the scrollbar that your website already has.

    If you have embedded your form using its Iframe Embed Codes, the Iframe takes only the space of the parent element where it is placed.

    <div id="comp-jxmiq8w1iFrameHolder" class="htco1iFrameHolder"><iframe width="100%" height="100%" name="htmlComp-iframe" scrolling="auto" data-src="https://form.jotform.com/91326389395166"></iframe></div>

    You can increase the height of the div element shown above.

    Also, may I suggest that you embed your form using its Iframe Embed Codes copied from the form builder page together with its script and set its "scrolling" attribute to "no"?

    Getting-the-Form-iFrame-Code

    <iframe

          id="JotFormIFrame-91326389395166"

          title="BECOME A CUSTOMER"

          onDISABLEDload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          allowfullscreen="true"

          allow="geolocation; microphone; camera"

          src="https://form.jotform.com/91326389395166"

          frameborder="0"

          style="width: 1px;

          min-width: 100%;

          height:539px;

          border:none;"

          scrolling="no">

    </iframe>

  • Vze2ygz2A
    Replied on July 3, 2019 at 12:42 PM

    Thanks Mike!

    I'm not a programmer so sorry if my further question is "dumb":

    You said "If you have embedded your form using its Iframe Embed Codes, the Iframe takes only the space of the parent element where it is placed." That make s sense. But in Wix, I'm unclear how to set up the parent div.

    So do I use the div (below) for the parent element together somehow with the iframe code? I'm unclear where the div below goes in the Wix framework. 

    <div id="comp-jxmiq8w1iFrameHolder" class="htco1iFrameHolder"><iframe width="100%" height="100%" name="htmlComp-iframe" scrolling="auto" data-src="https://form.jotform.com/91326389395166"></iframe></div>

    I'm also finding that the desktop version displays pretty well but the mobile is still getting cut-off and "stuck" once I try scrolling down

  • Mike_G JotForm Support
    Replied on July 3, 2019 at 1:59 PM

    Thank you for the additional information.

    I can only assume that you have followed the instructions in this guide to embed your form to your Wix website. — Adding-a-Form-to-Your-Wix-Site. When embedding, are you getting this (see image below) where you can expand the area where the embedded site would be appearing?

    1562176489zt13 53 27 Screenshot 10

    Is it the same when you embed using HTML iframe?

    We will wait for your response.

  • Vze2ygz2A
    Replied on July 3, 2019 at 2:29 PM

    Mike,

    This is different from your first solution, right? The first uses the Wix <html/iframe> tag; the second uses a simple embed link. I have tried both; the html tag works better but both are a mess on mobile--still getting a second scroll bar no matter what I try. I talked to Wix support who said it has to do with your embed code and there is nothing they can do. Any other thoughts? I'm starting to wonder if this is going to work. I appreciate your help.

  • Mike_G JotForm Support
    Replied on July 3, 2019 at 4:23 PM

    I would like to apologize for any confusion. It appears that no matter which option is chosen, the form still shows a scrollbar on a Wix website when the site is viewed on a mobile device. I'll further test the issue on my end and hopefully, I can find the best solution/workaround for your concern. I'll get back to you once I have an update.

  • Vze2ygz2A
    Replied on July 5, 2019 at 10:45 AM

    Mike,

    Thank you so much for your help with this! Any further updates on this? As you know, Wix is a huge platform so having this worked out would be a huge plus for Jotforms--but a huge negative if this glitch remains. Thanks again.

    Jim

  • Mike_G JotForm Support
    Replied on July 5, 2019 at 3:58 PM

    I would like to apologize for any delays. After checking for any possible workaround to solve your concern, I still wasn't able to find a fix to the issue you have described in this thread. However, one of my colleagues pointed out the issue is known with Wix. You can find another Wix user who posted a similar concern as yours in the Wix community forum — https://www.wix.com/corvid/forum/community-feature-request/give-the-html-element-a-dynamic-height

    JotForm is mobile responsive by default. It will just take the size of the area where it is embedded, especially, when it is embedded with its Iframe Embed Codes.

    I would like to apologize if we weren't able to help you with your concern completely. I suggest that you contact Wix about the issue. You may also use the link I provided above as a reference.