Page History

...

The Form module allows you to create Web forms that visitors can fill in. The module provides components for easy creation of standard forms, like contact forms. You can group related form elements such as address fields together visually. Form data can be validated using configurable validators. By default, submitted form data is sent by email. You can process form data with pluggable data processors which allow customization without changing the Magnolia core system. Magnolia forms are fully HTML5 compliant.

...

1. Add the Form component to any area of a new or existing template. 
   Example: Adding form component to main area of a new template.

   Localtab Group Localtabactive

   
   
   

   true
   title	YAML file
   Code Block
   language js title /my-module/templates/pages/form.yaml
   templateScript: /my-module/templates/pages/form-page-template.ftl renderType: freemarker visible: true title: Form Template dialog: my-module:pages/form areas: main: availableComponents: form: id: form:components/form
   Localtab
   title JCR node
   Advanced Tables - Table Plus
   heading 0 multiple false enableHeadingAttributes false enableSorting false class m5-configuration-tree enableHighlighting false
   Node name	Value
   Mgnl f my-module	Mgnl f templates	Mgnl f pages	Mgnl n form	Mgnl n areas	Mgnl n main	Mgnl n availableComponents	Mgnl n form
   Mgnl p id	form:components/form
   Mgnl p dialog	my-module:pages/form
   Mgnl p renderType	freemarker
   Mgnl p title	Form Template
   Mgnl p templateScript	/my-module/templates/pages/form-page-template.ftl
   Mgnl p visible	true

2. Create a new page based on the template that contains the Form component (created in 1. above).
3. Open the page, add the Form component and configure the form settings. Form settings define the title and name of the form, and where the collected information should be submitted.
   Image Removed

4. Add a fieldset to the form.
   Image Removed

   Info
   You can have multiple field sets in one form. This helps to groups them visually. For example contact details in one set and feedback message in another etc.

5. Add a field set.
   Image Removed
6. Add fields inside the field set.
   Image Removed
7. View the form.
   Image Removed

Creating forms for handling personal data

With Magnolia you can create forms for the purposes of handling personal data, for example for the requirements of General Data Protection Regulation (GDPR).

Magnolia provides the following pre-configured GDPR-related form templates as samples you can build on:

...

Store data form

...

Double opt-in forms.

See an example of creating a form with double opt-in functionality on the Creating a GDPR-compliant form page.

...

Confirm data form

...

Get visitor data form

...

Forget me form

...

Delete visitor form

...

1. Create a new page based on the template that contains the Form component (created in 1. above).
2. Open the page, add the Form component and configure the form settings. Form settings define the title and name of the form, and where the collected information should be submitted.
   Image Added

3. Add a fieldset to the form.
   Image Added

   Info
   You can have multiple field sets in one form. This helps to groups them visually. For example contact details in one set and feedback message in another etc.

4. Add a field set.
   Image Added
5. Add fields inside the field set.
   Image Added
6. View the form.
   Image Added

Creating forms for handling personal data

With Magnolia you can create forms for the purposes of handling personal data, for example for the requirements of General Data Protection Regulation (GDPR).

Magnolia provides the following pre-configured GDPR-related form templates as samples you can build on:

Personal data form processors

To implement the above functions, the magnolia-privacy module provides the following form processors:

Personal data form processors

To implement the above functions, the magnolia-privacy module provides the following form processors:

• Javadoc resource link
  className info.magnolia.privacy.form.processor.AddConsentFormProcessor renderType asynchronous

  : Updates a visitor's consent.
  

  • Javadoc resource link
    className info.magnolia.privacy.form.processor.JcrStoreFormProcessor renderType asynchronous

    : Extends the functionality of the AddConsentFormProcessor processor. It also stores the data into a JCR workspace. The data is stored in an intermediate workspace so that the data cannot be used unless the visitor confirms consent. Under the processor define:
    • workspace -  the name of the intermediate workspace.
    • nodeNameProperty -  the node name of the data to be stored.
    • nodeType - the node type of the data to be stored.
    • rootPath - the path to the node (default is "/").

  • Javadoc resource link
    className info.magnolia.privacy.form.processor.JcrMoveFormProcessor renderType asynchronous

    : Moves data from the intermediate workspace to the target workspace. Configure the intermediate and target workspaces under the processor using the sourceWorkspace and targetWorkspace properties.

• Javadoc resource link
  className info.magnolia.privacy.form.processor.ConfirmConsentFormProcessor renderType asynchronous

  : Confirms a visitor's consent.

• Javadoc resource link
  className info.magnolia.privacy.form.processor.GetVisitorDataFormProcessor renderType asynchronous

  : Collects all data belonging to a visitor and provides a weblink where the visitor can download this data.

