Adding and Editing Form Fields

Passing URL Parameters Through a Form

When using a form (rather than a button) URL parameters can't automatically be passed along to another page (or the form confirmation).

Unbounce forms pass along form data, but not URL parameters. To pass your incoming URL parameters you'll need to set up hidden fields to receive any incoming parameters:

1. Add hidden field(s) to your form by double clicking your existing form and clicking the Hidden Field button on the left of the Form Designer
2. Name the fields the same as your incoming parameters:
3. If you're sending traffic to another page (not your Form Configuration), check "Append form data to URL" from the Properties Pane on the right:

All form data is passed through upon submission, so your incoming URL parameters will now be passed along to the next destination (whether Form Confirmation, or another page).

Pre-filling a Form with URL Parameters

With Unbounce, you can easily pre-fill your form fields with URL parameters (also known as query parameters).

What's a URL parameter you ask?

Well, among other things, a URL parameter is a way to pass data in a link to a web page. You can use URL parameters  to track different metrics in services like Google Analytics or in this case, to pre-fill your form.

A URL parameter has two parts. A variable name and a value. In example below, "coupon" is the variable name and "50_2013" is the value:

http://unbouncepages.com/puravida?coupon=50_2013

Let's say you want to pre-fill a coupon code on your form. Great.

Using the example above, you'd just need to add a "coupon" field to your form and it would automatically pre-fill with the matching query parameter. Like this:

A popular use-case for this is when you're using Google's UTM tracking...

Google has a popular URL building tool for tagging your links with useful data (which also happens automatically if your Google ADwords and Google Analytics accounts are linked). This will result in some paramaters being tacked onto the end of your Unbounce page URL which might look like this:

http://try.myproduct.com/landing-page?utm_source=google&utm_medium=ppc

To capture this data in your form, just create a hidden field for each tag and give them the same name as the tag, so for this example you'd create the following hidden fields:

Multi-step Forms

You can use the form settings to create multi-step forms in Unbounce.

Setting it Up

1. Create a new page.
2. Add a form to the page that collects some basic information (such as first name and email).
3. In the Properties Pane on the right (with your form selected), set the confirmation to "Go to another web page".
4. Add the URL for the next page you're going to build. In this case I'll use the URL "http://promo.site.com/step2".
   
5. Check "Append form data to URL".
6. Publish the page.
7. Create the second page. You'll probably want to just duplicate this page so that your design is the same. My second page is called Multi-step Form #2.
8. Give it the URL that we used in step #4 (in this case: http://promo.site.com/step2).
9. Edit the form on your second page to ask for whatever other information you need:       
10. Add hidden fields for the information you asked for on the first form, matching the field names. In this case that's "First Name" and "Email". Leave the default values blank. 
11. Publish your page.

Now when the visitor fills out the first form, they'll be redirected to the second form and when they fill that one out, it will contain the data from both forms in the lead information. If you want to have more than just 2 steps, simply repeat #7-#10 for each middle page. Please note that depending on how much data your fields are collecting, this method will break down after a while, as URLs do have a maximum length.

You can also pass incoming URL parameters through your form with hidden fields as shown later in this article.

How does this work?

Unbounce pages will automatically pre-populate a form field of the same name as a GET paramater - so since we added hidden fields named "first_name" and "email", those will be automatically populated with the values form the URL.

What's cool about this?

Aside from being able to spread out a form into multiple steps so as not to scare a visitor off on your first page, you also get the benefit of measuring each step along the way. You can test different variants of each page, and you can also set up integrations for each step as well. You'll probably want to set up your MailChimp/AWeber/Constant Contact integration on the last step, but you could set up an email notification on the first step if you want to be notified of users that may not get all the way through your form.

We know this is a bit complicated for something that should be very simple, and we are really looking forward to when we can tackle this as a built-in feature in Unbounce. Until then though, we'd love to hear about anyone who has this successfully set up!

Adding a Calendar Date Picker to Your Form

While we don't support this feature within the Unbounce app yet, check out "[How to] Add a Calendar Date Picker To Your Form" in the Community for a great workaround in the meantime.

Adding Placeholder Text to Form Fields

This feature allows you to add a greyed-out default value that will disappear as soon as your visitors start to type within the field.

Not only is this a helpful additional visual cue for your visitors, you can save space within your dimension-restricted Popup or Sticky Bar by including your form field cues within the form field instead of adjacent to it.

Follow these steps to add placeholder text to your form from within the Builder:

1. Double-click your form field.
   
2. Select the form field you wish to add placeholder text to and type your desired placeholder text in the "Field Placeholder Text" field.
   
   
   Placeholder text cannot currently be styled and will appear in sans-serif Arial typeface on your published Popup or Sticky Bar.
3. By default, the Field Label will appear above the Field Placeholder Text on your published Popup or Sticky Bar (see below).
   
   
   If you would rather the Field Label not appear above the Field Placeholder Text on your published Popup or Sticky Bar (see below), you can hide the field label.
   
   To hide a Field Label, click "Hide Label" under the Field Label text field. You'll see the Field Label disappear from the Form Design window when you enable this option.
   
4. Click "Done".
   
5. Back in the Builder, you'll see your shiny, new placeholder text within your form field. Click "Save" to lock it in, and you're done!
   

Modifying Form Validation Error Messages

When a visitor fills out the form on your page but their form entry doesn't validate, they'll see some errors, which look like this by default:

If you like, you can customize these errors in a couple of ways:

Customize the wording

You can modify the wording by adding a snippet of Javascript to your landing page. Here's the script:

To add it to your page, click Javascripts in the bottom left of the Page Builder, and then paste the script in. Then, adjust the bottom script to add your custom messages.

For example, if you have a field with the ID of email_address, you can adjust its error messages with a line like this:

errors.changeField('email_address', 'Please enter an email address', 'This email address is invalid');

Here's the result:

Customize the visual style

If you're familiar with CSS, you can also change the styling of the error message. Paste the following into the Stylesheets section of your page, and adjust it to give the style you want.

Glossary

Form fields: Used to collect user information for lead generation