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:


Manually change the size and position of your button


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


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.


Once you've edited the appearance of a button on your page, any other buttons you add will match it (with the exception of images as buttons).

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.

Launching Content from a Lightbox


The Builder can support a maximum of 20 lightboxes per page.


If you're using a Cloudflare SSL certificate on your domain, this will stop your Lightbox and Form Confirmation Dialog from loading. To prevent this from happening, disable your Cloudflare SSL certificate.

To Launch a Lightbox from a Button:

  1. If you haven't already, add a new lightbox button by dragging and dropping the widget from the panel on the left.
  2. Select your button and click "Edit Lightbox".
  3. Add/edit your content just like you would with your other Unbounce pages.


 You'll see this if you have a new lightbox that you haven't edited yet.

 You'll see this if you have either a lightbox with no links to it, or you've reached the maximum amount of lightboxes.

To Launch a Lightbox from an Image:

  1. If you haven't already, add a new lightbox button by dragging and dropping the widget from the panel on the left.
  2. Under the "Appearance" section of the Properties pane, click the "Style" drop-down menu and select "Image".
  3. In the "Choose Image" window that appears, select or upload the image you would like to display as your Lightbox button image preview.

    The image will not be editable within the Page Builder, so you will need to ensure the image is already sized as desired.
  4. Remove the default button styling (e.g. remove border, remove label text, modify corner radius to "0") as desired to create a plain image look.

    Now go forth and add images to your lightboxes!

Related articles:

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

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 Button

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 incorporating a file download button 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 a 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 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.

Setting Up Your Page to Redirect 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.

Adding Smooth Scrolling Links and Buttons


Adding this features requires custom Javascript.


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 Form Confirmation Dialog (Using Dynamic Text)


To personalize your form confirmation (thank you page) with Dynamic Text Replacement, head into the Page Builder and navigate to the Form Confirmation Dialog by clicking the tab in the upper right. Once you have the text looking the way you'd like (you can use placeholder text if your form field is required):

  1. Open the text editor by double clicking on the text box
  2. Select the text you'd like to make dynamic
    • If the form field you're passing through isn't required, you'll want to make sure you have default text that makes sense, otherwise you can use a placeholder like NAME as visitors won't ever see it.
  3. Name the parameter the same as the form field from your landing page
    • Generally it's the given name, all lower case, with underscores in place of spaces (e.g. first_name) but you can always check the field name in the Form Builder - you'll see the field name below the field in grey.

Once you save and publish, your form confirmation (thank you page) will automatically update based on form submission.


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

Was this article helpful?
17 out of 30 found this helpful