[How-to] Send Leads to a Third Party Service with a Form Post (i.e. Pardot Forms....)

  • 24 February 2015
  • 17 replies
  • 211 views

Userlevel 3

Hey everyone!

Sometimes the only window third party systems provide to send lead data externally is through an embeddable form. On Unbounce this may not be ideal as using a custom HTML form means you’re not able to take advantage of several Unbounce features (visual form customization, integrations).

To get the best of both worlds you can merge the two together by replicating the form on Unbounce.

Steps

If you haven’t already generate or obtain your third party form code. Make sure it includes every field you wish to capture on your landing page.

Your embeddable form should consist of the raw HTML. There may be a lot of clutter in the code, so you may need to pick through all the junk to get to the important stuff. You’ll want to lookout for the following:

The <form></form> tag. It looks similar to this:

<form action="http//example.com/addlead" method="post">

The <input> tags. They look similar to this:

<input type="text" name="Email_Address"/>
<input type="hidden" name="campaignID"/>

(Your code must contain form and input tags for this to work)

What you’ll need to do is recreate every single input field given in the code as a field on your Unbounce form. Make sure to include any hidden fields as well.

When you recreate those fields be sure you match up it’s ‘name’ attribute. For example if we wanted to recreate the field

<input type="text" name="Email_Address"/>

Then what you need to do on Unbounce is create a new field, set its label, then un-check the ‘Auto-generate from Field Label’ box

Set the ‘Field Name and ID’ to the fields ‘name’. In the example above it’s Email_Address.

Keep in mind that these fields are usually case sensitive. If your casing doesn’t match exactly with your form code, you risk that field or the entire lead from being rejected.

Once all your fields are mapped find the POST url within your tag

<form action="http//example.com/addlead" method="post">

Change your forms confirmation to ‘POST form data to a URL’ and set the value to the same action URL. In the above example it’s:

"http//example.com/addlead"

Now save, publish, and test the live page!

Setting the confirmation/thank you page

Since the form will being doing a post, the user will also be redirected to the posting URL. Unless your posting endpoint doubles up as a confirmation page it may not be ideal.

Be sure to check your third party systems documentation as to how to redirect users to a thank you page after submission. In most cases you can set the URL on their end or define the redirect URL with a hidden field.


17 replies

This is amazing and very welcome! Thanks Johnny. There were a couple times I wanted the Unbounce way of designing the form, except the form being posted somewhere else - but couldn’t figure it out.

Thanks again!

What if your field’s name has a space in it? Unbounce doesn’t seem to allow spaces? It keep replacing the space with an underscore. The space is working fine in our other hooks.

Johnny, do you have a list of known-providers that this may work with? Like WuFoo, 123Forms, etc?

Is it possible to add more information to the post?

