Embedded Form: Scroll to top of page on click of Next

  • Profile Image
    invortal
    Asked on July 31, 2017 at 10:43 AM

    Is there a function like ?nojump that makes it scroll back to the top of the page upon clicking on the button instead of staying in the same position on the page? because on mobile it is still a bit confusing when you click "Next" on a form and it doesn't scroll to the absolute top of the page

    You can try https://allstarsports.com.au/vendor-registration

    Click on the Proceed button while using iphone and you will see my issue

  • Profile Image
    Chriistian
    Answered on July 31, 2017 at 10:53 AM

    I checked your site and I was able to replicate the issue you are reporting. When I click on the Proceed button the site does not scroll back to where the form is.

    If you want the page/form to scroll up when clicking the Next/Proceed button instead of retaining its position, please try to remove the ?nojump in your embed code.

    <script src="https://form.jotform.co/jsform/72048760004853" type="text/javascript"></script>

    By default, the functionality of the form is to scroll the page/form up when going to Next page. If the issue still persists, please let us know so we can further investigate.

  • Profile Image
    invortal
    Answered on July 31, 2017 at 10:56 AM

    The problem is, if i remove the ?nojump code it doesn't scroll to the top of the page, it only scrolls to the top of the form

    How can i make it scroll to the absolute top of page?

  • Profile Image
    Chriistian
    Answered on July 31, 2017 at 12:43 PM

    Unfortunately, this is how the iFrame works in general. The <script> embed code creates an iFrame code to display your form. The iFrame is treated as an independent page so it only scrolls on top of its own content. A workaround for this that I can think of is to embed your form using the form source code. In this way, when clicking the Next/Proceed will scroll to the top of the page since the form is part of the page. To get the form source code just follow the instructions provided in this article: How to get the Full Source Code of your Form.

  • Profile Image
    invortal
    Answered on July 31, 2017 at 12:51 PM

    I did try this but then i had the same issue as i had before i added the ?nojump code. How would i adjust the source code so that it starts at the top of the page?

  • Profile Image
    Chriistian
    Answered on July 31, 2017 at 02:23 PM

    Just before the </script> (i.e. closing script tag) of your form's source code, please add this piece of code.

    $('.form-pagebreak-next').on('click',function (){window.scrollTo(0, 0);});

     

    Let us know when it's done so we can check.

  • Profile Image
    invortal
    Answered on August 03, 2017 at 10:09 AM

    That still doesn't seem to work. as you can see in the following url

    https://invortal.com/register2.html

    Also when i use the source code it doesn't have the white bg which is ok but it does have the yellow highlite when i select a field. I can's seem to find how to remove this. Can you please advise me on how to remove this?

  • Profile Image
    Chriistian
    Answered on August 03, 2017 at 11:45 AM

    I am currently checking your page. I will let you know once done.

  • Profile Image
    Chriistian
    Answered on August 03, 2017 at 12:06 PM

    How about changing the line of script I have given above to

    $(document).ready(function () {$('.form-pagebreak-next').on('click',function (){window.scrollTo(0, 0);});});

     

    Regarding the yellow highlight on focus of your field, please inject the following CSS to your form.

     

    .form-line-active input:focus {

       border: 1px solid #CCC;

    }

     

    Once all the changes are done, re-embed the source code of your form.

  • Profile Image
    invortal
    Answered on August 04, 2017 at 02:07 AM

    I have added all of this but it seems to still be the same.

     

  • Profile Image
    invortal
    Answered on August 04, 2017 at 02:10 AM
  • Profile Image
    Chriistian
    Answered on August 04, 2017 at 03:50 AM

    To remove the yellow highlight effect when you select a field, you can disable it on Settings > Form Settings > Show more options > Highlight Effect. 

     

    After saving your form, please don't forget to re-embed the full source code of your form so that it will reflect on your site.