Unbounce Answers/Getting Started with Unbounce/Unbounce User Guide

04 Forms and Form Data

Jason Murphy
posted this on November 26, 2010 01:54 pm

Many of the pre-designed Unbounce templates include forms. These forms have been built using the Unbounce form builder and can be modified, moved or removed from any page.

Unbounce forms are great for basic lead generation purposes, however some people prefer or need to use forms with more complex functionality built using third party tools; Unbounce will accommodate these as well as custom HTML components.



4.01 Using the Unbounce Form Builder

 If you are starting with a page template that does not already have a form on it, or a blank page:

  1. Drag the Form widget from the objects palette on the left side of the editor onto your page: 

    form.png

  2. This will open the Design Your Form dialog where you can then customize your form: 
design_form_detail.png

 

If you are starting with a page template that includes a form, you can access the ‘Design Your Form’ window by double clicking on the form fields. If your page does not have a form yet, you will first need to click on the 'Form' button to create a form, which will trigger the 'Design Your Form' window to come up.

The ‘Design Your Form’ window is split into three sections. The left section allows you to add new components (fields, menus, checkboxes and radio buttons) to your form. The middle section allows you to select the components you have included in your form so that you can change their order or delete them. The section on the right allows you to edit the specific attributes of the form component that you have selected within the middle section of the window. A few things you may want to know about the 'Design Your Form' window:

  1. Text fields can be created as a single or multi-line field. Specify the height of a multi-line text box by selecting the component in the middle section of the ‘Design Your Form’ window and using the controls that appear in the section to the right.
  2. In the section to the right, you can access the ‘Field Label’ control for each of the components to give it a unique name. Each component must have a unique name in order for the form to work. You can hide the name of the field from the visitor to your page by selecting the ‘Hide Label’ checkbox.
  3. You can have as many or as few checkboxes as you like, and the same goes for radio buttons. Alternatively, you can create your own custom pull-down menu and/or select from a range of pre-defined choices (including location, demographic and calendar based choices.) Pre defined fields include ‘Email’, ‘Name’, ‘Phone Number’, and ‘Age.'
  4. To add a hidden field (to allow the inclusion of default form data,) just click on ‘Hidden Field’ on the left hand side of the ‘Design Your Form’ window and add the ‘Default Value’ in the form field on the right.
  5. Once you have designed your form, click ‘Done’ to resume editing the page.
     

The form data from your published page will be stored by Unbounce and made available for you to access in a variety of ways.
The options are as follows:

  • View leads in the Unbounce interface

  • Download a .csv spreadsheet of your leads

  • Post data to other systems using a webhook

  • Have each lead emailed to you as they come in

  • Have leads forwarded automatically to your Mailchimp, Campaign Monitor, Salesforce, HubSpot, AWeber, Constant Contact, ActiveCampaign, and Speak2Leads accounts.

You can access any of these methods via the ‘Leads & Form Integrations’ area in the bottom right of the Page Overview screen for your page.

 

Screen_shot_2012-08-27_at_2.46.20_PM.png



4.02 Form Confirmation and Document Download

If you are using an Unbounce form on your page, you can choose what your visitor sees when then submit the form. You can set things up so the visitor will see a custom form confirmation dialog box, a generic bowser message or an entirely new page. You can even allow your visitors to download a document you have provided for them.

 


4.02.01 Custom Confirmation Dialog Box and Document Download Button

By default, visitors are presented with a form confirmation dialog after they submit your page's form.  You can customize this dialog and add a download button for ebooks, whitepapers and other documents.  

To customize the form confirmation dialog: 

  1. Select your form in the editor--you should see a bounding box surround the form fields as shown in the screenshot below
  2. Select Show form Confirmation Dialog from the Confirmation menu 
  3. Click Edit Confirmation Dialog or click the Form Confirmation Dialog tab at the top left of the editor to start editing your confirmation dialog box.
  4. You can then edit the form confirmation dialog using all the same tools used to edit your main page

edit-form-confirmation-dlalog.png 

 

