Scroll to Thank you Message on Form Submit

Question

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.

kapil_rajoria · Accepted Answer

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.

rk_pandian · Answer

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

Sign up

Login with SSO

Login to the community

Login with SSO