Embedded form does not scroll back to top when submitted

Chris LaVigne

• October 01, 2018 15:48

I have embedded the gift card purchase form on our website for testing. When the form is submitted by clicking the "Review order" button, the page remains scrolled down to the scroll position of the "Review order" button. But the iframe containing the form is now reduced to just the order review info and PayPal button, so the iframe is full of empty space underneath.

The result is that after clicking "Review order", the page appears to show nothing to the customer. See screenshots. The customer has to scroll up to find the order information and the PayPal button

 

Screenshot of the Review order button location:

 

Screenshot of when the button is clicked and what the customer sees:

0

• 

  Vincent Labreche

  • October 01, 2018 16:33

  Hi,

  To successfully embed our cardholder portal in Wordpress, you will have to include our provided HTML tags directly in the 'raw' html of your own page rather than use the Wordpress iframing tool.

   

  The code should look like this:

  <div>
    <!--[if lte IE 8]>
    <script type="text/javascript" src="https://static.ackroo.com/iframe/ie8.polyfils.min.js"></script>
    <![endif]-->
    <script>var ackrooWlp="https://ppstestportal.ackroo.net/"</script>
    <script src="https://static.ackroo.com/iframe/iframeResizer.v2.min.js"></script>
    <style>iframe{width:100%;border:0}</style>
    <iframe src="https://ppstestportal.ackroo.net/en/gifts/new?iframe=true" scrolling="no" onload="iFrameResize([{checkOrigin:false,log:false}])"></iframe>
  </div>

  While it does look overcomplicated, it adds a little javascript called the "iframeResizer" which allows for dynamic resizing of the iframe.

  If that is actually what has been done, but a problem persist, could you publish it on some page and give us the link to take a look?

  0
• 

  Chris LaVigne

  • October 02, 2018 03:06

  Thank you for your reply. The code you presented is the same code as we are using on our development site.

  I have placed this code on a private page of our website for you to view. The page is slightly different, but the result is the same that the form does not scroll back up when submitted. The behaviour occurs in both Firefox and Chrome.

  https://pizzeriaprimastrada.com/2018/10/02/gift-card-test/

  password to access is:

  ackroo

  0
• 

  Vincent Labreche

  • October 02, 2018 10:43

  Hi,

  I see what you meant. There seems to be a few methodologies usable to automatically scroll the hosting page back up after a submission.

  We will need to run tests and see how best to solve for this.

   

  While I can't promise a specific ETA, I will keep you informed as to when we have a solution in place.

  0
• 

  Chris LaVigne

  • October 02, 2018 11:11

  Thanks very much, we appreciate it!

  0

Please sign in to leave a comment.