To integrate Funnelforms as a pop-up on your website, only a few steps are necessary, without any additional pop-up builder. The two options here are to either open it after a delay (classic pop-up) or after clicking on a button.
Note: Please note that the pop-up functions can only be used on WordPress systems for technical reasons. To embed the form on third-party systems, please use the external embed code.
Once your form is ready to be integrated into the website, you will find the pop-up shortcode, just like the WordPress and external shortcode, under the “Forms” menu item in the Funnelforms side menu:
First click on “Generate” under “Popup shortcode” to open the settings window for the pop-up to be generated:
From here, the respective setting options and subsequent embedding variants are separated, depending on whether you want the form to open after a time delay or after clicking on a button. Both variants are explained below.
Pop-up after delay
To display the pop-up after a certain delay, first click on “The pop-up appears after a delay” in the settings window. The additional setting option “Delay in milliseconds” opens together with the already generated shortcode:
Under “Delay in milliseconds”, enter your desired time after the form should appear on the website.
Note: 1 second corresponds to 1000 milliseconds. For a delay of 5 seconds after loading the website, for example, enter 5000 under milliseconds.
After you have entered your desired delay, you can copy the shortcode below:
Integration: Then insert the shortcode into any area on your website. Use either a normal text or HTML element for this.
Funnelforms will now automatically appear as a pop-up in the visible area of the website after the specified time.
Pop-up after click
To display the pop-up after clicking on a button, first click on “The pop-up appears after clicking on a button” in the settings window. The “Button class” setting option also opens together with the already generated shortcode. Specify a button class of your choice here. This is important so that the form pops up when the button is clicked:
Note: You are free to choose the button class. For example, it could be called Funnelforms or the title of your form, which is particularly useful for differentiation if you have several forms. It is only important that the CSS class of the button is later given the same name. Also make sure that hyphens are used between several words.
Once you have named your button class, you can copy the shortcode below:
Integration: Then insert the shortcode in any area of your website. Use either a normal text or HTML element for this. Then only enter your defined button class (e.g. Funnelforms) in the CSS class of your button in the page builder.
A simplified example - In Pagebuilder Elementor, the function in the backend of the website would look like this:
Note: It is essential that the pop-up shortcode (single) and the button with the corresponding CSS class are present on the page. Otherwise the pop-up will not be triggered when the button is clicked.
Only the button itself is now displayed on the website and when it is clicked, Funnelforms opens as a pop-up in the visible area of the website.
You also have the option of integrating the two different pop-up variants and the actual form on one page.