How to add a form field and a form element to your page

In this article, you will learn how to add a form field and a form element to your page.

To get started, you will need:

• An active systeme.io account
• A funnel page in edit mode

Adding a form field

In the page editor, drag and drop the Form input element from the left sidebar onto your page.

Next, select an option from the Input type dropdown menu.

Example: If you select Email as the input type, the contact will be added to your contact list when the customer submits the form.

You will find many settings in the left editor to customize your form field, such as typography, colors, borders, alignment, placeholder color, and much more (scroll down for more options).

Adding a form element

To easily capture leads on your funnel, you can use the Form element. Instead of adding input fields and buttons separately, the Form element acts as a single container that groups your input fields, checkboxes, and submit button together. This allows you to reliably build multiple independent forms on the same page.

When you click on the Form element, you can fully configure it using the menu panel on the left side of the editor:

a. Under the Elements tab:

• Manage standard fields: Easily remove standard input fields (such as First name, Phone number) by hovering over the field you want to remove, and a Bin icon (1) will appear.

You can also edit the standard fields by simply clicking on them; you can edit the Placeholder, make it optional by checking the Optional box, add an icon, and edit the design.

• Add new field: Scroll down and click the (+) button (2) to instantly add new fields.

You can choose from the ones that exist by default, such as postal code, company name, etc. You can also add an extra checkbox (3).

Or add a custom field (4).

Note: Custom fields are created from the contacts page in your dashboard. Once created, they appear automatically in the form settings under "Custom fields".

Check out the following page to learn more: How to add a custom form input field

After adding your fields, you can organize them by dragging and dropping them in the order you like.

b. Under the Design tab:

• Customize appearance: You can customize the layout, row spacing, background color, borders, spacing, position, and many more settings (scroll down for more options). However, some settings, such as typography, are inherited from the page settings for the Form element.

c. Under the Actions tab:

• Redirection rules (Post-submission): Choose what happens after the form is submitted.
  • No redirection (5): You can choose to keep visitors on the same page and display a clean success message.

• Custom URL (6): You can choose to redirect visitors to another page.

• Double opt-in (7): Simply check the box to enable double opt-in for your new subscribers.

• In-editor automations (8): Add automation rules directly inside the page editor. You can easily trigger specific actions (like adding a tag, subscribing them to a campaign, or sending an email) the moment someone submits the form.

Click Save (9) to save the changes.

Outside of the page editor, you can also select your specific form element when configuring a "Funnel step form subscribed" trigger inside your account's:

Automation rules:

And workflows;

Note: To save the information submitted through the form fields, you will need to create a button for the customer to click.

To learn more, check out the following help article: How to configure a button.