Scroll to Thank you Message on Form Submit

[MoiezMa]

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.

[rk_pandian]

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 · Accepted solution]

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.

[MoiezMa]

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)
                        };
                    }
                }
            });
        });