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
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.
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:
- Choose a template that has a form or add a form to your existing page
- Click the Form Confirmation Dialog tab in the top left of the of the editor to edit the form confirmation page
- Add a button to your page by dragging the green button icon from the objects palette onto the page
- Select the button and change its action to Download File in the properties pane on the right
- Choose the file you would like your visitors to download or upload a new file (200mb limit)
- 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.
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:
- Click on one of the form fields in your form (not the button) - to "select" the form
- In the properties panel on the right-hand side select "Go to URL" from the drop-down menu for "Form Confirmation"
- Enter the URL of your destination page in the text field provided
Opening a Button Link into a Lightbox
If you don’t already have a button on your page, drag and drop one from the widgets panel on the left.
- Click on your button to see its properties pane on the right
- Under “Click Action” select “Go to URL in Lightbox”
- Enter the URL you’d like to load in the lightbox
You can adjust the size of the lightbox as needed from the Desktop and Mobile views (mobile width is set at 320 pixels).
You can also open lightboxes from images.
Step B - Add the necessary scripts to your main landing page
- In the bottom left section of the Javascrips box, enable jQuery and jQuery Fancybox.
- Click the Add button in the upper left of the dialog to add a new script instance
- Name the new instance FancyBox and for placement choose Before Body End Tag
- Paste in the following code:
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
Step C - Add a link to trigger the lightbox
- Double click the text box you want to trigger the lightbox
- Highlight the text and click the link button
3. Input the URL you copied in the first step
5. Click Target and select Same Window (_self)
6. Save your page, publish, and see the magic!
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.
Adding Smooth Scrolling Links and Buttons
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.
Button: normally your Call to Action, the one thing you want people to click on your page.