Jump to content

How to run custom code on form submit error

Go to solution Solved by aandresen,

Recommended Posts

Hi,

I'm looking to be able to run custom code when a form submission fails.

Specifically, I have an iframe of a form that when the user enters an invalid email address the error message that appears causes the contents of the iframe grow larger than the iframe itself and the form becomes truncated. I have a javascript function that resizes it that can be called, but I haven't been able to figure out how to know when the form submission has failed to be able to call it.

The best solution I've found is to just run some code every second that resizes the iframe in case it has changed, but looking for something event based that I can avoid having to do this.

Thanks,

Alex

Screenshot 2022-11-30 203904.png

Screenshot 2022-11-30 203812.png

Link to comment
  • Replies 1
  • Views 164
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

  • Solution

For anyone else reading this, I figured out a way to make this work by continuously looking for the form's error field inside the iframe then calling my function to resize if it's present:

var foundFormError = false;
window.setInterval(
    function() {
        if (!foundFormError) {
            var ctas = document.querySelectorAll(`iframe[id^="cta-iframe"]`);
            ctas.forEach(cta => {
                var iframeContent = document.getElementById(cta.id).contentWindow.document;
                if (iframeContent.getElementsByClassName('field-error').length > 0) {
                    foundFormError = true;
                    // resize here!
                }
            });
        }
    },
    100);

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.