Custom Actions on Form Submit

[learyjk (Keegan Leary - Web Bae)]

Hello,

I want to perform two custom actions on a form submission. the form has two input fields, one for “seed code” and another for “email”.

There are 6 possible seed codes, and I want to collect the email into Mailchimp.

On submit, the following two things should happen:

1. Validate email and submit to Mailchimp.
2. Validate seed code (01, 02, 03, 04, 05, 06) and use that value to redirect to appropriate page e.g. /seed-02, /seed-03, /seed-04 etc.

I have been browsing the forums but haven’t been able to piece together a working solution.

My code at the moment:

<script>
(function clickMe() {
  const seed_submit_button = document.getElementById("seed-submit-button");
  
  seed_submit_button.addEventListener('click', submit);

	function submit() {
  	seed_code_text = document.getElementById("seed-code-text").value;
  	console.log(seed_code_text);
        window.location.replace(window.location.href + "seed-" + seed_code_text);
	}
})();
</script>

My major problem seems to be that the onClick event happens before the form submission in which case the user is redirected to the appropriate page but the email address is not sent to Mailchimp. Is there a way in JS to explicitly trigger the form POST event before I redirect the user?

I tried something like document.getElementById("email-form").submit(); but no luck there.

Thank you!

live site:
https://seed-prototype.webflow.io/

---

Here is my site Read-Only: https://preview.webflow.com/preview/seed-prototype?utm_medium=preview_link&utm_source=designer&utm_content=seed-prototype&preview=a7600e740261acd42d518118e8edadf5&workflow=preview

[learyjk (Keegan Leary - Web Bae)]

I was able to get this working with the help of some code from @samliew

<script>
Webflow.push(function() {
  $('form').submit(function() {
      setTimeout(function() {
      location.href = window.location.href + "seed-" + $('#seed-code-text').val();
    	}, 100);
  });
});
</script>

Last problem I’m having is with error validation. Mailchimp is good at validating email inputs but this code block executes the redirect even if the user inputs a bad email like k@k.com or test@mailinator.com (and it doesn’t push to Mailchimp). If the user inputs a good email address, then Mailchimp does get updated :).

I would like the form to not submit if the user enters a bogus email like test@gmail.com but this code block just continues with the redirect.

I tried a simple try/catch block but it seems the error is just printed to the console. MailChimp error: This email cannot be added to this list. Please enter a different email address. I’m not sure how to structure some custom code that executes “if Webflow/Mailchimp JS infos to the console”. Any ideas how to catch this before the redirect?

I explored the message as best I could and it seems like it’s a console.info call by a Webflow script?? See attached.

Thanks!
Keegan