Adding and Editing Buttons and Confirmation Pages

Buttons are the slam dunk of your landing page. The moment when your visitor says "Oh yeah! Sign me up!" And something great better happen when they do. Have no fear, you can customize the buttons and confirmations on your page for maximum woo factor.

This article will help you out with:

  • Inserting pre-defined and customized fields into your landing page form
  • Dictating the order, type, and style of your form fields
  • Identifying the best form types based on your use-case


Button Properties

Click on your button to populate its properties pane on the right:

Geometry

Manually change the size and position of your button

Label

Change the text and font of your Call To Action (Hint: Never use Submit)

Appearance

Choose a style for your button (solid color, gradient, or image) and then choose your button's appearance across three modes: Up, Hover, and Active.  If you select a gradient, the Page Builder will auto-select a secondary gradient colour for you but you can always change this manually but clicking the lock button.  You can also change the border color and corner radius of your button.


Form Confirmation Options

Click on your form fields to see form Properties on the right. Navigate down to Form Confirmation and open the dropdown where you have four options:

Show form confirmation dialog

Displays a form confirmation dialog (more commonly known as a "thank you page") that you can edit in Unbounce - just like your landing page.

To edit your form confirmation dialog click the button below the form confirmation dialog or click the "Form Confirmation Dialog" tab in the upper left of the Page Builder.  You can use the tabs here to switch between the form confirmation dialog and main page.

You can also use one of our Integrations to collect form data.

Show alert message: Displays an in-browser message of your choosing.

Go to another web page: Sends the user to another page (with the option to append the form data to the URL).

Post form data to a URL: Sends the form data and your user to another page.

 


Adding Click to Call Buttons

Click to call buttons provide phone visitors to your page with an quick and easy way to give you a call.

Once you have your button looking the way you'd like in the Page Builder, click it to reveal its properties on the right of the interface.

Select "Go to URL" as the click action of the button.

For the link itself, use "tel:+[country code][area code][phone number]" format.

For example our country code is 1, our area code is 604, and our phone number is 484-1354 so our link would be tel:+16044841354

Next, click the Conversion Goals tab on the upper right and set your newly created link as your conversion goal.  This will ensure calls are properly recorded as conversions for your stats.

Finally, publish your page


Passing Incoming URL Parameters to Outgoing Button Links

If you're using a click-through page you might want to send on your visitor along with the URL parameters they arrived with.

When you add your button, head over to its properties on the right and look for Click Action.  From there, select "Pass through URL parameters" and they will be passed along to your visitor's next destination


Adding a File Download

Adding a File Download (PDF, eBook, White paper etc.)

Enticing customers with amazing content is a great strategy for collecting leads. Who doesn't want to download a sexy white paper?! One way to set up this process is by encorporate a file download into your lead generation confirmation page. This way, once a lead has provided their information, they'll be rewarded with your delightful content. Besides being efficient, adding file downloads to your lead generation confirmation pages is s lovely way to say "hey, thanks!" to your leads.

Unbounce allows you to have file downloads on your lead gen confirmation pages. This lets you easily manage your lead capture campaigns and the files you are giving away when people complete your forms.

To make this happen, follow the steps in the video below:

  1. Choose a template that has a form or add a form to your existing page
  2. Click the Form Confirmation Dialog tab in the top left of the of the editor to edit the form confirmation page
  3. Add a button to your page by dragging the green button icon from the objects palette onto the page
  4. Select the button and change its action to Download File in the properties pane on the right
  5. Choose the file you would like your visitors to download or upload a new file (200mb limit)
  6. Customize your button's appearance and save your page

And you're done!

Now your lead gen landing page is ready to allow your visitors to download a file after completing your form.

Go nuts!

How do I redirect to another page after form submit?

To set up your form to redirect to another page after the button is clicked follow these steps:

  1. Click on one of the form fields in your form (not the button) - to "select" the form
  2. In the properties panel on the right-hand side select "Go to URL" from the drop-down menu for "Form Confirmation"
  3. Enter the URL of your destination page in the text field provided

 


Opening a Button Link into a Lightbox

This feature requires Javascript. If you aren't experienced with Javascript, please contact one of our support coaches to discuss alternative solutions.

Step A - Create and publish a page containing your iframe (popup) content

This can be an Unbounce page or an external webpage. Once you've created the page, make note of the page URL. You'll need it later.

Step B - Add the necessary scripts to your main landing page

  1. Access your page in the Unbounce editor and click the Javascripts button in the bottom left of the editor.
  2. In the bottom left hand corner of the Javascripts box, make sure jQuery and jQuery.Fancybox are checked.
  3. Click the Add button in the upper left hand corner of the Javascripts box to add a new script.
  4. Name the new script Fancybox and for the placement choose Before Body End Tag.
  5. Paste in the following code:

 javascripts.png

 

