Send Contact Form 7 data to Convertkit

This guide will show you how you can send your Contact Form 7 Data to ConvertKit without using any additional plugins.

Prerequisites:

• Basic knowledge of how to edit JavaScript code
• Contact Form 7 installed
• A ConvertKit form

The following JavaScript code snippet will send Contact form 7 data to ConvertKit:

Explanation of the snippet:

• wpcf7mailsent event is used which triggers the code when the form is actually submitted and sent. (Reference: https://contactform7.com/dom-events/)
• '12345' == event.detail.contactFormId allows you to target by specific form in Contact Form 7. Be sure to replace 12345 with your Contact Form 7 ID. You can locate it from the shortcode:

• jQuery.post() is used to send the data to ConvertKit form URL: https://app.ConvertKit.com/forms/12345/subscriptions – You need to replace 12345 with your ConvertKit form ID. You can locate it on the browser URL while editing the form in ConvertKit portal:

• ConvertKit first name field is mapped with the first input field in Contact Form 7 (first_name: inputs[0]) [0] indicates first field, [1] indicates second and so on.
• window.location.href is used to redirect users to thank you page URL after successful submission. You can omit the line if you do not wish to redirect users.

How to Implement the Code Snippet?

You can install and activate a plugin like Code Snippets and add this snippet globally on all pages or where your Contact Form lives.

Or you can use it on a single page via HTML block in Gutenberg.

Want us to implement this on your site? Contact us to get started →