How can I make my Embedded form to always start from the top when next or back button is clicked

  • Charlesobi
    Asked on September 3, 2017 at 8:29 PM

    For my embedded multi-page form.
    https://www.ultigraph.net/shop/businesscards


    How can I make my embedded form to always snap to the top of the form when next or back button is clicked

    * It snaps to the top when next button is clicked, but not the same at the back button in browsers
    * It doesn't snap be it next or back button in the Facebook Mobile App browser.

    This makes the form user to suddenly meet my website footer when any of the buttons is clicked.

    How do I resolve this?

    Thanks waiting for your helpful reply.

  • Ashwin JotForm Support
    Replied on September 3, 2017 at 11:26 PM

    I did check your webpage where you have embedded your form. Have you edited the iFrame embed code which you have added in your webpage? The onload attribute seems to have been deleted.

    I would suggest you to please please a fresh copy of your form's iFrame embed code and it in your webpage. The following guide should help you how to grab your form's iFrame embed code:  https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Do get back to us if the issue persists.

     

  • Charlesobi
    Replied on September 4, 2017 at 11:07 AM

    Ok, thanks. I have inserted the fresh iframe embed code. But the issue persisted. 

    The Facebook App Mobile Browser doest snap to the top for both Next and Back button

    Google Chrome (Both Mobile and Desktop) snaps to the top of the form when "next" button is clicked. But It doesn't snap to the top when the back button is clicked.

  • Ashwin JotForm Support
    Replied on September 4, 2017 at 12:29 PM

    I did test your form which is embedded in webpage and I am unable to replicate the issue you are having. It seems to scroll to top when the back button is clicked. Please check the screenshot below:

    How can I make my Embedded form to always start from the top when next or back button is clicked Image 1 Screenshot 20

     

    If you check the screenshot above, it scrolls to top of the form when the back button is clicked. The image is also part of the form which you have added in "Image Slider" widget and when the back button was clicked, the images are being displayed. 

    Can you please let us know how the form behaves when you click on the back button? Which version of google chrome browser are you using?

    You may also like to share the facebook page URL where you have embedded your form and we will take a look.

  • Charlesobi
    Replied on September 4, 2017 at 7:36 PM

    If you get to page 3 of the form (2|5 Design) and choose "Yes I want to order for design" that page is kinda lengthy. If you click "next" after filling the page it snaps to the top of the form, but if you click "back" button it won't snap to the top of the form. The form user will suddenly meet the footer of my website. the form user will have to scroll upward to see the form page.

    The same happens for other lengthy pages of the form.

    As for the Facebook Mobile App. If you share the link of where the form is embedded; your audience will have to click on the link,  Facebook App comes with in built browser that can open the link inside the App.

    So, using the in built browser when you click "next" or "back" none of them snap to the top of the form.

     

    This creates a bad user experience.

  • Mike
    Replied on September 4, 2017 at 8:40 PM

    The scrolling to the top of the form upon a Back button click seems to be fine when I test it on a JS embedded form. Please try the standard JS Embed code on your web page to see if that helps.

    How can I make my Embedded form to always start from the top when next or back button is clicked Image 1 Screenshot 20

  • Charlesobi
    Replied on September 5, 2017 at 5:43 PM
    Please, my IP was blocked from accessing Jotform I don't know what I have
    done wrong.
    I have filled and submitted the form that I was presented with, I'm yet to
    gain access to jotform.com.
    My Account Info:
    Username: Charlesobi
    E-mail: ultigraphdesigns@gmail.com
    Thanks, hoping for your helpful reply
    ...
  • Kevin Support Team Lead
    Replied on September 5, 2017 at 7:39 PM

    In order to assist you better I have moved your last reply to a different thread, we will assist you as soon as possible on the following link: https://www.jotform.com/answers/1240491 

  • Charlesobi
    Replied on September 6, 2017 at 5:47 AM

    I have tried standard JS embed code. It's working perfectly fine on desktop browsers. But the form doesn't load at all on mobile browsers. 

    How do I resolve this?

  • Ashwin JotForm Support
    Replied on September 6, 2017 at 6:09 AM

    Please note that for your forms to work correctly in mobile devices, we recommend you to embed your form using its iFrame embed code. Since you have embedded your form with JS embed code, there seems to be some code conflict between your form script and other scripts available in your webpage.

    The best solution is to re-embed your form using its iFrame embed code but that could cause the your back button issue to reappear. Please use the following iFrame embed code and see if that solves your problem:

     <iframe id="JotFormIFrame-61965333413556" onDISABLEDload="javascriptDISABLED:window.parent.scrollTo(0,0);" allowtransparency="true" src="https://form.myjotform.com/61965333413556" frameborder="0" style="width: 1px; min-width: 100%; height:1205px; border:none;" scrolling="no"> </iframe>

    <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-61965333413556"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

    Do get back to us if the issue persists.

  • Charlesobi
    Replied on September 6, 2017 at 9:55 AM

    So, how can I resolve the back button issue, as well as get the form load on mobile?

  • BJoanna
    Replied on September 6, 2017 at 11:24 AM

    I was able to replicate the issue on my phone when I clicked the back button on the page 3. 

    Please remove the script part of the iFrame code to see if that will resolve the issue. Use only this part of the iFrame code:

     <iframe id="JotFormIFrame-61965333413556" onDISABLEDload="javascriptDISABLED:window.parent.scrollTo(0,0);" allowtransparency="true" src="https://form.myjotform.com/61965333413556" frameborder="0" style="width: 1px; min-width: 100%; height:1205px; border:none;" scrolling="no"> </iframe>

  • Charlesobi
    Replied on September 6, 2017 at 5:40 PM

    This didn't solve the problem. It created a huge space between the form and other elements in the page where it was embedded. (Based on the height:11439px of the form).

    The back button when clicked, the user will meet an empty part of the page (within the height of the form). It will require one to scroll up to see the content of the form.


    You can check it out: https://www.ultigraph.net/shop/businesscards/

  • Welvin Support Team Lead
    Replied on September 6, 2017 at 7:36 PM

    You are using WordPress. Please give our WordPress Embed Form plugin a try to see if that will fix it.

    https://wordpress.org/plugins/embed-form/ 

  • Charlesobi
    Replied on September 7, 2017 at 7:08 PM

    I have tried Jotform WordPress plugin, the form loads on desktop, but doesn't load on mobile.

    The only embed method working for mobile is the iframe. But it has aforementioned issues with the back and next button with browsers.

    Please, how can I rectify this issue?

  • Mike
    Replied on September 7, 2017 at 8:04 PM

    1) The JS embedded form is not showing within Facebook in app browser since their app has some JS processing issues. This is not likely that we will be able to affect that behavior.

    2) We can escalate a ticket to our developers regarding the Back button scrolling issue when the iFrame code is used. However, if both next and back buttons do not work in Facebook app, the fix will not change anything.

    3) You may consider the following workaround from a StackOverflow thread to recommend users to open the website using a normal browser.

    StackOverflow: How to prevent Facebook in app browser from opening my website links