Form Submit Script Code causing Error

Design help Custom code
#1

I have a form on a web page that takes field data entered and creates a URL link with said field data and redirects to Calendly where it populates Calendly form fields. I got the script code idea here. Everything seems to work perfectly, EXCEPT when I fill out the form on a mobile device, I momentarily see the form error message. But after a second or so, it goes ahead and redirects to Calendly and passes the desired field data. So, it WORKS just fine, except for the error message that it shows momentarily.

IT DOES NOT show an error on desktop, which makes it even more confusing.

If I remove the javascript and fill out the form, it doesn’t throw the error (on DT or mobile). It only generates the error when the javascript code is in place.

The shared version URL is listed below. The page that I’m referring to is www.growth-cfo.com/thrive3

Thanks for your help!!

Jay

Here is my site Read-Only: https://preview.webflow.com/preview/growthcfo?utm_medium=preview_link&utm_source=designer&utm_content=growthcfo&preview=065e818774a1088bb50709bcbba5a13b&pageId=5eb81c9d0743560529fb1ba1&mode=preview

#2

HI @jaygar,

You are using a SetTimeout function with a delay of 100 milliseconds, that is why you might see the error message.

Webflow.push(function() {
  $('form').submit(function() {
    setTimeout(function() {
      location.href = 'https://calendly.com/growthcfo/30msession?name=' +
      	$('#name').val() + 
        '&a1=+1 ' + $('#TestField').val() +
        '&email=' + $('#email').val();
    }, 100);
  });
});

What about a simple prevent.default method on form submit and then open the new window with the specified URL, could that work for you:

(function calendy() {
  let getId = document.getElementById,
    form = getId("form"),
    name = getId("name").val(),
    TestField = getId("TestField").val(),
    email = getId("email").val();

  form.addEventListener("submit", (event) => {
    // prevent the default Webflow form action
    event.preventDefault();
    // open new page with specified URL
    location.href = `https://calendly.com/growthcfo/30msession?name=${name}&a1=+1${TestField}&email=${email}`;
  });
})();
1 Like