You can also use the form confirmation dialog to enable file downloads for eBooks, white papers and other documents.  See File Downloads (eBook, White paper) From Your Lead Gen Forms [VIDEO] for information on setting this up.



4.02.02 Generic Browser Message

To ensure that a visitor will see a conventional browser message letting them know their form submission has worked:  

  1. Select the form fields in the editor and make sure that ‘Show alert message ’ is selected in the pull down menu in the ‘Form Confirmation’ area of the ‘Properties’ tab on the right of your screen.
  2. You can edit the text that will appear in the alert message via the ‘Message Text’ field.


4.02.03 Link to Another Page on Form Completion

Instead of using Unbounce's form confirmation dialog, you can forward your visitors to any web page you like after they sub your page's form.  To do this:

 

  1. Select your form in the Unbounce editor.  The Properties Pane will then display contextual options for your form.
  2. In the Properties Pane, find the section Form Confirmation, open the drop down menu and choose Go to Another Web Page
  3. Input the URL for your destination page in the URL field

go-to-another-webpage.png

4.02.04 Append Form Values to Outbound Link URLs

Enable this feature if you are using a multi-step form or if you want to pass the data from your Unbounce form to another page after the form has been submitted.

To do this:

  1. Select your form in the Unbounce editor.  The Properties Pane will then display contextual options for you form.
  2. Enable Append form data to URL

append_form_data.png

Your form data will then be passed on to the next page as GET (query) parameters in the URL.

4.03 Using 3rd Party Forms

If the Unbounce form builder does not provide all the functionality that you need in your forms, you can ‘embed’ a form that you have made yourself or created in a third party system such as Wufoo ( www.wufoo.com ). You can also embed forms from third party tools that provide specific forms as part of their service; The forms created by email list manager Aweber is a good example of this.

To embed a third party form in your page: 

  1. Find out from your third party provider where you can find the code snippet that you want to embed into your Unbounce page, copy the code and go into your page in the Unbounce page editor. 
  2. Embed the code in the same way you would embed any custom component. You can find step-by-step instructions for embedding here: http://unbounce.zendesk.com/entries/307800

A placeholder box will appear on your page in the editor to indicate where your embedded form will appear. Drag the placeholder and its handles until it is the right size and in the desired position for your form.

The data collected by your third party form in your published page will not be stored by Unbounce; if the form is working correctly it should be forwarded to the third party system that is providing the form.

A third party form cannot be set as a conversion goal for your page - this means that third party form submissions will not automatically be tracked as a conversions in your account.  The good news is that you can manually set up external conversion tracking to achieve this functionality. 



4.04 Form Integrations

 You can get find detailed information on the integration options available to you the Integrations Section of Unbounce Answers

 

Comments

User photo
Timothy Denbo

Very good, clear instructions.  Great job!

March 23, 2011 08:19 am
User photo
Jeff Weiss

Link to mail chimp integration is broken,

April 24, 2011 07:56 pm
User photo
Steven Hua

