How can I keep my form from "floating" on mobile devices?

  • ariclairevip
    Asked on July 21, 2015 at 1:11 PM

    Greetings!

    How do I keep my website form from "floating" on mobile device. It also stops scrolling at a certain point instead of allowing the user to scroll all the way to the submit button. The form is here: http://www.ariclairevip.com/#!lets-get-started/c1bop.  The domain host is Wix.

    Thank you for your help ..thanks for the BEST form builder online!!!

    Cher

     

  • KadeJM
    Replied on July 21, 2015 at 3:30 PM

    From what I understand you are having issues with getting your jotform to display properly on your wix website without it floating.

    Have you tried adding it as suggested in our guide for Adding JotForms to Wix?

    Also, since you are using a form for mobile purposes make sure you've enabled Mobile Response.

    However, do be advised that sometimes the Mobile Responsiveness can be offset if the Website is using assigned containers so in those cases it's a good idea to check your Mobile Host and try enabling the Mobile Settings to fix the problem.

    When I look at this on my iPhone this is what I noticed.

    How can I keep my form from floating on mobile devices? Image 1 Screenshot 40 

    How can I keep my form from floating on mobile devices? Image 2 Screenshot 51

     

    At first it appears okay, but it's notable that it's cut off on the right side and the mobile responsiveness should fix that problem in most cases but might require further adjustments with injected css

    It's also notable that when scrolling the form appears to float sort of which I believe might be what you are talking about maybe?

    How can I keep my form from floating on mobile devices? Image 3 Screenshot 62

     

  • ariclairevip
    Replied on July 21, 2015 at 10:30 PM

    Thank  you. Will look into it... Your response is appreciated!!!

  • ariclairevip
    Replied on July 21, 2015 at 11:50 PM

    Again, thank  you. The best answer was to "lock" the forms into place on the Wix editor. This stopped the floating issue. I am still having the issue of making the entire form visible. Both forms scroll to a point and cut off. I went back into the editor and changed the HTML code to make the form longer. Doing this creates a scroll bar on the PC version of the website. What can I do to make the pages scroll down to the Submit button on the mobile site without creating a scroll button on the PC site?  Thanks!

  • ariclairevip
    Replied on July 21, 2015 at 11:55 PM

    PS. I can see the entire form inside Wix Mobile editor for the "Let's Get Started" page. I can see a partial form on the "Request" page. However, I can see only partial forms on mobile devices.

  • BJoanna
    Replied on July 22, 2015 at 3:57 AM

    I have tested form on my Samsung Galaxy S4 and I noticed the white space at the bottom of the form.

    How can I keep my form from floating on mobile devices? Image 1 Screenshot 20

    You should be able to remove white space by changing the height of iFrame code. Height is currently set to 4000 px. Try to change the height to 3800px. 

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51088330453148" frameborder="0" style="width: 100%; height: 3800px; border: none;" scrolling="no"></iframe>

    Hope this will help. Let us know if you need further assistance. 

  • ariclairevip
    Replied on July 22, 2015 at 7:56 PM

    Thank you! Part of my issue is when I change the the height on the iFrame to a lesser height I get a scroll bar on the PC site ...not preferable. My issue is that on the mobile both forms cut off prior to getting to the end. How to fix? Thanks! Cheryl

  • ariclairevip
    Replied on July 22, 2015 at 7:59 PM

    I again tried adjusting the height of the iFrame code to 3800px and it cuts of the form on the PC site AND the mobile site.

     

  • Charlie
    Replied on July 23, 2015 at 2:17 AM

    Hi,

    It seems like the element that wraps your form is too long and there is an element blocking it.

    How can I keep my form from floating on mobile devices? Image 1 Screenshot 50

    The main element that also holds the form is also larger.

    How can I keep my form from floating on mobile devices? Image 2 Screenshot 61

     

    It seems like you might need to stick on the 4000px so that it won't be cut on both PC and mobile.

    How can I keep my form from floating on mobile devices? Image 3 Screenshot 72

     

    The problem with Wix is that it's hard to style or reposition the elements manually. And they seem to embed the elements in multiple iFrames. Have you tried embedding using the default script code instead? See if that embed code works.

    How can I keep my form from floating on mobile devices? Image 4 Screenshot 83

     

    Let us know if that one works.

  • ariclairevip
    Replied on July 25, 2015 at 1:44 AM

    Thank you for your many efforts!!! I could find no resolution for the issues so I ended up inserting a url link on the form to redirect mobile users directly to the form online. Works perfectly!!!! Thanks!

  • BJoanna
    Replied on July 25, 2015 at 2:56 AM

    In a behalf of my colleagues, you're welcome.

    We are glad to hear that you found a solution for your issue.

    Feel free to contact us if you have any other questions.