How to add a form or a popup on your systeme.io blog
This article will teach you how to set up an inline form or a popup form on your systeme.io blog.
Step 1: Create an inline form
First, you'll need to create a contact form from your sales funnel.
To do so, go to your "Sales Funnel", click on "Create step" to create a new step (number 1 in the image), then choose "Inline Form" (number 2 in the image)
Choose the template of your choice by clicking on "Select" (number 3 in the image)
Go to the form page editor by clicking on the "Edit Page" to customize your form (number 4 in the image)
A contact form must have at least one (1) "Form input", but you can add as many form fields as you want.
Please select the "Form input" item, then with the scroll wheel, set up the field in question by selecting an "Input type" you wish to collect by selecting an item from the drop-down list.
It will also be necessary to predetermine the button that will record the action to be done with the collected item.
Don't forget to click on "Save changes" before leaving the editor or your "Inline form"
Step 2: Create a popup form
Go to your "Sales Funnel", click on "Create step" to create a new step (number 5 in the image), then choose "Popup Form" (number 6 in the image)
Choose the template of your choice by clicking on "Select" (number 7 in the image)
Go to the form page editor by clicking on the "Edit Page" to customize your popup form (number 8 in the image)
A contact form must have at least one (1) "Form input", so you can put as many form fields as you want.
Please select the "Form input" item, then with the scroll wheel, set up the field in question by selecting an "Input type" you wish to collect by selecting an item from the drop-down list.
It will also be necessary to set the button that will record the action to be done with the collected item.
You can choose a time for the contact form to appear on your blog page, this time can be adjusted using the Editor.
The time to be indicated is in seconds.
Don't forget to click on "Save changes" before leaving the editor or your "Popup form"
Step 3: Set up the Inline form on your blog
In order to set up the contact form on your blog, you must retrieve its "Script" and paste it on your blog page.
The first step is to return to your "Step configuration" of your "Inline form", then you need to click on "Script".
A popup will be displayed containing the code of your "Script" linked to your "Inline Form" page, click "Copy script to clipboard".
You will then have to go to the editor of the blog page, on which you want to add the Inline form.
Then, you need to set up an HTML element on your blog page.
Finally, you will need to go to the settings of your HTML element.
Click on "Edit code" and paste the "Script" code retrieved from your Inline Form page into it.
Be sure to click on "Save" to save the HTML code, and click on "Save changes" in the editor and save before exiting your blog page.
If we preview the blog page afterwards, we will notice the display of the form as shown below :
Step 4: Setting up the popup form on your blog :
When setting up a contact form as a popup, there are two possible ways to display it on your blog page :
- As a Popup that is displayed according to the time setting of its appearance.
- From a text that will be clickable and configured to open the popup.
For the first option the method is the same as when you add an inline form on a blog, so we will explain the second method in detail.
To display the "Popup form" after clicking on a text, you need first to go back to the step configuration or your "Popup form", then you need to click on "Create a Link".
A popup will appear that will allow you to click on a link that opens the popup from a text :
- You have to choose the content of the text that will be clickable.
- You have to click on "Copy script to clipboard".
To do so, you must go to the editor of the blog page on which you would like to post your blog.
Then, you need to set up an HTML element on your blog page.
Finally, you will need to go to the settings of your HTML element.
Click on "Edit code" and paste "Script" of the links that opens a popup form page into it
Be sure to click on "Save" to save the HTML code, and click on "Save changes" in the editor to save your page before exiting your blog page.
If we preview the blog page afterwards, we will notice the display of the popup form when we click on the text "Click here to open the popup form" as shown below:
Useful articles :