Form Element in Funnel and Website Builder
You can add FG Funnels forms directly to your pages using the Forms element.
In This Article:
Adding Your Form Element and Selecting Your Form
- To add the form element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the forms section, select the form element and drag it to the desired location on the page.
- Once the form has been placed, a Form Picker popup will appear. From here you can select from your existing forms or click to create a new form in the form builder.
Customizing the Form Element
- From the Options panel on the right hand side you can rename the form element for ease of organization and recognition.
- You can manage the margin and padding for spacing adjustments. Margin will add spacing outside of the form element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
- If you need to change the form selected, there is a dropdown menu that will allow you to select a different form. The blue edit form button will open the form in the form builder for any adjustments that need to be made.
Setting Button Action
The final option in the General Tab of the form is Button actions. This sets what happens when someone clicks the button to submit the form. From the funnel builder, there are three options:
- Use action from form builder: Use action from form builder will use whatever was set in the On Submit options in the form builder, either sending to a URL or a message. If you choose this option, go to the form and ensure that that is set correctly.
- Go to website URL: You can paste in any URL for the user to be directed to after submitting, whether that is a thank you page, a sales page, a page on your website etc.
Go to Next Step: This will take them to the step directly underneath the current step in the funnel overview tab. You can quickly check that step by clicking on the name of the page in the middle of the middle row in the top toolbar, this will bring up the pages menu. The page listed right under the current page is the "Next Step".
Advanced Options
The advanced options panel allowing you to turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
Custom class and CSS selector allow you to make CSS adjustments that target this element.