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?

Getting your ConvertKit form in Webflow to show Success/Error messages instead of a JSON response involves a few steps to ensure a smooth transition from Mailchimp.

​

1. Integrate ConvertKit Form

• Sign in to ConvertKit and navigate to the "Forms" section.
• Create a new form or select an existing one.
• Copy the Embed Code provided by ConvertKit for the form.

​

2. Embed ConvertKit Form in Webflow

• Open your Webflow project and go to the desired page.
• Add an Embed element using the Add panel (press "A" or drag it from the elements panel).
• Paste the ConvertKit Embed Code into the Embed element area.

​

3. Modify Form to Display Messages

• ConvertKit forms by default return JSON responses, which need handling in Webflow.
• Use custom JavaScript to listen for form submission events and display messages.
• Insert the JavaScript code below your form’s embed code in the same Embed element:
• This script can check for a success or error and dynamically insert HTML to display the corresponding message.
• The script should replace the JSON response with a more user-friendly message.

​

4. Styling the Messages

• Use CSS classes to style the success and error messages.
• Go back to the Designer and apply styles to the classes used by your JavaScript code for message display.

​

5. Test Your Form

• Publish your site in Webflow.
• Test the form submission to ensure that the success and error messages display as intended.
• Check both on desktop and mobile to confirm responsiveness.

​

Summary

To show Success/Error messages instead of a JSON response with your ConvertKit form in Webflow, you need to integrate the form via an Embed element and use custom JavaScript to handle the responses. Style your messages using CSS for a complete solution.