scripts.png

        6.  Note that the snippet #lp-pom-button-22 in the above script must be changed to the appropriate button ID on your page. To find the button ID, click the button and navigate to the Properties tab in the upper right hand side of the editor. At the bottom of the Properties tab there is a heading labelled Advanced. Under this you'll find the ID of the button beside Id. Copy this ID and place it in your script where #lp-pom-button-9 is currently located. Then click Done.  

steps.png

 

copied.png

Step C - Add a link to the button to trigger the lightbox

  1. Click the button and input the URL you copied in Step A.

button_url.png

      2.  Save your page, publish, and see the magic!

in_action.png

If you want to change the size of the fancybox when it pops up, you can open up the script in the editor and modify the dimensions (currently width: 840 and height:480) to the size of your webpage.

Add a Lightbox Style Window (for Privacy Policy, Rules, Terms etc.)

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

Step A - Create and publish a page containing your privacy policy (rules, terms & conditions etc.)

That's it.  Just build and publish a landing page with your Privacy Policy content.  Be sure to resize the page margins to fit your page content snugly then make note of this page's published URL.

Step B - Add the necessary scripts to your main landing page

  1. Access your page in the Unbounce editor and click the Javascripts button in the bottom left of the editor.
  2. In the bottom left section of the Javascrips box, enable jQuery and jQuery Fancybox.
  3. Click the Add button in the upper left of the dialog to add a new script instance
  4. Name the new instance FancyBox and for placement choose Before Body End Tag
  5. Paste in the following code:

javascripts.png

 

text_to_iframe.png

     6.  Note that the snippet #lp-pom-text-22 in the above script must be changed to the appropriate text ID on your page. To find the text ID, click the text box and navigate to the Properties tab in the upper right hand side of the editor. At the bottom of the Properties tab there is a heading labelled Advanced. Under this you'll find the ID of the text box beside Id. Copy this ID and place it in your script where #lp-pom-text-22 is currently located. Then click Done

do not remove the ' a' from the snippet. For example, if your text ID is '#lp-pom-text-155', your code will now look like 

$('#lp-pom-text-155 a').fancybox({

textiframe_steps.png

 

scripts_text_copied.png

Step C - Add a link to trigger the lightbox

  1. Double click the text box you want to trigger the lightbox
  2. Highlight the text and click the link button

2013-06-19_1453.png 

     3. Input the URL you copied in the first step

2013-06-19_1454.png 

     5. Click Target and select Same Window (_self)

 2013-06-19_1456.png

     6. Save your page, publish, and see the magic!

in_action.png

 

Note: We are using a jQuery plugin called Fancybox in this example, but any other javascript overlay/dialog/lightbox option would work (there are plenty out there). Check out Fancybox for more information about what you can do with it.

One thing to note is that the lightbox script is very specific and the version used here will only work for text links with the iframe fancybox class.

For help developing a privacy policy tailored to your company and use case, we recommend iubenda.


Adding Smooth Scrolling Links and Buttons

Adding this features requires custom Javascript. If you are not familiar with Javascript, please contact one of our support coaches for alternative solutions.

You can add smooth scrolling links and buttons to your page with a little Javascript.

Open your Javascripts dialog via the tab in the bottom left of the Unbounce Page Builder and paste the following code:

 

 

Now you can select any object or page section as the destination for a smooth scrolling link.

Copy the Object ID from the Properties Pane on the right of the page builder (e.g. #lp-pom-block-9).

For a button: Paste the ID as the Link for your Click Action. Make sure 'Pass through URL parameters' is not selected.

For a text link: Paste the ID as URL for your link.

Now just Save and Publish your page and you'll see the smooth scrolling in action!


Display Form Values in Your Confirmation Dialog

This feature uses Dynamic Text Replacement

It's possible to personalize your form confirmation dialog with the information that a visitor submits in your form. We have some rough directions for dynamically replacing text on your landing page -- doing the same on your confirmation dialog page is really no different. 

Follow the instructions here: https://getsatisfaction.com/unbounce/topics/variable_text_on_landing_page#reply_4749635

Your form fields will be passed as parameters to your confirmation dialog, so when the above instructions talk about finding the "utm_keyword" parameter, you can replace that with your form field names. So if your form had "First Name", "Email" and "Phone Number", you could count on having the parameters "first_name", "email", and "phone_number" available to you.

Other than that, the instructions are the same. Let us know if you have any trouble with this until we write up a real set of instructions.


Glossary

Button: normally your Call to Action, the one thing you want people to click on your page.

 

Back to: Building Your Landing Pages >>