How can I make my new ConvertKit form in Webflow behave like my old Mailchimp form, showing the Success/Error messages instead of a JSON response?

You're seeing a JSON response from your ConvertKit form because it returns data in JSON format by default. To mimic the Success/Error behavior of your old Mailchimp form in Webflow, you’ll need to intercept the form submission using custom JavaScript and control the success/error messaging manually.

1. Embed Your ConvertKit Form Using a Custom Action

• In Webflow, create a native Webflow form (don’t use ConvertKit’s embed code directly).
• Set the Form Action URL to your ConvertKit form's endpoint. You can find this in ConvertKit under Grow > Landing Pages & Forms > Settings > Embed > HTML.
• The action URL typically looks like: https://api.convertkit.com/forms/YOUR_FORM_ID/subscriptions.
• Set the Form Method to POST.

2. Prevent Default Webflow Behavior

• Webflow tries to manage the form submission on its own, but ConvertKit returns JSON, not a redirect or 200 OK page.
• You need to suppress the default submission behavior and handle it via JavaScript.

3. Add Custom JavaScript to Handle the Submit Event

• Go to your Page Settings > Before tag and add the following JavaScript (adapted for current Webflow standards):

<script>  document.addEventListener('DOMContentLoaded', function () {    const form = document.querySelector('form');    if (form) {      form.addEventListener('submit', async function (e) {        e.preventDefault();        const formData = new FormData(form);        const data = new URLSearchParams(formData);        try {          const response = await fetch(form.action, {            method: 'POST',            body: data,            headers: {              'Accept': 'application/json'            }          });          const result = await response.json();          if (response.ok) {            // Replace with your Webflow success message handling            document.querySelector('.w-form-done').style.display = 'block';            document.querySelector('.w-form-fail').style.display = 'none';            form.style.display = 'none';          } else {            // Show error            document.querySelector('.w-form-fail').style.display = 'block';          }        } catch (error) {          document.querySelector('.w-form-fail').style.display = 'block';        }      });    }  });</script>

• Note: This approach uses Webflow’s .w-form-done and .w-form-fail classes to trigger their styling and behavior.

4. Ensure Form Structure Matches Expectations

• Keep your input field name attributes matching ConvertKit’s expected field IDs:
• Usually: email and optionally first_name
• These should match the parameter names in the ConvertKit API.

5. Test Everything Thoroughly

• Test both a successful and failed submission.
• Confirm that the appropriate success or error message is shown instead of a JSON response.

Summary

To make ConvertKit forms in Webflow behave like your old Mailchimp forms, use a native Webflow form, override the default submission behavior with JavaScript, and manually display Webflow's success/error messages based on ConvertKit's JSON response.