--- title: "Setting Up Actions for Buttons, Text, and Images in ClickFunnels" slug: "setting-up-actions-for-buttons-text-and-images" description: "Learn to configure ClickFunnels actions for buttons, text, and images to enhance user interactivity and streamline navigation on your pages." tags: ["button", "image", "text"] updated: 2025-06-06T19:44:36Z published: 2025-06-06T19:44:36Z canonical: "support.myclickfunnels.com/setting-up-actions-for-buttons-text-and-images" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # Setting Up Actions for Buttons, Text, and Images in ClickFunnels Element actions in ClickFunnels define what happens when users interact with buttons, text, or images, allowing you to guide them through tasks like navigation, form submission, or triggering popups. ClickFunnels provides a user-friendly interface to set up these actions, ensuring smooth interactions across your pages. In this article, you will learn how to configure actions for Button, Text, and Image elements to enhance interactivity. --- ## Requirements - An active ClickFunnels account - A page created in your workspace --- ## Configuring Button Actions #### Adding a Button Element 1. Inside the page editor, add a **Section** where you want to place the element. 2. Add a **Row** within that section. 3. Click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element. 4. From the **Form** category, select the **Button** element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(102).png) 5. Hover over the button element; its border will be highlighted in orange. Click on the **Gear ⚙️ icon** or click directly on the element to open its settings panel. 6. Scroll to the **Button Action** section to set the button action. #### Available Button Actions This setting lets you define what happens when a visitor clicks the button. The available actions include: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(268).png) 1. **Nothing Happens**: Selecting the **Nothing Happens** option does nothing when clicking the button. 2. **Go to**: When you select the **Go to** action, two additional fields will appear, allowing you to choose between ***Custom URL*** and ***Custom Action Link*** for redirection. 1. **Custom URL**: This option lets you enter a specific URL (a “hard link”) to which the button will redirect upon clicking. This can be an external website or any URL you want to send the user to. You may also choose the option "**Open in new window.**" This indicates that when the button is clicked, the link will open in a new tab in the browser. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-AWT77U7E.png) 2. **Custom Action Link**: Instead of linking directly to a hard-coded URL, you can use a **relative path** or a **custom action command** (e.g., `#open-popup` or `/terms-and-condition`). This flexibility allows you to create dynamic links within your page that trigger actions such as opening a pop-up or navigating to a page that matches the path name associated with the same domain. You may also choose the option "**Open in new window.**" This indicates that when the button is clicked, the link will open in a new tab in the browser. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-IKO2HS3J.png) 3. **Store Page**: This option links directly to your funnel’s connected [storefront](/v1/docs/how-to-display-products-on-the-storefront) page. It’s useful for buttons that need to take users to product listings or shop-related content. You may enable **Open in new window** to launch the store page in a new tab. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-095WLYIK.png) 4. **Blog Home Page**: This option redirects the user to the main [blog](https://support.myclickfunnels.com/docs/getting-started-with-creating-a-blog-in-clickfunnels) page of your site. It’s ideal for promoting or linking back to your blog content. The **Open in new window** checkbox is also available for this option if you prefer the blog to open in a separate tab. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-KKXOB1CS.png) 3. **Submit Form**: When you select **Submit Order/Form** as the button action, you can control the post-submission redirection with the **Enable Redirect Override** option: - **Default Behavior**: If the **Enable Redirect Override** box is left unchecked, the button action will follow the default behavior by advancing users to the next step in your ClickFunnels funnel. If the funnel does not have a next step, the form will be submitted, and the page will reload to the current URL. - **Enable Redirect Override**: By checking this box, you can input a **custom URL** or a **relative path** to a page URL in the field. When enabled, the button will redirect users to this specified URL after the form submission instead of progressing to the next step in the funnel. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-2IKW0RV6.png) 4. **Scroll to**: Selecting **Scroll to** as the button action allows you to create smooth navigation by scrolling to a specific part of the page when the button is clicked. After selecting **Scroll to**, a dropdown menu will appear where you can choose the target element, such as a **Section**, **Row**, or specific **Element**. For easier identification, you can [change the container's title](/v1/docs/setting-up-actions-for-buttons-text-and-images#changing-container-title) (Section, Row, Flex, and Element) where you want users to scroll. This feature is useful for guiding users to relevant content on the same page, improving the user experience by reducing the need for manual scrolling. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-7B74Y47N.png) 5. **Show/Hide**: The **Show/Hide** action allows you to toggle the visibility of specific elements on the page when the button is clicked. After selecting **Show/Hide**, two dropdown menus appear: 1. **Show...**: Choose elements, sections, or rows that will be displayed when the button is clicked. 2. **Hide...**: Select elements, sections, or rows that will be hidden when clicking the button. Learn more about showing and hiding content by clicking on a button in the article [How to Show / Hide Contents on Button Click](/v1/docs/how-to-show-hide-contents-on-button-click). 6. **Open Pop-up**: Opens the page pop-up window, which could contain additional information, forms, or calls to action. 7. **Close Pop-up**: Closes the active pop-up window. 8. **Mark Complete**: Marks the current lesson as complete in a course and automatically advances the user to the next lesson in the sequence. 9. **Go Back to Previous Lesson**: Selecting this action allows the user to return to the previously viewed lesson within a course flow. This action does not alter the completion status of the current lesson, making it useful for revisiting earlier content without resetting progress. 10. **Restart Lesson**: This action reloads the current lesson and resets all associated progress. It is particularly useful in course lessons where users may need to repeat the material from the beginning for better understanding. To learn more about editing and customizing course pages, refer to [Using the Page Editor to Design Your Course](/v1/docs/using-the-page-editor-to-design-your-course). 11. **Redirect to Next Step**: When clicking the button, this action automatically takes the user to the next step in your funnel sequence. It’s a quick way to guide visitors through the funnel progression without manually specifying a URL. > [!NOTE] > **Note:** > > The **Redirect to Next Step** action is not intended for **form submissions**. Selecting this action will not submit any form data; it only triggers a redirection to the next funnel step upon clicking. If you need to capture form information before moving users forward, select the **Submit Form** action instead, as it will properly submit the data and then direct users as specified. --- ## Configuring Image Actions #### Adding an Image Element 1. Inside the page editor, add a **Section** where you want to place the element. 2. Add a **Row** within that section. 3. Click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element. 4. From the **Media** category, select the **Image** element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(71).png) 5. Hover over the image element; its border will be highlighted in orange. Click on the **Gear ⚙️ icon** or click directly on the element to open its settings panel. 6. Scroll to the **Link Action or URL** option to set the button action. #### Available Image Actions The **Link action or URL** field lets you specify what happens when a user clicks the image. You can choose from several predefined actions, insert a custom URL or relative path of a page URL. Here’s a breakdown of the available options: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-GDKFPWS3.png) - **#open-popup:** Clicking the image will trigger the page popup to open. - **#submit-form:** This option submits an opt-in form when clicking the image. - **?next_funnel_step=true:** Clicking the image will redirect users to the next page in your funnel. - **#close-popup:** This action will close an already opened popup, functioning as the opposite of the open popup action. - **?page_action=mark_complete:** If you're using the image in a course lesson editor, selecting this action will mark the lesson as completed when clicked. You may optionally select the **Target** field as either **Same Window** or **New Tab**. Choosing the **New Tab** option will open the action or URL in a new tab within the browser. --- ## Configuring Text Actions Text actions in ClickFunnels refer to hyperlinking text to trigger specific user interactions, such as redirecting to a blog post, navigating to a section, or opening a popup. These actions can be applied to various text elements like Headline, Sub Headline, Paragraph, and Bullet List, giving you the flexibility to guide user engagement effectively within your page design. #### Steps to Configure Text Actions 1. Select the text you want to hyperlink. 2. Click the **Link** **Chain** 🔗 icon in the text editor toolbar. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-98ZJP6WY.png) 3. Paste the URL or action in the **Link URL…** field. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-RLCR46A9.png) 4. Click the **Arrow** icon to choose whether the link should open in the same or a new tab. 5. Use the **Color Picke**r to change the hyperlink color and match it with your design. 6. If the selected text is linked, click the **Unlink Chain** icon to remove the hyperlink. 7. Click the **Bell** icon to unlink any click event listeners. This is useful if you have automation triggered by link clicks but want to exclude this specific link from triggering those actions. It is particularly handy for adding external references, buttons, or calls to action within your content. #### Custom Actions: - **#open-popup:** Clicking the text will trigger the page popup to open. - **#submit-form:** This option submits an opt-in form when clicking the text. - **?next_funnel_step=true:** Clicking the text will redirect users to the next page in your funnel. - **#close-popup:** This action will close an already opened popup, functioning as the opposite of the open popup action. - **?page_action=mark_complete:** Adding this action will mark the lesson completed when the text is clicked. - **#scroll-[ID]**: Adding Link or Text action as `#scroll-[ID]` will enable a seamless scroll to the specified content on the page. Please ensure to replace the **[ID]** with the actual ID of the container (section, row, flex, or element). For example, you may navigate to a section CSS code area to [**generate an ID**](/v1/docs/adding-custom-css-code-to-your-clickfunnels-pages#step-1-generating-a-css-selector) **(e.g., #id-6Z-8oepNL-481)** and link a text to **#scroll-id-6Z-8oepNL-481** to scroll that particular section. It is essential to assign the ID generated by the system for smooth scrolling to function correctly. If you type a custom ID into that container, the smooth scrolling feature will not operate as intended. Alternatively, you may utilize a button if you need a custom ID. > [!NOTE] > **Note:** > > ClickFunnels also includes the Link element that can be used to add linked text in the editor, allowing users to create interactive and engaging content. This feature is particularly useful for enhancing user experience by providing easy navigation options within the page. Learn more about the Link element in the article [Link: Add Anchor Links](/v1/docs/link-add-anchor-links). --- ## Adding Click-to-Call and Email Links ClickFunnels allows you to add actions to text, buttons, or images that enable users to call a phone number or send an email directly by clicking the element. When a user clicks a phone number link, it automatically opens the dialer app on their device with the number pre-filled, ready for a call. Similarly, clicking an email link launches the default email client on the user’s device, pre-populated with the specified email address. These features provide a seamless way to enhance user engagement and ensure quick, hassle-free communication. - **Phone Number Links**: Use `tel:+1234567890` to create a click-to-call action. Replace `+1234567890` with the desired phone number. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-N56XSH3I.png) - **Email Links**: Use `mailto:email@domain.com` to create an email link. Replace `email@domain.com` with the target email address. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-OBS20H5X.png) These links can be applied to any clickable element, such as text, buttons, or images, giving users easy access to call or email functionality. --- ## Changing Container Title 1. In the page editor, hover over a container (Section, Row, Flex, or Element). 2. Click the **Code <>** icon. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-Q7C7QAIY.png) 3. In the code editor, navigate to the **CSS Info** section 4. In the Title field, add the container's **Title**. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-LRD7QGYU.png) > [!TIP] > **Tips:** > > A clear and concise naming convention (e.g., **Section-hero**, **Row-slider**, **Element-checkout**, etc.) will facilitate the identification of containers across various use cases, such as configuring button actions to scroll to specific sections or referencing an element in your custom CSS code. 5. Click **Update** to save changes. ## Related - [Button: Allow Users to Submit Actions](/button-allow-users-to-submit-actions.md) - [Link: Add Anchor Links](/link-add-anchor-links.md) - [Image: Adding and Managing Images](/image-adding-and-managing-images.md) - [Headline: Adding and Styling Headlines](/headline-adding-and-styling-headlines.md) - [Show/Hide Contents on Button Click](/show-hide-contents-on-button-click.md) - [Icon: Add Icons to Enhance Your Content](/icon-add-icons-to-enhance-your-content.md) - [Collecting Custom User Data with Custom Input Fields](/collecting-custom-user-data-with-custom-input-fields.md)