Embedded JS form not scrolling to recaptcha on iOS upon form submission attempt

  • Profile Image
    zachk
    Asked on February 25, 2021 at 12:37 PM

    We are currently using a form we made through you guys on our website. We host it on BigCommerce and when I reached out to BigC they didn't find any issues on their end.

    Basically we have a re-captcha form that appears at the top of the page with the 2nd "Submit" button. We are finding that users on mobile who go to support a form will hit the first "Submit form" button, but fail to scroll up and see the re-captcha form to ACTUALLY submit the form. Is there a way to change or receive help in the mobile responsiveness? To have it refresh at the top of the page so users don't miss anything?

  • Profile Image
    Mike
    Answered on February 25, 2021 at 08:18 PM

    Please kindly try using the universal iframe embed code:

    Getting the Form iFrame Code

    It is supposed to automatically scroll to the top of the frame.

  • Profile Image
    zachk
    Answered on February 26, 2021 at 10:55 AM

    Hm.. I did this and now on desktop mode the form is in its own box but really small (attaching picture for reference.) I am going to revert it back for the time being but what can I do to fix this? We want it responsive for both desktop & mobile. 1614354879_603919bf7741f_question.PNG

  • Profile Image
    Bojan_J
    Answered on February 26, 2021 at 02:10 PM

    Greetings.

    This can probably be resolved with custom CSS. However, we need to see the form to know what CSS to add. Do you have some page that is not public where you can add the form so we can test it?

    Thank you for your cooperation.

  • Profile Image
    zachk
    Answered on February 26, 2021 at 02:21 PM

    No but we can test it here, just so long as we are able to revert if anything is funky.

    https://classicmagnets.com/request-your-free-quote/


  • Profile Image
    Mike_G
    Answered on February 26, 2021 at 06:53 PM

    Thank you for that information. I'll ask my colleague what workaround using custom CSS codes he has in mind.

    But I would also like to confirm first — I have checked your form and I not found a captcha field, do you require that your form asks to complete a captcha during submission?

    Also, with the Iframe Embed Codes that my colleague, Mike, has suggested above you can set the iframe's height and width.

    <iframe id="JotFormIFrame-210284745680155" title="Request Your Free Custom Magnet Quote for Your Business, Attraction, or Event" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/210284745680155" frameborder="0" style=" min-width: 100%; height:539px; width: 100%; border:none;" scrolling="no" > </iframe>

    How would you like to consider also trying that solution?

    We will wait for your response.