Prevent redirect after form submit

I have a form in webflow with a custom action parameter to sign people up to my list in Mailchimp. On submit, I show the Success/Error Messages provided by webflow. This works great.
image

The problem is that I’ve changed to ConvertKit. I’ve updated the action URL and the inputs, but now when I submit, instead of showing the Success/Error messages, I receive a JSON response and the browser renders it instead of remaining on the current page.

Is there something I can do to get the new form to behave like the old one?

2 Likes

+1, looking to get this fixed on my site as well!

I ended up adding this script to my page before the </body> tag and it worked. To do it, go to Pages | Click the gear icon next to your current page | scroll down until you see the Custom code section.

1 Like

Did anyone managed to fix this issue? I tried the code that @nachocab posted but it didn’t work :frowning:

The key is ensure that the id that you give your form matches what you put here $("#formID")

Anyway, I stopped using this approach because I ended up getting flooded with spam signups. If you do this, make sure you’re using recaptcha.

Is there an other solution to this? The script isn’t working for me (I get a form error message after submit)

Hey! I was looking at this for submitting a POST action to Zapier, and for anyone else looking for a solution, I realized I was getting this error message in the console:

Access to XMLHttpRequest at ‘https://hooks.zapier.com/hooks/catch/14154165/bveainc/’ from origin ‘https://lo-harris.webflow.io’ has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Based on that, I realized that the part of the custom code that limits the data type was the issue. So deleting this line in the aforementioned code corrected the form error for me:

contentType: “application/json”

Cheers!

1 Like

I’m still looking for a solution to this. I’m now using an alternative to Mailchimp (Brevo) and suddenly I can’t show the success state after submitting a form.

Is there a way to do this without custom code? If not, I’m happy to try alternative solutions with code. (The code earlier in this thread doesn’t seem to work).

I am also using ConvertKit and I had to add custom JavaScript to prevent the redirect to its JSON response:

  const subscribe = document.querySelector('#subscribe-form');
  subscribe?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const resp = await fetch(subscribe.action, { method: 'POST', body: formData });
    if (resp.status === 200) {
      // Do something custom
      document.querySelector('#thankyou')?.classList.remove('hidden');
      document.querySelector('#input')?.classList.add('hidden');
    }
  });

The form itself is embedded like this:

<form
  id="subscribe-form"
  class="text-center mt-10 flex flex-col"
  action="https://api.convertkit.com/v3/forms/YOURID/subscribe"
  method="post"
>
 <!-- input elements, etc. -->
</form>

Hope it helps you!

Best,
Benny