[How-to] Send Leads to a Third Party Service with a Form Post


#1

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.


How to use Pardot form handlers on Unbounce
How to use Pardot form handlers on Unbounce
The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

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!


#4

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.


Send leads to 100+ different salespeople based on location criteria
#5

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


#6

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


#7

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.


#8

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 :slight_smile:

Cheers

Stuart.


#9

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.


#10

Thanks Stuart! I will try that.


#11

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

Thanks!


#12

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


#13

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


#14

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.