Using Contact Form 7 for WordPress + Webhooks to Post to Lead Prosper

In this article we're going to go over how you can use the free plugin Contact Form 7 in combination with another free plugin - CF7 to Webhook - to post directly from your WordPress form to a Lead Prosper campaign.

To get started you will need to have the following already done:

1. Install Contact Form 7
2. Install CF7 to Webhook
3. A Direct Post campaign in Lead Prosper
4. Supplier API Specs for the above Campaign

Once you have everything above we can get started with configuring your contact form. Assuming you have a contact form already created, what you'll want to do is go and configure your Webhook for that form by going to the admin area of your WordPress site and going to Contact > Contact Forms > YOUR FORM > Webhooks. Go into your Lead Prosper Supplier API Specs and scroll down to the Ingesting Leads area to find the Ingestion URL, which by default should be the following:

https://api.leadprosper.io/ingest

Copy and paste your ingestion URL into the Webhook URL area, and then check the box next to "Send to Webhook" directly above your Webhook URL. Once that is complete the last step for configuring this area will be to add your Customer Headers, which you should set to:

Content-Type: application/json

Hit Save at the top right, and then lets go over to the Form tab.

Here is where you will have your form code set up, and you will need to make sure that the form names match the field names in your Supplier API specs exactly.

A field in Contact Form 7 is configured where you have your form statement inside of two brackets [ ]. The first value in the statement is the "type" - it can be text, email, URL, etc. You can learn more about the different types in the Contact Form 7 documentation. An * next to the type designates whether or not the field will be required. Directly after the type is your field name - this is an internal field name, meaning that it doesn't show on the front end form on your website, however this is very important as this name needs to match the field names in your Supplier API specs.

In the screenshot above I have highlighted first_name to show which value is your field name. You will need to go through your entire form and make sure that all field names match the field names in your Supplier API specs exactly. Once you have confirmed all the field names are correct you are going to need to add 3 or 4 hidden fields with values to the bottom of your form, directly above the Submit button.

Here is an example of the hidden fields that you can use to copy and paste directly into your form, and then swap in your lp_campaign_id, lp_supplier_id, and lp_key (as well as adding or removing lp_action = test when testing your form).

[hidden lp_campaign_id "YOUR_LP_CAMPAIGN_ID"]

[hidden lp_supplier_id "YOUR_LP_SUPPLIER_ID"]

[hidden lp_key "YOUR_LP_KEY"]

[hidden lp_action "test"]

Once those static values have been added to your form, you should be all set and the next form submission should post directly to your Lead Prosper campaign. Use lp_action = test when you are testing your connection, and once you have a successful test and are ready to go live remove the tag. If you want to review the payload that will be sent it is generated for viewing under the Webhook tab in your Contact Form settings - scroll to the bottom and you can view the form data under 'Data sent to Webhook'

Follow the steps above and you should be able to successfully connect your Contact Form 7 forms to Lead Prosper for ingestion!