• Javadoc resource link
  className info.magnolia.privacy.form.processor.AddConsentFormProcessorDeleteVisitorFormProcessor renderType asynchronous

  :  Updates Requests the deletion of all a visitor's consentdata (via a deletionId).

• Javadoc resource link
  className info.magnolia.privacy.form.processor.

  JcrStoreFormProcessor

  ConfirmVisitorDeletionFormProcessor renderType asynchronous

  : Extends the functionality of the AddConsentFormProcessor processor. It also stores the data into a JCR workspace. The data is stored in an intermediate workspace so that the data cannot be used unless the visitor confirms consent. Under the processor define:
  • workspace -  the name of the intermediate workspace.
  • nodeNameProperty -  the node name of the data to be stored.
  • nodeType - the node type of the data to be stored.
  • rootPath - the path to the node (default is "/").

• Javadoc resource link
  className info.magnolia.privacy.form.processor.JcrMoveFormProcessor renderType asynchronous

  : Moves data from the intermediate workspace to the target workspace. Configure the intermediate and target workspaces under the processor using the sourceWorkspace and targetWorkspace properties.

• Javadoc resource link
  className info.magnolia.privacy.form.processor.ConfirmConsentFormProcessor renderType asynchronous

  : Confirms a visitor's consent.

• Javadoc resource link
  className info.magnolia.privacy.form.processor.GetVisitorDataFormProcessor renderType asynchronous

  : Collects all data belonging to a visitor and provides a weblink where the visitor can download this data.

• Javadoc resource link
  className info.magnolia.privacy.form.processor.DeleteVisitorFormProcessor renderType asynchronous

  : Requests the deletion of all a visitor's data (via a deletionId).

• Javadoc resource link
  className info.magnolia.privacy.form.processor.ConfirmVisitorDeletionFormProcessor renderType asynchronous

  : Confirms the deletion request.

See GDPR and forms too.

Creating a multistep form

Splitting a large form into multiple steps allows the visitor to focus on one step at a time. The substeps are detected automatically. Visitors can move forward and backwards between steps without losing entered data. Each step is validated individually. The form module also allows users to upload files, but the upload field should only be included as the last step of the process.

Add the Form Step component to an area of a template.
Example: Adding formStep component to main area in a new template.

...

templateScript: /my-module/templates/pages/formStep-page-template.ftl
renderType: freemarker
visible: true
title: Form Step Template
dialog: my-module:pages/form
areas:
  main:
    availableComponents:
      form:
        id: form:components/formStep

...

...

...

...

...

...

...

...

...

...

...

...

form:components/formStep

...

...

my-module:pages/form

...

...

freemarker

...

...

Form Step Template

...

...

/my-module/templates/pages/formStep-page-template.ftl

...

...

true

...

1. Configure the form settings. 
2. Add a field set component
3. Add fields inside the field set. The Submit button field will automatically navigate to the next step. Conditional steps can be set in the Next step condition component.
   

   Image Removed

...

1. Add field sets and fields on the substep forms. Submit button fields will automatically navigate to subsequent or conditional steps and the final button will submit the form.
   Image Removed  Image Removed  Image Removed

Configuring form settings

Form settings are configured in the Form component.

Form tab

...

Field

...

Description

...

Title

...

Title displayed above the form. For example "Contact Us".

...

Form name

...

Internal name that allows you to reference the form by name, for example from JavaScript.

...

Text

...

Introductory text displayed below the form title.

...

Marker for required fields

...

Character displayed next to required fields. Asterisk by default.

...

Text for required symbol

...

Text that explains what the required marker means, displayed near the top of the form. For example "Required fields".

...

Step-by-step navigation

...

When checked displays step-by-step breadcrumb navigation that allows the user to navigate the steps of multistep forms.

Submit settings tab

...

Field

...

Description

...

Error title

...

Title displayed when an error occurs, for example "There was a problem with your booking."

...

Success title

...

Title displayed when the form is submitted successfully, for example "Your tour is booked"

...

Text

...

Text displayed when form is submitted successfully, for example "Details are on their way to your inbox."

...

Page displayed after submission

...

Select a page to display after submission. If no page is selected, the user stays on the current page and the success title and text are displayed instead.

...

Track mail

...

Logs the information submitted in the form to magnolia-form.log file.
Make sure the trackEMail form processor is also enabled. See Logging form data.

Email tab

...

Field

...

Description

...

From

...

Email address displayed in the From field of the outgoing message. This can be any address as it is not the account used to send the mail. The mail is sent using the account in SMTP configuration .

...

To

...

