Prevent redirect after form submit

Design help Custom code
1

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
2

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

3

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
4

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

5

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.

6

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

7

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
8

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).

9

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

10

For anyone looking at this in the future - I’ve made this solution that really easily allows you to send form data wherever you want, without messing with the front-end side of Webflow’s form behavior.

Just add the one script, and an attribute to your form, and you’re good to go!

Here’s the video tutorial & code.

Hope this helps!!