With a lead or a form, it is possible to create content that interacts with portal visitors and that can be used to collect data / information from a visitor. A form is usually accessible via a link that opens a Modal Overlay with the form content.

 With the Form Reference component, it is also possible to add a form to a Standard Content Page, in the main content.

On form submission, either a Thank You Page is loaded or the Next Step in a Multistep form set-up. To define the action taken on the form submission, there are 2 Action Types available: the Next Step for creating Multistep forms and Internal & External Mail to configure the mails sent on submission and to store the data put in by the form submitter (portal visitor). The form input data is then stored in the GEM database and is accessible and downloadable in the Bulk Editor.

Forms are created with a Modal Content Page with its designated Common Forms components. As the basic container and configuration component, the Form component needs to be added to each form step page. Besides these components, it is also possible to add any other Common component. If a Multistep forms set-up is used, a container that contains all steps pages can be created with the Lead Configuration Page template.

All forms must be created under the /configuration node, as children of the /leads (forms) node, which exists in every site configuration.

Attention:

Forms only work correctly if they are loaded as a Modal Overlay, opened via a link. This means that it is not possible to open a form in a new tab or to preview (in Author Preview) a Modal Content Page itself. Please always link to it with a link element in order to load all styles and the background color.

This of course does not apply if the form is embedded via a Form Reference component to a Standard Content Page.

This help page serves as an overview page for all templates and components that assemble the Forms / Leads feature.

The Form component is the most important component when creating a form. Its settings define what action is taken on a submit, the e-mails sent are configured and the general style is set. This means that every form must contain the Form component. It also serves as the container where all Common Forms component must be placed in.

Please see the Form component help page for more information.

The form content is created with a Modal Content Page that has the following Common Forms components uniquely available.

Besides the Common Forms components, all other Common components, such as Text With Image, are available to set up a form. Just be aware that the display of these components might not be 100% correct due to the different main content width. Therefore, please use them reasonably and with caution.

The Modal Content Page is used as a template to create forms. It is the only template where the Commons Forms components group is available. The page can only be created as a child of the Lead Configuration Page template.

Please see the Modal Content template help page for more information.

The sole purpose of the Lead Configuration Page is to serve as a container node for Modal Content Pages. This means that every Modal Content Page can only be created as a child of a Lead Configuration Page.

The page can also be used to create container nodes or "folders" for Modal Content Pages in Multistep forms.

Please see the Lead Configuration Page template help page for more information.

The common set-up for a form is to create a Modal Content Page for the form and to define a Thank You Page on the form submission. Besides this set-up, it is also possible to create multiples steps forms, where on a click on submit on one page, the next form step is loaded and the portal visitor can enter more data.

Multiple steps forms are best used if a lot of information is needed from the portal visitor or if different content, like additional information, needs to be displayed. In terms of user experience, a multiple steps set-up is recommended because the visitor gets guided via single steps through the process of the form submission.

The set-up of a Multistep form is quite simple:

1. create a Leads Configuration Page that serves as a container for all steps
2. as child of that page, for each step, a Modal Content Page with a Form component in it needs to be created
3. in every form step, set the Action Type to Next Step
4. as Next Step Page, set the path to the next form step (instead of the Thank You Page)
5. on the last step page, set the Action Type to Internal & External Mail, configure the Action Configuration and set the Thank You Page as the Next Step Page
6. on a form subission, the data from all steps are collected and stored in the GEM database

With the Form Reference component, it is possible to display a previously created form in a Standard Content Page. The advantage of this set-up is that a portal visitor already sees a form when opening a page and no more click on a link is necessary. This could tempt the visitor to fill out a form more likely.The component itself has no settings besides the path to an existing form and its displayed height. This means that all form content must be created beforehand.

Please see the Form Reference component help page for examples and more information.

The following options are available to style the content of a form.

Width of form

The width of the entire form content can be set in the Form component, tab Styling. This style element defines the width of the container, in which all other Common Forms components are placed. Available options are: Large, Medium, Small.

Please see the Recurring Elements: Style help page for examples and more information.

Width of components (columns)

By setting the Style of a component, it is possible to define the width of the component according to the available main content width. If two subsequent components for example have both the Style set to 50%, they float next to each other which produces a columns-like display. Available width options are: 100%, 66%, 50%, 42%, 33%, 25%, 17%.

Please see the Recurring Elements: Style help page for examples and more information.

Editorial hint:

Usage of the Columns component

It is not recommended to use the Columns component to create columns in a form, althought it might seem to be an easy set-up. The problem is, that in the responsive mobile view of a form, the entired columns move underneath each other. This means that for example in the desktop view the elements Name and Surname are next to each other (left column, right column) and have other components underneath (email, address etc.). In the mobile view, the fields would not be next to each other anymore, but instead, all elements of the first column and then below, the ones from the second column are displayed.

Themes / background color

In the Form component, tab Styling, it is possible to define the background color of the entire form (used as a Modal Overlay or in a Form Reference component) by configuring the Themes element. Available options are: White, Light Blue, Light Grey, Green. Per default, it is set to Light Blue.

Please see the Recurring Elements: Themes help page for more information.

The Constraints Expression elements are used to add a behaviour or display restriction to almost all Common Forms components. This means that it can be controlled how a component behaves, depending on the user's input. For example only if a certain condition is met (the value uf a checkbox is set to yes), then a defined action is performed (make a component mandatory). Additionally, by using the Value Commit Script, any kind of action can be defined, that should be triggered upon the user's input. The Expressions are written in JavaScript, but are easy to use also without prior scripting knowledge. With the Positive Reinforcement, the input method (validation) can be controlled.

Please see the Recurring Form Content Elements: Constraints help page for more information.

The data that is filled in by a form submitter is not only sent by mail (with Action Type = Internal & External Mail), but it is also stored in the GEM database. This data is accessible via the link View Data in the Action Configuration of a form.

This link leads to the so called Bulk Editor where the data of this specific form is accessible and downloadable.

Please see the Bulk Editor help page for more information.

After submitting a form (clicking the Submit button on the last step of a form), a Thank You Page is displayed, stating that the form was successfully submitted. This page is most commonly set up as a separate Modal Content Page with just one component on it: Configuration.

Example of a Thank You Page:

In order to load the Thank You Page after a submit, it must be defined as the Next Step Page in the Action Configuration of the Form component.

Please see the Confirmation component help page for more information.

Please note that it is also possible to define a Standard Content Page as a Thank You Page. If done so, the Confirmation component is not available but the content can be created with all available components.