Email address the data is sent to. You can use form field names with Freemarker tags. Typically you would ask the submitting user for their email address on the form and repeat it here with a Freemarker tag such as ${email} assuming the email field is named email.

...

Subject

...

Email subject line. You can use form field names with Freemarker tags such as ${subject}.

...

Available fields for Freemarker syntax

...

Form field names that can be used in Freemarker tags.

...

Type

...

Radio button to select the message type for the email body.

...

text

...

Displays a text field to compose the email template. You can use form field names with Freemarker tags such as ${subject} and ${message} to write the data collected on the form into the message.

...

html

...

Confirmation email tab

...

Field

...

Description

...

Send confirmation

...

Sends a confirmation mail to the submitting user.
Make sure the SendConfirmationEMailProcessor form processor is also enabled.

...

From

...

Email address displayed in the From field of the outgoing message. You might want to use a customer support address here in case the user has further questions or a no-reply address. You can use form field names with Freemarker tags.

...

To

...

Email address the data is sent to. You can use form field names with Freemarker tags such as ${email}.

...

Subject

...

Email subject line, for example "We have received your feedback." You can use form field names with Freemarker tags such as ${subject}.

...

Available fields for Freemarker syntax

...

Form field names that can be used in Freemarker tags.

...

Mail type

...

Radio button to select the message type. For code and text you can use form field names with Freemarker tags such as ${subject} and ${message} to write the data collected on the form into the message. This can be a simple acknowledgement that data was submitted or you can summarize the collected data.

...

code

...

text

...

Displays a Text field to compose the email template. 

...

page

...

• Confirms the deletion request.

See GDPR and forms too.

Creating a multistep form

Splitting a large form into multiple steps allows the visitor to focus on one step at a time. The substeps are detected automatically. Visitors can move forward and backwards between steps without losing entered data. Each step is validated individually. The form module also allows users to upload files, but the upload field should only be included as the last step of the process.

1. Add the Form Step component to an area of a template.
   Example: Adding formStep component to main area in a new template.
   
   

   Code Block
   language js title /my-module/templates/pages/form.yaml
   templateScript: /my-module/templates/pages/formStep-page-template.ftl renderType: freemarker visible: true title: Form Step Template dialog: my-module:pages/form areas: main: availableComponents: form: id: form:components/formStep

2. Create a new page based on a template that contains the Form component. This is the first page of the form.
   
   1. Configure the form settings. 
   2. Add a field set component
   3. Add fields inside the field set. The Submit button field will automatically navigate to the next step. Conditional steps can be set in the Next step condition component.
      

      Image Added

3. Create subpages based on the template that contains the Form Step component (created in 1. above) for the subsequent steps of the form.
   
   1. Add field sets and fields on the substep forms. Submit button fields will automatically navigate to subsequent or conditional steps and the final button will submit the form.
      Image Added  Image Added  Image Added

Configuring form settings

Form settings are configured in the Form component.

Form tab

Submit settings tab

Email tab

Confirmation email tab

Field sets

The purpose of a field set is to group fields that logically belong together:

• Before you can add any fields on the form you need to add at least one field set component.
• You can add as many field sets as necessary.
• Use the Title field to distinguish field sets or include introductory text.
• Individual fields components are added as subcomponents in a field set.
• Component definition: formGroupFields

Image Added

Fields

Field components are added within a field set.

Available fields:

