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 (1) to create a new step, then choose Inline Form (2).

Choose the template of your choice by clicking on Select (3).

Go to the form page editor by clicking on the Edit Page to customize your form (4).

A contact form must have at least one Form input, but you can add as many form fields as you want. 

Select the Form input element. Then, click the Settings (gear) icon to configure the field. Select the Input type you want to collect from the dropdown list.

You also need to configure the button action. Select the button and choose what happens after the user submits the form.

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 Add step (5) to create a new step, then choose Popup Form (6).

Choose the template of your choice by clicking on Select (7).

Go to the form page editor by clicking on Edit Page (8) to customize your popup form.

A contact form must have at least one Form input, so you can put as many form fields as you want. 

Select the Form input element. Then, click the Settings (gear) icon to configure the field. Select the Input type you want to collect from the dropdown 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

To add the contact form to your blog, you must copy its script and paste it on your blog page. 

The first step is to return to the Step configuration of your Inline form, then you need to click on Script.

A popup will be displayed containing a link to your Inline Form page. Click Copy link to clipboard. 

You will then have to go to the editor of the blog page by clicking on Edit from the menu or by directly clicking on the name of the page on which you want to add the Inline form.

Next, drag and drop a Raw HTML element onto your blog page.

Finally, you will need to go to the settings of your Raw HTML element. 

Click on Edit code and paste the script of the link retrieved from your Inline Form page into it. 

Be sure to click on Save to save the HTML code, click on Save changes in the editor, and save before exiting your blog page.

If we preview the blog page afterward, 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:

• Automatically: The popup appears after a specific time delay.
• On Click: The popup appears when a user clicks a specific link or text.

To display the popup form after clicking on a text, you first need 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:

1. You have to choose the content of the text that will be clickable.
2. You have to click on Copy link to clipboard.

Open the editor for the blog page where you want to add the link. 

Then, you need to set up a Raw HTML element on your blog page.

Finally, you will need to go to the settings of your Raw HTML element. 

Click on Edit code and paste the script of the link that opens a popup form page into it, then click on Save.

Be sure to click on Save changes in the editor to save your page before exiting your blog page.

If we preview the blog page afterward, we will notice the display of the popup form when we click on the text Click here to open the popup as shown below: