Scroll to Thank you Message on Form Submit | Community
Skip to main content
M
MoiezMa
Level 3
July 29, 2024
Solved

Scroll to Thank you Message on Form Submit

  • July 29, 2024
  • 2 replies
  • 860 views

My Adaptive Form is embedded on page with AEM Form component. I'm using Thank You Message option to display message on form submit but I have a long form. Upon submit, page doesn't scroll to thank you message. Instead it stay on same spot and it's just white space. How can we fix this? I want page to scroll to thank you message on submit.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kapil_rajoria

Hi @moiezma you can inspect the form and get its id/class and you can do the same for the thank you message. Then you can use a custom js to scroll to the thank you message. Sample code is below:

 

 

const form = document.getElementById('myForm'); const thankYouMessage = document.getElementById('thankYouMessage'); form.addEventListener('submit', (event) => { event.preventDefault(); // Smooth scrolling to thank you message thankYouMessage.scrollIntoView({ behavior: 'smooth' }); });

 

 

 Make sure you put the js code in right clientlib and use console statements to make sure the code is called.

2 replies

rk_pandian
rk_pandian
Level 4
July 29, 2024

Hi @moiezma,

 

If you can read whether form submit is success, you can try to use guideBridge.setFocus() to set the focus on the thank you message.

Hope this helps!

 

Regards,

Ramkumar

    kapil_rajoria
    Community Advisor
    kapil_rajoriaCommunity AdvisorAccepted solution
    Community Advisor
    July 30, 2024

    Hi @moiezma you can inspect the form and get its id/class and you can do the same for the thank you message. Then you can use a custom js to scroll to the thank you message. Sample code is below:

     

     

    const form = document.getElementById('myForm'); const thankYouMessage = document.getElementById('thankYouMessage'); form.addEventListener('submit', (event) => { event.preventDefault(); // Smooth scrolling to thank you message thankYouMessage.scrollIntoView({ behavior: 'smooth' }); });

     

     

     Make sure you put the js code in right clientlib and use console statements to make sure the code is called.

      M
      MoiezMaAuthor
      Level 3
      August 1, 2024

      Thank you @kapil_rajoria I end up implementing a similar solution. I had to put my code in

      DOMContentLoaded event and use jQuery to check if Iframe exist before firing the code also I didn't use event.preventDefault(); to allow form to submit. Thank you for your support. 

       

      document.addEventListener("DOMContentLoaded", (event) => { //Run code once Iframe is loaded $('#aemFormFrame').load(function() { let formIdrame = document.getElementById("aemFormFrame"); if(formIdrame){ const iframeY = window.scrollY + formIdrame.getBoundingClientRect().top - 160 // Y const iframeX = window.scrollX + formIdrame.getBoundingClientRect().left // X formIdrame = formIdrame.contentWindow const formSubmitBtn = formIdrame.document.getElementById("guideContainer-rootPanel-submit___widget"); if(formSubmitBtn){ formSubmitBtn.onclick = function() { window.scrollTo(iframeX,iframeY) }; } } }); });

       

        Terms & ConditionsAccessibility statement

        Loading footer...