Every page needs a button. Buttons are an essential element of any ClickFunnels page functionality. Buttons can be set to allow visitors to submit an opt-in form, go to another page, trigger content to show/hide, etc.
Prior to getting started, you will need the following:
Step 1: Add Button Element
Click on Add New Element from within a row or click on the "+" below an existing element.
Search or Select the Button Element.
Click on the Gear icon on the button element with the orange border to open the settings.
Step 2: Edit Settings
Click on the Gear icon on the button element with the orange border to open the settings.
Set the Button Action
Submit Order/Submit Form - capture input field information and move to the next step in the funnel.
This action ensures form validation before submission.
Open the Pop-Up - Opens the pop-up on the page.
Facebook Opt-In - the ability for customers to opt in with Facebook.
Go To Website URL - takes customers to a website URL (be sure to use https://)
Go To Next Step In Funnel - goes to the next step in the funnel, does not capture information on the page (if you want to capture the input fields, be sure to use Submit Order/Submit Form).
Ensure no popup action is configured alongside this action to avoid conflicts.
Scroll To Row/Section On-Page - Scroll to the desired section (highlighted in green boxes) or row (highlighted in blue boxes) on the page.
Show/Hide Action - shows or hides the elements you select.
Adjust the additional button Settings as desired.
Step 3: Managing Popup Behavior
Popups can enhance user engagement but require proper configuration to avoid undesired behaviors:
Prevent Popups from Auto-Showing:
Set the popup trigger to activate only when a button is clicked (e.g., "Open Pop-Up").
Disable auto-display triggers, such as "Show on Page Load" or "Show on Exit."
Resolve Overlapping Elements:
If a page section overlaps a popup, rebuild the popup’s content:
Open the popup in the editor.
Delete all sections, rows, and elements inside the popup.
Recreate the popup’s content and save.
Prevent Popups from Reappearing:
Ensure the button inside the popup is configured to redirect users to the next step or a specific URL after submission.
Top Margin - Add space above your element.
Set Action - Choose what you want the button to do.
Button Text - Choose the text that appears on the button.
SubText - Choose the subtext that appears on the button.
Aria-Label - Add descriptive text to your button.
Font Family - Change the font of the text.
Font Size - Change the size of the text
Mobile Size - Change the size of the text on mobile devices.
SubText Size - Change the subtext's size
Mobile Sub Size - Change the subtext size on mobile devices.
Text Color - Change the text color using the Color Picker.
BG Color - Change the background color using the Color Picker.
Note: The Aria-Label will allow you to add descriptive text to your button for ADA compliance. Click Here To Learn More About ADA Compliance.
Advanced Style Settings
Button Width - Choose if the width of the button should be based on the amount of text or the size of the row/column it's in.
Inline / Block - Adjust the justification for the element.
Style - Choose from custom or "Line Flat".
Vertical Space - Adjust the space above/below the element.
Horizontal Space - Adjust the space to the left/right of the element.
Corners - Adjust the amount of rounding around the edges of the button.
Border - Choose the size of the border.
Box Shadow - Add a shadow around the element.
Text Shadow - Add a shadow around the text.
Text Transform - Quickly set all text to Uppercase, Lowercase, or Capitalized.
Letter Spacing - Change the space between each character of text.
Icon Picker - Add an icon to the left of your text.
Icon Picker (After) - Add an icon to the right of your text.
Button Effect - Choose a built-in animation option.
Button Align - Choose the justification for the button.
Advanced Animation
Timed Delay - fade in or fade in with scale.
Type - On page load or on page scroll for the delay that you have set.
Advanced Customization with Scripts
For advanced functionality, such as embedding a Typeform popup:
Add a Custom HTML/JS Element:
Insert the Typeform popup script into a Custom HTML/JS element in the ClickFunnels editor.
Example code:
<html> <button data-tf-popup="[YOUR_TYPEFORM_ID]" data-tf-size="70" > Apply Now </button> <script src="//embed.typeform.com/next/embed.js"></script> </html>Disable Conflicting Settings:
Ensure the button does not have "Open in New Window" or other conflicting actions enabled.
Troubleshooting Common Issues
Form Validation: Mark required fields in the form settings to prevent submission until all fields are completed. Ensure the button action is set to "Submit Order/Form."
Saving Changes: Always save and exit the editor after making changes to ensure they are applied correctly. If multiple users are editing, the most recent saved changes will take precedence.If you have any questions about this, please contact our support team by clicking the support icon in the bottom right-hand corner of this page.