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:
Drag the Form widget from the objects palette on the left side of the editor onto your page:
This will open the Design Your Form dialog where you can then customize your form:
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:
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.
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.
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.'
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.
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.
4.02Form 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:
Select your form in the editor--you should see a bounding box surround the form fields as shown in the screenshot below
Select Show form Confirmation Dialog from the Confirmation menu
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.
You can then edit the form confirmation dialog using all the same tools used to edit your main page
To ensure that a visitor will see a conventional browser message letting them know their form submission has worked:
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.
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:
Select your form in the Unbounce editor. The Properties Pane will then display contextual options for your form.
In the Properties Pane, find the section Form Confirmation, open the drop down menu and choose Go to Another Web Page
Input the URL for your destination page in the URL field
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:
Select your form in the Unbounce editor. The Properties Pane will then display contextual options for you form.
Enable Append form data to URL
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:
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.
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.