Subscription Form

This page contains examples of the usage of the Subscription Form component, including different layout configurations and color variations.

A simple Honeypot mechanism is included. See Forms for more detail.

The Subscription Form uses the double opt-in mechanism, requiring the user to verify its email address and confirm interest:

1. The subscription process is not fully automated: it requires a backend operator to process subscription requests. When a potential subscriber enters its data, a technical email will be sent to the backend operator with all data entered in the form.
2. After the user confirms the subscription, a second technical email will be sent to the operator with the subscription confirmation for this user.

The component comes with a minimal set of components. Those can be deleted and more components can be added to enhance the form.

There is only a compulsory field: the email input. An error message will be shown if it is not present or named as required. See Error Message example in action.

Default

In this example, the component is shown with the default configuration and the minimal set of components provided:

• Email input
• Terms and condition acknowledgment

By default, the form elements take the full width that is available, but it is possible to adjust the width of each element individually using the AEM layout mode.

Extended

This example shows how the Subscription Form can be extended with more input fields.

All data entered in this fields will be sent to a back-end operator in a first email when the user submits the form.

Each email subject is configured independently. For technical emails, it can include a placeholder ${usermail} which will be replaced with the email of the subscriber. This behaviour is showcased in the first technical email.

Error message

In this example, the compulsory field "email-input" has been removed from the default Subscription Form. 

The error message will be shown until editor adds the corresponding Text field with name "email-input" and Constraint set to "Email".

This message is only shown in editor mode. If the message is ignored and the form is published, it will throw a 500 error when submitting the form.

Subscription Form inside a responsive Container

The Subscription Form can be part of a responsive layout when it is placed inside a Container that is configured with the responsive grid option. Using the AEM layout mode, it is then possible to adjust the width of the Subscription Form as a whole.

Subscription Form inside a Column Control

The Subscription Form can be placed inside the Column Control component to achieve different layouts.

Container and background styles

When the Subscription Form component is placed inside a Container, its styles are adapted to the background colour of the Container.