Adding and Editing Form Fields

Forms are a foundational element for lead generation landing pages. How you design your forms has a huge impact on your conversion rates, and dictates the information that will come your way once a lead has converted. There are several more advanced uses of forms including pre-filling form fields, UTM tracking, and multi-step forms. This article will get you on your way.

Only one form is allowed per landing page.

This article will help you out with:

  • Adding and editing basic forms
  • Passing URL parameters through a form
  • Setting up forms to pre-fill for UTM tracking
  • Setting up multi-step forms


Adding and Editing Form Fields

  1. Double click on the form fields to edit an existing form

OR

  1. Drag and drop the Form Widget from the Widget Panel on the left to add a new form
  2. Select fields from the custom and pre-defined fields on the left of the Form Designer
  3. Click fields to edit
    • Field-specific options will appear on the right of the Form Designer
    • Move fields up and down using the directional buttons below the field in the Form Designer
    • Delete fields with the red button below the field in the Form Designer
  4. Click Done once you're happy with the Form

Name and email are set as required fields and email will automatically validate email addresses to ensure that an actual email is used. If you add a phone number field you can set it to validate for different regions.

Custom Field Names

You also have the option of entering different values for 'Field Name and ID' and 'Form Label'. This is useful if you will be downloading a CSV of your leads, and you’d like the value name to be simpler or shorter. This also allows multiple fields to have the same label, so you can specify uppercase characters for their form field labels. 

By default, the field 'Field Name and ID' will be the same as your 'Field Label'. If you want to customize it, simply uncheck “Auto-generate from Field Label” in the 'Name and ID' section.

You can also add text fields that you name yourself, checkboxes, radio buttons, custom and pre-made dropdown menus, or hidden fields - which can be useful with some of our advanced features and integrations. Please note that hidden fields will only have an input option for 'Field Name and ID', not 'Field Label'.

When you switch between fields, the "Auto-generate from Field Label" will only be re-checked if the value of the 'Field Name and ID' exactly matches the auto-generated version of the 'Field Label'. 


Form Properties

Single click the form fields and you'll see the Form Properties on the right on the Page Builder.

Geometry

Manually adjust size and position.

Form Confirmation

See our next section

Label Attributes

Adjust alignment, and font face, colour, and size.

Field Attributes

Adjust field height, spacing between, and internal font size. You can also select the field border, - including corner radius - background and text colours as well as turning on or off an inner shadow.

Checkbox & Radio Button Attributes

If you've added checkboxes or radio buttons you can adjust font face, colour, and size.


Loading a Form into a Lightbox

To load a form into your lightbox:

    1. If you haven't already, add a new lightbox button by dragging and dropping the widget from the panel on the left.
    2. Click "Lightbox" in the upper left corner of the Page Builder and drag and drop the Form button from the panel on the left into the Lightbox content field.

      Remember that only one form is allowed per landing page, so if your Form button is greyed out you will need to remove the existing form before you can add a new one.

    3. Design your form and click "Done" when you're finished.

      You can now modify the form on your Lightbox just as you would in any other page in the Builder.

Related articles:

Loading Content into a Lightbox
Adding an Image Preview in a Lightbox


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:parameter.png
  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:Screen_Shot_2012-05-01_at_9.16.12_PM.png

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:

 Screen_Shot_2013-09-13_at_4.14.01_PM.png

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:

Picture_1.png


Multi-step Forms

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

Setting it Up

  1. Create a new page, let's call it Multi-step Form #1
  2. Add a form to the page that collects some basic information, I'm asking for First Name and EmailPicture_6.png
  3. Set the confirmation to "Go to another web page" in the form Properties Pane on the right.
  4. Add your 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":Screen_Shot_2012-05-01_at_9.16.12_PM.png
  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, and I've made sure to
  8. Give it the URL that we used in step #3 (in this case: http://promo.site.com/step2).
  9. Edit the form on your second page to ask for whatever other information you need:       Picture_8.png
  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. Picture_9.png
  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