Our email service (Silverpop Engage // IBM Marketing Cloud) supports external form posts but the code looks like this: 
_https://sub.example.com/newsletter-subscription" pageId=“12345” siteId=“67890” parentPageId=“12121” >

_ The fields themselves look like this: _id="control\_EMAIL" label="Email" class="textInput defaultText" style="margin: 0 3px 5px 3px; height: 20px; width: 244px;"\>_

How am I able to add all these info and IDs to the  POST form data to a URL?

Thanks
Christian

Userlevel 3
Badge +1

Hey Chris - there isn’t a way to edit the form or field tags directly and form elements aren’t as flexible as other parts of the page when it comes to Javascript, so there isn’t really a way to inject extra data into the form tags using a script.

The method that Johnny presented does utilize both our forms in a way that wasn’t really intended and most 3rd party software doesn’t directly support recreating their form functionality in this way, so there are some things that need to be consistent on the external side for it to work.

Hi Christian,

Quinn, I hope you don’t mind me butting in a little here but this is similar in concept to a project I’m working on right now. I’ve needed to add classes, remove classes and also attributes etc to remove some of the restrictions using the page builder (even though it’s awesome) adds to the manipulation of the final HTML. The methods that I use can be applied in this particular case to achieve what Christian is after.

Just a small sample to get you started… 

Make sure it’s set to run before the body end tag in the script manager, rinse and repeat for all the additions you need to make.

Hope that helps a little, sorry again to butt in 🙂

Cheers

Stuart.

Hi Chris,

Hope you don’t mind me jumping in here Quinn but this is close to something I’ve been working on. With a little JQuery it’s possible to add classes and attributes to the Unbounce form.

Here’s an example

Just make sure it’s set to run before the body closing tag on the page from your script manager.

Hope that helps ping me a message if your not sure and I’m sure I could explain a little more. 

Cheers

Stuart.

Thanks Stuart! I will try that.

Did  you get this working? I’m trying to do exactly the same thing, posting Unbounce form data to Silverpop.

Thanks!

It appears that both Unbounce and Silverpop require different pageId values. How did you get around this?

I wasn’t able to get it working… Unfortunately Silverpop is not as flexible and easy as Unbounce 😕

I managed to get it working without any workaround. Just be sure to have your Silverpop Landing Page published and include sp_exp = Yes hidden field and use the name value as field ID in Inbounce.

Hello! I just wanted to ask if anyone tried this with the basic pardot account as opposed to plus or advanced. I’m having some trouble trying to integreate unbounce and pardot (without extra costs). Ideally, I want the form on unbounce to directly go to Pardot (we have no API access if not I would use Zapier etc.)

Please help!

Thanks for sharing! We used both zapier and webhooks for our landing page: https://www.cien.ai/hidden-revenue/ - I think it depends on your IT skills/resources. Zapier was easier but webhooks are more flexible.

I know this is older topic, but we have Pardot and are considering unbounce as Landing page builder.
I have a test account and I am happy with the landing page capabilities, but not the connection to Pardot.
We don’t use Zappier, so that isn’t a solution for us right now.

Has anyone gotten webhooks to work with Pardot form handlers. If you have, does anyone have step by step guide.

I know I can use the Post to URL feature in the Unbounce form, but then I lose the other form completion features, like nice thank you message.

I am aware I can use a thank you page redirect from Pardot’s Form handlers, but it is 3 main issues I see

  1. You leave the landing page

  2. You use up allowed published Unbounce pages (we are large corporation and have many people sharing this account in many differnt languages). If everyone is creating 5 or more thank you messages, it will be waste of pages used at Unbounce).

  3. If I create the thankyou page in Pardot, it is even worse. I need to use Pardot for landing pages :), and the user will be sent to a different domain (even worse)

So my ideal solution would be getting Webhooks to send data to Pardot, so I can also show a nice Than you message after the form is sent. So either a step by step guide on this, or a guide to somehow show a thankyou message on the same landing page and use Post to URL at the same time

Userlevel 7
Badge +3

Hey @Scott_EISENBERG,

It’s been a few years since we’ve integrated an Unbounce form through a Pardot form handler for a client. However, you should be able to send a webhook with the form’s data to the endpoint.

Fields need to be properly mapped, case sensitive and all that.

If you don’t want to use Zapier, your only other option is to introduce a backend script that would get the webhook POST from Unbounce, authenticate with Pardot’s API and post the data.

Best,
Hristian

Hey Hristian,
Here is a quote from Unbounce support “unfortunately, Pardot needs a Post action and our webhooks send data via JSON or XML.”

I have tried unsuccessfully to use webhooks - everything is mapped correctly.

But I do get the Unbounce Form Confirmation setting to send data to Pardot "Post form data to a url"

I really don’t care if it is webhooks or some other way, but I would like to be able to do 2 things

  1. send the data successfully to Pardot
  2. show a confirmation message after form is sent, without having to leave the page they are on

That script you shared seems way too complicated.

Would something like this work.
Create a custom script / custom CSS on the page that hides some sort of overlay message
When the form is sent, have Pardot form handler redirect the visitor to the same landing page, but witha change in the url, whcih would someone Show the overlay message

https://domain.com/ThisIsMyLandingPage

redirect after form filled to something like
https://domain.com/ThisIsMyLandingPage#formcomplete (or anything else like that)

/Scott

Reply