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?
TL;DR
- Use Webflow’s native form instead of embedding ConvertKit’s form.
- Get the ConvertKit form action URL from the HTML embed code.
- Set up the Webflow form with matching fields, paste the action URL, and set the method to POST.
- Configure ConvertKit to redirect to a Webflow Thank You page instead of showing a JSON response.
- Test submission to ensure redirects work and no JSON response appears.
If your new ConvertKit form in Webflow is returning a JSON response instead of displaying success/error messages, this is likely due to how the form submission is processed. Here's how to fix this:
1. Use Webflow's Built-In Form Handling
- ConvertKit forms don't integrate natively like Webflow's own form system.
- Instead of embedding ConvertKit’s default form, use Webflow’s native form element and connect it to ConvertKit using a custom action URL.
2. Get the ConvertKit Form Action URL
- In ConvertKit, navigate to Grow > Landing Pages & Forms and choose your form.
- Click on "Embed", then go to the HTML tab.
- Find the
<form>tag and copy the action URL (it will look something likehttps://api.convertkit.com/v3/forms/XXXXXX/subscribe).
3. Set Up the Webflow Form
- In Webflow, add a Form Block and customize the fields to match the ones in ConvertKit (e.g., email, name).
- Select the Form element, then go to the Form Settings (gear icon) in the right-side panel.
- In the Action field, paste the ConvertKit form’s action URL.
- Change the Method to POST.
4. Prevent JSON Response & Show Success/Error Messages
Webflow naturally expects HTML-based responses for handling submission messages. Since ConvertKit returns JSON, you'll need to use a custom redirect:
- In ConvertKit, go to your form's Settings > General.
- Under "What happens after subscribers opt in?," select Redirect to another page instead of showing a default confirmation message.
- Enter the URL of a Webflow Thank You page (e.g.,
yourwebsite.com/thanks). - Create a corresponding /thanks page in Webflow to show users a success message.
- This prevents the JSON response from showing and improves the user experience.
5. Test Your Form
- Publish your Webflow site and fill out the form with test data.
- Ensure that users are redirected to your Thank You page instead of encountering JSON output.
- If errors still appear, check ConvertKit’s dashboard to confirm submissions.
Summary
To prevent a JSON response and display proper success/error messages in Webflow, use the Webflow form element, set the ConvertKit action URL, and configure a redirect to a thank-you page instead of relying on the default ConvertKit response.