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.
If you are starting with a page template that does not already have a form on it, or a blank page:


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

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.
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:
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.
To ensure that a visitor will see a conventional browser message letting them know their form submission has worked:
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:

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:

Your form data will then be passed on to the next page as GET (query) parameters in the URL.
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:
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.
You can get find detailed information on the integration options available to you the Integrations Section of Unbounce Answers
Comments
Very good, clear instructions. Great job!
Link to mail chimp integration is broken,
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!
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
Is there a way to insert multiple forms on a landing page?
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.
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?
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.
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?
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.
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.
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.
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.
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.
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
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.
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
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!
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
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.
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)
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.
@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?
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.
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.
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!
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.
Hello there,
does unbounce have any security functions like captcha or a honeypot field for their forms available?
Thank you
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?
@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.
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|
@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.)
How do I put the field labels inside of the text box (not top or left)?
@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.
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:(
@Rodney - don't be so hard on yourself!
Like this:
WE NEED A PHONE EXTENSION FIELD!!!
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>
@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.
@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!!
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.