This feature requires custom Javascript. If you aren't familiar with Javascript, please contact a support coach for an alternative solution.

If your lead gen form requires a date or set of dates, you might be interested in hooking up a "date picker" widget to make the interaction as easy as possible. While this is a feature we will one day incorporate into the core form builder in Unbounce, you can use the following set of steps to get it working today.

Step 1: Add jQuery UI

Open up the "Javascripts" panel (click the Javascripts button in the bottom left of the editor) and paste in the following:

<script src="//a.unbounce.com/s/javascripts/jquery/jquery-ui.1.8.16.min.js"></script>

Call this script "jQuery UI" and set the placement to "Head". It should look like this:

javascript_add_script.png 

Step 2a: Add the jQuery UI stylesheet

Next, hop over to the "Stylesheets" screen (click the "Stylesheets" button in the bottom left of the editor) and paste in the following:

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />

Call this stylesheet "jQuery UI" and click "Save Code".

Step 2b (Optional): Customize the look of your date picker

There are many different themes available to the jQuery UI, and the above step is making use of the "smoothness" theme. If you wish to use a different theme, follow these steps:

  1. Hop over to the jQuery Theme Editor.
  2. Click "Gallery" and browse through the available themes.
    Click_the_Gallery_Button.png
  3. When you find the one you like, make note of the template name (e.g., "Base", in the image below).
    Note_the_Style_Name.png
  4. In the "jQuery UI" stylesheet you created in Step 2a above, replace the word "smoothness" in your tag with the template name of the theme you wish to use and click "Save Code". If the template name contains more than one word, add a hyphen (-) between each word (e.g., "black-tie").

There should only be ONE jQuery UI stylesheet being included on your page now.

Step 3: Add the date field to your form

You may already have this in your form, but the important part is finding out what the field is called. You'll want to use just a "Single-line Text Field":

single_text_field_form.png

In this example I'm calling it "Start Date". You'll notice right under the Field Label input box, there's some text "start_date". This is the ID of your field, remember it for the next step

date_picker_form.png 

Step 4: Add the 'date picker' JavaScript code

Open up the Scripts dialogue again. Add a new script, call it "Date Picker" and set the placement to "Head". Paste in the following code, and replace "start_date" with the form field ID that you took note of in the last step:

<script>
  $(function() {
    $( "#start_date" ).datepicker();
  });
</script> 

That's it, you're all done! You can save and preview your page now, and clicking on the "Start Date" input field should show you something like this (depending on which theme you chose):

Screen_shot_2011-11-21_at_12.21.13_PM.png

Selecting a date will populate the form field like so:

Screen_shot_2011-11-21_at_12.21.20_PM.png

Remember to look at all the options of using this component if you want to get your hands dirty customizing it. There really are a ton of options, including changing the format of the date string that populates your form field. Let us know how it worked out for you!


Adding Placeholder (Hint) Text to Form Fields

A number of people over on our Get Satisfaction community have asked how to add placeholder text to form fields. This is a greyed-out default value that will disappear as soon as your visitors start to type in the field.

We would love to get this feature built into Unbounce soon, but in the meantime, here's a workaround that uses a little bit of JavaScript: 

Add the script

  1. Click the JavaScripts tab at the bottom left of the page builder.

  2. Paste in the following script:

Customize the field names and placeholder values

In the snippet above you'll see a list of fields at the top (first_name, last_name and email) with their associated placeholder text.

You'll need to change these to match the fields in your page that you want to give placeholders to. You can find these field names in the form builder, as shown in the following screenshot:

placeholders.png


Modifying Form Validation Error Messages

This feature requires custom Javascript. If you aren't familiar with Javascript, please contact one of our support coaches for an alternative solution.

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:

errors1.png

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.

errors3.png

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:

errors2.png

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

 

Back to: Building Your Landing Pages >>

Powered by Zendesk