Field	Description	Image
Input	Single line text input or text area. Maximum input length option. Component definition: formEdit. Advanced options: Not all input types and attributes are supported in all browsers. Types HTML5-compliant input type. Color <input type = color> . To select a color from a pop-up color picker Image Added Email <input type = email>. Email field. Most browsers automatically validate content. Additionally, you can use E-mail validator. Image Added Password <input type = password> . Password field. The characters are masked with asterisks or circles. Image Added Search <input type = search>. Search field. Behaves like a regular text field. Text <input type = text>.  Standard text field. Url <input type = url>. For fields that should contain a URL address. Most browsers validate automatically.  Image Added Attributes Placeholder Hint that describes the expected value.  Image Added Pattern Regular expression that the input value is checked against. For example [A-Za-z]{3} for a three letter country code. Please note that this attribute has no effect at this time. We are aware of this issue and working on a bugfix for this. Jira server Magnolia - Issue tracker columns key,summary,type,created,updated,due,assignee,reporter,priority,status,resolution serverId 500b06a6-e204-3125-b989-2d75b973d05f key MGNLFORM-296 As a temporary workaround, you can configure the regex expression as a separate validator for the field under /modules/form/config/validators . Image Added Pattern description Use the field description to help guide the user instead. Read only Boolean attribute that sets the field as read-only.User cannot enter input but can tab to it, highlight it, and copy from it. Disabled Boolean attribute that disables the input field. Field is unusable and unclickable. Typically used to prevent user from entering input until another condition is met. Image Added Autofocus Boolean attribute that places the cursor in the focused field on page load. Autocomplete Enables autocomplete which allows the browser to predict the value based on earlier typed values. Submit information and then reload the page to test. Image Added	Image Added
Number or date	Number or date field. Maximum input length option. Component definition: formNumber (extends formEdit). Advanced options: Not all input types and attributes are supported in all browsers. Types HTML5-compliant input type. Date <input type = date>. To enter or select a date. Image Added Datetime <input type = datetime>. To enter or select a date and time with a timezone.  This type is no longer supported by the latest HTML standards, see https://html.spec.whatwg.org/dev/input.html#the-input-element https://www.w3.org/TR/html5/sec-forms.html#the-input-element Modern browsers may differ in how they render this type, most of them displaying a simple textfield instead. Image Added Datetime-local <input type = datetime-local>. To enter or select a date and time (no time zone). Image Added Month <input type = month>. To enter or select a month and year. Image Added Number <input type = number>. To enter or select a numeric value. Image Added Phone number <input type = tel>. For fields that should contain telephone numbers. Only supported in Safari 8. Range <input type = range>. For fields that should contain a value within a range.  Image Added Time <input type = time>. To select a time (no time zone). Image Added Week <input type = url>. To select a week and year. Image Added Attributes Read only See Input field. Disabled See Input field. Autofocus See Input field. Autocomplete See Input field. Minimum Minimum value for the field. Maximum Maximum value for the field. Step Number intervals for the field, for example if step="3", legal numbers could be -3, 0, 3, 6, etc..	Image Added
Text field group	Groups text fields next to each other. The Group dialog has a single field that does not display on the page. Assign this name to reference the group with FreeMarker tags. The subcomponents are Text fields, i.e. Input fields without advanced options. Component definition: formGroupEdit that nests  formGroupEditItem  components.	Image Added
Selection	Checkbox, select and radio buttons. Multiple selection, default value and orientation options. Component definition: formSelection.	Image Added
File	Upload file component. In multistep forms this is only available on the last step. Component definition: formFile.	Image Added
Submit button	Submits the form. Can be labelled as required. Cancel button and Back button (mulitstep forms) options. Component should be added at the end of the form. Component definition: formSubmit.	Image Added
Hidden	Single hidden line input or text area. Does not display on the page. Used to pass on values to the form processors in the same way as other data entered by a user. Component definition: formHidden.
Honeypot	This is an invisible field that you can add to the page to intercept bot attacks. Component definition: formHoneypot.	Image Added
Form summary	Displays a table with parameters and/or values of the steps in a multistep form. Component definition: formSummary

Conditional steps

The Condition list component provides optional, additional business logic to a multistep form . 

• The component is added automatically after a Submit button field, as an optional area.
• Allows you to set conditions for subsequent steps in a multistep form.

• Allows you to define the page the user is directed to, dependent on their entry in a former step.

Field validators

Validators are used to ensure that form data is entered in the correct format. For example, an email address should follow established syntax where a local part is followed by the @ character and a domain: john.doe@example.com.

  Choose a validator for appropriate fields in the Validation field. 

  Image Added

 When field validation passes, the value is submitted. When field validation fails, the field is highlighted in red and when the user attempts to submit the form a notification message identifies the problem. 

 Image Added

Validators are configured in /modules/form/config/validators/:

Image Added

Properties:

  Validator configurations:

Form processors

Form processors configured in the module are responsible for sending submitted form data by email. The processors are executed when the form is submitted. The email content corresponds with the settings configured in the relevant tabs of the Form component.

Processors are configured in /modules/form/templates/components/form/formProcessors.

Image Added

Properties:

Creating a custom form processor

The three example form processors above send the form data in email, but you can write a custom form processor to do almost anything. If you need to store the data in a database or process it in another way, write your own form processor. You can also try the Form2DB App that is a community developed app that saves form data via form processor into the JCR and allows for export to XLS.

For more examples see Form processors in the PUR module. 

You can also create a form processor with server-side JavaScript.

Form components

The form components are configured in /modules/form/templates/components. 

Image Added

Field sets

The purpose of a field set is to group fields that logically belong together:

• Before you can add any fields on the form you need to add at least one field set component.
• You can add as many field sets as necessary.
• Use the Title field to distinguish field sets or include introductory text.
• Individual fields components are added as subcomponents in a field set.
• Component definition: formGroupFields

Image Removed

Fields