If I embed a 3rd-party form on an Unbounce landing page, can I use external conversion tracking scripts (http://support.unbounce.com/entries/334187-external-conversion-tracking) to count conversions?

What I'm thinking is that if I put the external conversion tracking script on the "thank you" page that the user is sent to when he/she clicks the form submit button, then Unbounce will be able to count conversions by counting every time a user lands on the "thank you" page.

Is my thinking correct here, or am I missing/overlooking something?

Thanks!

August 12, 2011 03:08 pm
User photo
Ryan Engley
Unbounce

Hi Steven - you are exactly right.  You can embed a 3rd party form and direct your visitors to a separate thank you page.  When you embed the Unbounce external tracking script on the thank you page, we count the conversion toward the most recently visited Unbounce page (usually this is the page that directed them to the thank you page).

Hope that helps answer your question - if not, just send me a message to support@unbounce.com and I will continue to investigate

August 12, 2011 03:50 pm
User photo
Sandra Nevarez

Is there a way to insert multiple forms on a landing page? 

January 27, 2012 12:13 pm
User photo
Ryan Engley
Unbounce

Hello Sandra - As it stands, an Unbounce form can only be included on a page once.  If you need to include a form multiple times, you may want to look at embedding a third party form as mentioned above.

February 29, 2012 03:56 pm
User photo
Bruce McCarthy

I want to include a different form at the bottom of my landing page asking for comments from people who *don't* sign up. The form button is disabled, though, I assume because I already have an email entry form on the page. Is there no way to have two separate forms on a page?

April 22, 2012 02:06 pm
User photo
Ryan Engley
Unbounce

Hi Bruce - your assumption is correct.  You can only embed a single Unbounce form on your landing page.  To include a form multiple times you'd have to use a third party form such as WuFoo.  If you'd like to request the ability to add multiple forms to a page, you may want to share your idea in our community forum at https://getsatisfaction.com/unbounce to help your request gain traction.

April 22, 2012 07:27 pm
User photo
Jason Brock

Is there a way to edit the built-in form's layout without using an embedded form -- i.e.: option fields next to one another vs. a line break after each one?

May 03, 2012 08:22 am
User photo
Ryan Engley
Unbounce

Hi Jason - that could be possible with some CSS wizardy but is otherwise not a feature we have built into Unbounce.  If you have any specific ideas about the kinds of form editing options you'd like to see, we'd love for you to share them with us in our feature request forum.

May 08, 2012 01:58 pm
User photo
Sébastien Monnier

Hello,

How change the alert message in the form ? For instance, when the name and email is required, the window comes and says : "Name is required". I would translate this sentence in French. 

May 09, 2012 02:01 am
User photo
Ryan Engley
Unbounce

Salut Sébastien! We have a post in our community forum that outlines how to customize the form error message.  Just be sure to use the newer of the two scripts on that page.

May 09, 2012 10:41 am
User photo
Michael McEuen

Is there anyway using radio buttons to send leads to 2 different constant contact lists?

ex: location 1, location 2 radio buttons.

The lead selects location 2 in the form fill so the email would be added to location 2's constant contact list.

Thanks.

June 18, 2012 10:56 am
User photo
Ryan Engley
Unbounce

Hi Micheal - unfortunately not.  It may be possible to achieve that kind of functionality using a third party service but for now it is not possible in Unbounce.

July 23, 2012 06:21 pm
User photo
Mike Gillerman

Is there a way to turn off the button that comes with the form? I'd like to use a different CTA button and I don't have a clue how to html a form

Thanks

August 14, 2012 11:47 pm
User photo
Ryan Engley
Unbounce

Hi Mike - the form must have a button associated with it.  However, it's completely customizable in terms of size, colour, graphic etc. If you need.  You can see how to customize buttons in more detail in the Page Editing Basics section of the User Guide.

August 15, 2012 08:54 am
User photo
Pawel Kalinowski

Hi,


I would like to know how to modify the error message (required field validation). It is possible to have a custom submission message but I do not see any way to modify error messages, which is a bit strange.

Thanks,

Pawel

September 01, 2012 08:48 am
User photo
Jacquelyn Ma
Unbounce

Hi Pawel - you can customize the error message using some custom javascript. 

Here is an example of how you can customize the error messages for forms. The following code needs to be modified to reflect the field names of your form and the error messages you require. It then needs to be placed in the page by clicking on the "Scripts" button in the toolbar. Paste it into the dialog box and choice "Head" in the drop down menu named "Placement". The field names are visible in the form editor just below the text input box for "Field Label".

<script type="text/javascript">
var d = window.module.lp.form.data; 
/* Change the main error message title */ 
jQuery(document).ready(function() { 
jQuery('#'+d.errorContainerId).find('h3').text( 
"Please correct the following errors:"
); 
}); 
/* Change the individual error messages */ 
d.validationMessages = { "first_name": { 
required: "First name is required" 
}, 
"last_name": { 
required: "Last name is required" 
}, 
"email": { 
required: "Email is required", 
email: "Please enter a valid email address" 

}; 
</script>

I hope this gets you moving the right direction!

September 03, 2012 01:14 pm
User photo
Jonathan Drake

I would like to redirect based on the answer in the dropdown.

As an example...

When they chose option 1 they go to a page/url  of /1

and if 2 they would be redirected to /2

Is this possible?


Thanks

Jonathan

October 19, 2012 11:20 pm
User photo
Jacquelyn Ma
Unbounce

Hi Jonathan - unfortunately right now the forms cannot be set so that the redirected URL changes depending on the user's selection. But if this is feature you'd like us to consider in the future, you may want to post this in our Feature Request Forum at https://getsatisfaction.com/unbounce/ideas/popular. Here your request can gain traction through community input and voting to provide our Development team valuable feedback for future changes to Unbounce. Our team frequently visits this forum to consider functionality changes and feature requests from our online community.

October 22, 2012 12:43 pm
User photo
David Schrodetzki

Hey there!  I've creating a Landing Page (I'm a novice with UnBounce but learning fast). I've noticed that my inbound clients who are directed to the Landing Page can click the Download button without having first completed entering their email address in the form box ~~ ahhhhh!  What did I miss in the set up of the landing page to force my customers to complete the required boxes before they can successfully move on by clicking the Download Button?  Thanks for all you do!  David   (www.academicradio.com   Unbounce Account:  academicradio)

November 03, 2012 12:32 am
User photo
Chuck Gordon

Is there a a document that explains how form data is appended? I need to know  how the format for radio button results, text fields etc, will be appended on my URL so I can parse it correctly.

November 14, 2012 09:45 am
User photo
Ryan Engley
Unbounce

@David - If you set your email field as required, that should do the trick.  Just open the form builder, select the email field and check "Required Field"

@Chuck - When your form data is appended as GET parameters, it follows the standard structure for a query string.  Let's say you have a form with "first name" and "email" fields, they'd get added to the URL like this:

http://listings.gastown-realty.com?name=chuck&email=chuck%40dom...

(The @ symbol is encoded as a URL safe character)

The same goes for radio buttons and text fields.

Does that help?

November 15, 2012 03:53 pm
User photo
Chuck Gordon

Thanks for you for the response. I did figure this out using Charlesproxy.  I would be a great feature if you could manipulate the input as variables into a url string. For example we would like to grab the zip code from a text field and insert it into our existing URL structure so we can drive the user to the right results on our site.

November 16, 2012 09:03 am
User photo
Ryan Engley
Unbounce

Hey Chuck - glad to hear that you were able to puzzle it out.  I've also made note of your feature request on this and while I'll admit it's not something we've really heard before, the use case makes sense.  Cheers.

November 16, 2012 10:45 am
User photo
Danny de Wit

So am I correct that you'd often create the landing page, and then you have a "Signup Now" button that leads to a second page on which you'd put the form. Would that second page also be a normal page like the other landing pages? And then reference it in the button settings? Thanks for your help!

December 12, 2012 03:03 am
User photo
Ryan Engley
Unbounce

Hey Danny - you could either have your form on the first page or, like you mentioned, have a button that clicks through to a second page with the form.  If you opted for the latter, you'd set it up exactly as you outlined.

I will say that you might want to test which set up works best (form on Page 1 or click through to form on Page 2) as each set up has its pros and cons depending on your use case.

Let me know if that helps or if you've got any other questions.

December 12, 2012 02:39 pm
User photo
Tyler White

Hello there,

does unbounce have any security functions like captcha or a honeypot field  for their forms available?

Thank you

February 27, 2013 02:49 pm
User photo
Aaron Welch

Our company uses customer's image files in our quote forms. Is it possible to have an image upload as part of a form created in Unbounce?

April 08, 2013 06:43 am
User photo
Ryan Engley
Unbounce

@Tyler - not just yet though improved spam filtering is on our roadmap. Since Captcha's would impact conversion rates, we're probably leaning toward Honeypot instead. We'll be sure to announce any updates we make in our community forum and through newsletters.

@Aaron - unfortunately not. The best recommendation I have at this point is to collect a URL that points to an area where the image is hosted online. I know this isn't ideal and not at all what you're hoping for. Alternately, you could connect your page to an email service provider and trigger an autoresponder with instructions for how someone could add the file to your public dropbox. Again, not ideal but a possible solution. You might want to check into a service like WuFoo to see if their forms would do the trick for you.

April 10, 2013 12:52 pm
User photo
Mohamed Marei

Is it possible to have a horizontal form? So instead of having Name on top of Email and so forth. They are horizontally laid out right beside each other. For example:

Name __________________ Email _________________ |SUBMIT|

April 22, 2013 03:45 am
User photo
Jacquelyn Ma
Unbounce

@Mohamed Unfortunately not at this time. To do style the form in this way right now, you would have to apply some custom CSS to your page to do so. Alternatively, WuFoo forms do offer this type of customization so you might want to look into their service (you can embed WuFoo forms onto Unbounce pages via HTML.) 

April 26, 2013 03:54 pm
User photo
Ryan Shank

How do I put the field labels inside of the text box (not top or left)?

April 30, 2013 06:23 am
User photo
Ryan Engley
Unbounce

@Ryan - you can see how to place "hint" text inside your form fields in this tutorial. Give it a shot but reach out if you have any follow up questions.

April 30, 2013 09:38 am
User photo
Rodney King

For the life of me...I cannot see or find the leads and form intergration section :( I am not even sure what the Page Overview is? I must be dumb:(

May 03, 2013 05:52 am
User photo
Ryan Engley
Unbounce

@Rodney - don't be so hard on yourself!  

  1. Just click the Pages tab on the left side of the app to see your list of pages. 
  2. Then click on a page's name to access its overview
  3. From there, scroll down to the lower right corner where you'll find Leads & Form Integrations. Here you can view/download leads & enable various integrations.

Like this:

Screen Shot 2013-05-03 at 9.48.14 AM.png

May 03, 2013 09:50 am
User photo
Mari Badger

WE NEED A PHONE EXTENSION FIELD!!!

May 06, 2013 11:47 am
User photo
Peter Smedegaard

I cant get this script to work correctly. it translates the form element errors but not the header:

<script type="text/javascript">
var d = window.module.lp.form.data; 
/* Change the main error message title */ 
jQuery(document).ready(function() { 
jQuery('#'+d.errorContainerId).find('h3').text( 
"Please correct the following errors:"
); 
}); 
/* Change the individual error messages */ 
d.validationMessages = { "first_name": { 
required: "First name is required" 
}, 
"last_name": { 
required: "Last name is required" 
}, 
"email": { 
required: "Email is required", 
email: "Please enter a valid email address" 

}; 
</script>

I can see the class for the text is and not h3 <div class="error">Please correct the following errors:</div>


May 08, 2013 05:31 am
User photo
Ryan Engley
Unbounce

@Mari - you're able to totally customize your forms so you can definitely add a phone extension field. Just add a text field, rename it to extension, and you should be all set.

@Peter - To customize your error messages you'll want to use the code we've posted to https://getsatisfaction.com/unbounce/topics/customized_form_error_m... -- just be sure to grab the code in my comment as its updated and will work properly.

May 08, 2013 12:11 pm
User photo
Mari Badger

@Ryan Yes we tried that but it just looks weird. It would be better if we could be more conventional and add it to the same line as the phone, even if it is in a different (unrequired, unvalidated)  field. What we're left with is having non-validated phone numbers instead. Just something to think about for the future? TY!!

May 08, 2013 12:22 pm
User photo
Ryan Engley
Unbounce

Point noted! One of the projects on our road map is custom phone number validation which I imagine could help you get what you need here. Stay tuned! We've got a ton of improvements planned and feedback like yours tells us what's most important to our customers.

May 08, 2013 02:24 pm