Using a Webhook

Can I send Unbounce Form Data to a Script or Custom Code?

Yes. You can use our webhook feature to send the data from your form to any custom page or script you like. This page can perform integration tasks to transform, parse, manipulate and send your lead data to wherever you choose.

Read the webhook article below to learn how.


What's a WebHook?

A WebHook is just a push notification from our server to yours. The Form Submit WebHook lets you setup a push notification to your server every time someone submits a form on one of your Unbounce pages.


What Can You Do With a WebHook?

WebHooks make it easier to integrate two systems. The most common use for our Form Submit WebHook is to feed leads into your CRM. But there are lots of other things you could do as well, such as sending yourself an email or plotting addresses on Google Earth.


What Do You Need?

The very nature of a WebHook assumes that you have some ability to write code (or bribe a friend or colleague who does). You need to have a server that can accept a POST request (like what you’d get from a form submission), and be able to write a script that does something in response.


Step 1: Configure the WebHook

To connect your lead-gen form to your server, visit the “Lead-Gen Form Results” area on your landing page overview screen (below the A/B Test Centre) and click the Configure WebHook link. If you just want to test it out, you can use a PostBin URL (from www.postbin.org) as a place to temporarily send your form data and examine the data format.


Step 2: Write code to accept your form data

Every time someone makes a new form submission on your page, Unbounce will send the following data to your selected URL.

Note:

  • We include the submitter's IP address with the data.json object
Parameter Description
data.json

The submitted form data in JSON format. For example:

{
  "full_name": ["Steve Jobs"],
  "email_address": ["steve@apple.com"],
  "earnings": ["More than you can possibly imagine"],
  "what_would_you_like_our_product_to_do?": ["Dice", "Julienne Fries"],
  "how_did_you_hear_about_us?": ["Can't Remember"],
  "ip_address": "238.17.159.4"
}
data.xml

The submitted form data in XML format. For example:

<?xml version='1.0'?>
<form_data>
  <full_name>Steve Jobs</full_name>
  <email_address>steve@apple.com</email_address>
  <earnings>More than you can possibly imagine</earnings>
  <what_would_you_like_our_product_to_do?>
    <entry>Dice</entry>
    <entry>Julienne Fries</entry>
  </what_would_you_like_our_product_to_do?>
  <how_did_you_hear_about_us?>Can't Remember</how_did_you_hear_about_us?>
  <ip_address>238.17.159.4</ip_address>
</form_data>
page_id The identifier Unbounce uses to uniquely identify your page. Eventually you’ll be able to use this with our API to manipulate and get information about your page. This is a 36-character UUID, for example, “a2838d98-4cf4-11df-a3fd-00163e372d58″.
page_name The name you gave your page, for example “My Guaranteed to Convert Landing Page”.
page_url The URL of the page that contains your form.
variant This identifies the page variant that the visitor saw when they visited your page, and will be a lower-case letter. The first variant is “a”, the next, “b”, and so on. If you have more than 26 variants the sequence will continue with “aa”, “ab”, etc.

* Be sure to return a 200 response to ensure our webhook sees the post as successful.


Multiple Webhooks and the New "View Leads" Look (Both now in Labs)

Due to the technical nature of this Labs feature, once enabled, Multiple Webhooks & New Leads View cannot be disabled. Please contact our Customer Support team at support@unbounce.com if you have any questions.
As of January 2017, you can copy over Webhooks along with their fieldmapping when duplicating a page.

You can now create, configure, and manage more than one Webhook in Unbounce. This means any leads captured on your Unbounce page can be sent off to multiple custom integrations (including Zapier!).

We’ve also updated the way you view your leads in the Unbounce app - you’ll see the integration details for each lead, and if there are any errors with your webhook submission or other integrations, it’ll be easier to get ‘em fixed.

Cool, right? Here's how to do it:

Enabling Multiple Webhooks

  1. In the main sidebar, click "Settings" and select "Labs Features". Select "Enable Multiple Webhooks & New Look for View Leads" and click "Update Settings".
  2. You'll now see two new buttons in your Page Overview screen: "View Leads (Beta)" and "Webhook: POST to URL (Beta)".

Configuring Multiple Webhooks

  1. In the Page Overview screen, click "Webhook: POST to URL".

  2. If you have not added a Webhooks before, skip this step. If you have added one or more Webhooks in the past, click “+Add Webhook”.

  3. Enter the URL you'd like your data to be posted to.
  4. Select "2. Configure Field Mapping".
  5. Configure your Field Mapping and click "Done".

  6. Wait a moment (or grab a coffee, depending on your Internet connection speed) while we add your Webhook.

  7. If all is well, click "Close".

  8. If you see an error, click “View Details” to resolve the issue.

  9. Verify that the URL is correct and if so, click “Resubmit” to re-send the URL. If not, click “<Back”, return to Step 2.

  10. You're all set!

New "View Leads" Look

  1. Under “Leads”, you’ll see the new, beta “View Leads” button.

    Old View:

    New View:
  2. Click the “Lead and Integration Details” button to the right of a lead to view the details in the right sidebar.

  3. In this details screen you can also view any form integration errors:

  4. Click the down arrows to view further details on any integration errors.


URL Parameter Replacement

There's also a handy feature you can use to do some simple customization of the URL you're posting to. You can pass data from your form into parameters in the URL the webhook posts to. This is useful for doing simple mapping of form field names to field names expected by the target script.

Let's say you had a form with a "name" field in it, and you wanted to pass this along as a "customer_name" field. You could specify your webhook's "URL for POST" as follows:

myamazingcompany.com/?customer_name=(name)

When a form is submitted, we'll replace the "(name)" token with the value of the name field from the form. You can add as many parameters as you like, just be aware that some servers have a limit for how long the query string can be.


Sample PHP Script


Security

Our webhooks will be posted to your servers using known IP addresses (either 54.241.34.25 or 50.19.99.184). You can optionally update your firewall rules to limit posts to your servers from these addresses.


Glossary

WebHook: a push notification from our server to yours.

Form Submit WebHook: lets you setup a push notification to your server every time someone submits a form on one of your Unbounce pages.

Most common use of WebHook: to feed leads into your CRM.

PostBin URL: a place to temporarily send your form data

 

Back to: Integrations >>

Powered by Zendesk