Connecting Webflow Forms to Lead Prosper


Webflow is an all-in-one website building platform that combines the benefits of a visual design tool with the flexibility and control of a content management system (CMS). It enables designers, developers, and even beginners to create professional-grade websites that are responsive, customizable, and optimized for various devices.

When setting up your form in Webflow you have different options that allow you to control the action taken when someone fills out the form and hits submit. Webflow makes it super easy to send the form as a POST to a URL, which makes integrating your form with Lead Prosper a breeze.

There are a few things you need in order to connect your form to Lead Prosper:

  1. Add the ingestion URL under Action in the Form Settings.
  2. Correctly label each of your form fields so that they match the field names in your Lead Prosper campaign.
  3. If you have any Multiple Values, One Choice campaign fields in your Lead Prosper campaign, check to ensure that all of the field values for that field on your form is matched to the Choices in your Webflow form Select Field.
  4. Create a HTML Embed Field and place it in your form before the Submit butotn.

ADD THE INGESTION URL

When you are editing your page in Webflow, navigate to your Form element, then click on the Gear icon to the right of the name to expand the Form Settings area. In this area you will paste the Lead Prosper ingestion URL - https://api.leadprosper.io/ingest - into the Action field, and then click on POST under Method to ensure that’s set correctly.

CORRECTLY LABEL AND MAP FIELD NAMES

Next you have to go through each of your field settings in your Webflow form, and confirm that the form field name matches the field you want to map it to in Lead Prosper. For example if you have a field where you are collecting the value for Last Name, then you want to ensure that the field name in Webflow is set to last_name so that it matches exactly what is in the Lead Prosper API specs. The name has to match exactly - including spacing and capitalization. If the field names don't match exactly then they will fail to make it to Lead Prosper.

MULTIPLE VALUES, ONE CHOICE FIELDS

If your Lead Prosper API specs contain a campaign field that is formatted as 'Multiple Values, One Choice' then you need to ensure that the field on your Webflow form allows for multiple selections, and that those selection values are mapped to the allow values for that field. For example - in the screenshot below we have a select field on the left in Webflow that is labeled roof_shade, and in our Lead Prosper API specs on the right hand side you see roof_shade and the Allowed Values. The Webflow Select Field 'Choices' values must match exactly what is in the Allowed Values list, otherwise the value will fail. In Webflow you have the ability to set the Text and the Value for a Choice The 'Text' field can be set to whatever you want to show in your list, the Value field must be set to what is in the Allowed Values list in the API specs. In the screenshot below you can see that in the Choice 'Text' we have A Little Shade, and in the Value its set to "Partial Shade" - as long as the text in the Value field matches what is in the Allowed Values list in the API specs then you shouldn't have any issues.

ADD HIDDEN FIELDS USING A HTML EMBED FIELD

You will need to create a new HTML Embed field for your form. Once that is created, copy and paste the following code into the embed window:

<input name="lp_campaign_id" value="LP_CAMPAIGN_ID" type="hidden">
<input name="lp_supplier_id" value="LP_SUPPLIER_ID" type="hidden">
<input name="lp_key" value="LP_KEY" type="hidden">
<input name="lp_action" value="" type="hidden">

Replace the values LP_CAMPAIGN_ID, LP_SUPPLIER_ID, and LP_KEY with the values that you have in your API specs.

If you are testing your form submits you can add the value "test" .

**If you use the lp_action field make sure to remove the "test" value before sending live traffic**

When you are done adding the embed field you will need to drag it into the form and make sure that it is placed before the Submit button field. Publish, and you should be good to go!

That's pretty much all there is to it. Save your form settings, publish the changes to your page, and then you can begin testing and posting your leads to Lead Prosper. At the time of this article being written Webflow does not have a integrated logging system for Form POSTs, so if you are running into trouble we suggest reaching out to their support to see if they can help troubleshoot it with you.

If you have any questions you can review our Knowledge Base article, check our YouTube channel, or please use the support button or email us at support@leadprosper.io

Still need help? Contact Us Contact Us