Por favor, verifica tu edad antes de entrar al sitio*.
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:
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.
In this example, the component is shown with the default configuration and the minimal set of components provided:
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.
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.
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.
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.
Just a couple of steps to get the latest and exciting news about BATcom. Fill in the form and subscribe!
The Subscription Form can be placed inside the Column Control component to achieve different layouts.
Just a couple of steps to get the latest and exciting news about BATcom. Fill in the form and subscribe!
When the Subscription Form component is placed inside a Container, its styles are adapted to the background colour of the Container.
Container with full page width and primary light background
Container with background full page width and primary dark background
Container with default width and secondary light background
Container with default width and secondary dark background