Field components are added within a field set.

Available fields:

...

• Single line text input or text area.
• Maximum input length option.
• Component definition: formEdit.

Advanced options: Not all input types and attributes are supported in all browsers.

...

Color

...

Image Removed

...

Email

...

Image Removed

...

Password

...

Image Removed

...

Search

...

Text

...

Url

...

Image Removed

...

Placeholder

...

Image Removed

...

Pattern

Regular expression that the input value is checked against. For example [A-Za-z]{3} for a three letter country code.

Please note that this attribute has no effect at this time. We are aware of this issue and working on a bugfix for this.

As a temporary workaround, you can configure the regex expression as a separate validator for the field under

/modules/form/config/validators .

...

Image Removed

...

Pattern description

...

Read only

...

Disabled

...

Image Removed

...

Autofocus

...

Autocomplete

...

Image Removed

...

...

• Number or date field.
• Maximum input length option.
• Component definition: formNumber (extends formEdit).

Advanced options: Not all input types and attributes are supported in all browsers.

...

Date

...

Image Removed

...

Datetime

...

<input type = datetime>. To enter or select a date and time with a timezone. 

This type is no longer supported by the latest HTML standards, see

• https://html.spec.whatwg.org/dev/input.html#the-input-element
• https://www.w3.org/TR/html5/sec-forms.html#the-input-element
  

Modern browsers may differ in how they render this type, most of them displaying a simple textfield instead.

...

Image Removed

...

Datetime-local

...

Image Removed

...

Month

...

Image Removed

...

Number

...

Image Removed

...

Phone number

...

Range

...

Image Removed

...

Time

...

Image Removed

...

Week

...

Image Removed

...

Read only

...

Disabled

...

Autofocus

...

Autocomplete

...

Minimum

...

Maximum

...

Step

...

...

• Groups text fields next to each other.
• The Group dialog has a single field that does not display on the page. Assign this name to reference the group with FreeMarker tags.
• The subcomponents are Text fields, i.e. Input fields without advanced options.
• Component definition: formGroupEdit that nests  formGroupEditItem  components.

...

...

• Checkbox, select and radio buttons.
• Multiple selection, default value and orientation options.
• Component definition: formSelection.

...

...

• Upload file component.
• In multistep forms this is only available on the last step.
• Component definition: formFile.

...

...

• Submits the form.
• Can be labelled as required.
• Cancel button and Back button (mulitstep forms) options.
• Component should be added at the end of the form.
• Component definition: formSubmit.

...

...

• Single hidden line input or text area.
• Does not display on the page.
• Used to pass on values to the form processors in the same way as other data entered by a user.
• Component definition: formHidden.

...

• This is an invisible field that you can add to the page to intercept bot attacks.
• Component definition: formHoneypot.

...

...

• Displays a table with parameters and/or values of the steps in a multistep form.
• Component definition: formSummary

Conditional steps

The Condition list component provides optional, additional business logic to a multistep form . 

• The component is added automatically after a Submit button field, as an optional area.
• Allows you to set conditions for subsequent steps in a multistep form.

• Allows you to define the page the user is directed to, dependent on their entry in a former step. 

  Hide block
  Image Removed Image Removed

Field validators

Validators are used to ensure that form data is entered in the correct format. For example, an email address should follow established syntax where a local part is followed by the @ character and a domain: john.doe@example.com.

  Choose a validator for appropriate fields in the Validation field. 

  Image Removed

 When field validation passes, the value is submitted. When field validation fails, the field is highlighted in red and when the user attempts to submit the form a notification message identifies the problem. 

 Image Removed

Validators are configured in /modules/form/config/validators/:

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

Properties:

  Validator configurations:

...

...

...

...

...

...

...

...

Form processors

Form processors configured in the module are responsible for sending submitted form data by email. The processors are executed when the form is submitted. The email content corresponds with the settings configured in the relevant tabs of the Form component.

Processors are configured in /modules/form/templates/components/form/formProcessors.

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

Properties:

...

required

Form processor node.

...

<form processor name>

...

required

Name of the form processor.

...

class

...

...

enabled

...

optional , default is false

Enables and disables the processor

...

loggerName

...

required

The logger name. Only relevant for trackEmail processor.

Creating a custom form processor

The three example form processors above send the form data in email, but you can write a custom form processor to do almost anything. If you need to store the data in a database or process it in another way, write your own form processor. You can also try the Form2DB App that is a community developed app that saves form data via form processor into the JCR and allows for export to XLS.

For more examples see Form processors in the PUR module. 

You can also create a form processor with server-side JavaScript.

Form components

The form components are configured in /modules/form/templates/components. 

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

...