--- title: "Form Container" description: "There are many different Form Elements addable to the Form Container to build up any kind of Form." path: https://www.eonshowroom.eon.com/en/specials/form-container.html lastModified: 2026-04-22T07:12:05.609Z --- # Form Container # Form Container [How to Configure](#how-to) ### Information requested ##### Register for an Imaginary Newsletter First Name Last Name Email Birthday help I have read the [Terms and Conditions](#). Please send me your Imaginary Newsletter. **Register me now** ### Description The Form Container Component is a Parent Component to create a Form with all needed [Form Elements](/content/foundationNG/en/specials/form-elements.html). With the Form Container Component, Editor can create nearly any Kind of Form. Actions for Form Data can be configured on Global Level including HTML Templates for Success Mails, and Error Message, as well as Success Message, or Thank You Page. - Different Form Elements can be used inside a Form Container - With the Form Container and its Elements, its possible to build up any Kind of Form - Actions for Form Data can be configured on Global Level [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-form--interactive) ### Inspirations ### Information requested Title - Mrs - Miss - Ms Name [Info Icon Key: info-icon-1] [Info Icon Aria Label: info_one] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ![Title](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/abstract_pattern_network_red_blue-1?fmt=webp) ##### Opening on Hover with Image This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-1] Last Name [Info Icon Key: info-icon-2] [Info Icon Aria Label: info_two] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-2] Gender Male Female Other [Info Icon Key: info-icon-3] [Info Icon Aria Label: info_5] Birthday help [Info Icon Key: info-icon-4] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-4] ![Title](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/abstract_pattern_network_red_blue-1?fmt=webp) ##### Opening on Hover with Image This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-4] ##### Contact Data Email Phone Number Address Date help Comment Text Area with an Avarage of 75 Characters per Line I like a Switch [Info Icon Key: info-icon-5] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-5] ##### Opening on Click This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-5] What do you like ? I like AEM I like Forms [Info Icon Key: info-icon-6] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-6] ##### Mulesoft & MT Captcha Mulesoft and MT Captcha are both needed for Forms. Mulesoft is a Preconditions to use Forms in Foundation 2020 Project. Furthermore, MT Captcha is a Service to make it harder for Bots (no real Users) to misuse a Form. [Read More about Mulesoft & MT Captcha Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html) [Info Icon Content End: info-icon-6] Which Form Element Catagory do you like best? - Data Inputs - Selectors - Others [Info Icon Key: info-icon-7] [Info Icon Aria Label: info] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-7] ## Opening on Hover This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-7] About what do you want to learn more ? Forms Configuration Others Choose Topics you would like to know more about Maintaining Form Container Editing of Mail Templates Adding Form Elements About which Configuration do you want to know more ? You can also check [Documentation on Showroom about Configuration Pages](/content/foundationNG/en/aem-basics/configuration-pages.html). Let us know your Questions Send an Image Only PNG or JPG with max 4mb I have read the [Terms and conditions](#). Please send me all your Stuff. I will buy it all. [Info Icon Key: info-icon-8] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-8] ##### Red 500 Tooltip This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Link to How-To](#how-to) [Info Icon Content End: info-icon-8] **Submit** ### Usage Rules & Features #### Keep in Mind - As Precondition, to make Forms with Mulesoft work, Mulesoft Integration is needed! - Forms can be used as Experience Fragments, but please use Component - Experience Fragment Mulesoft Form. [Read more about Mulesoft Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html) [Read more about Experience Fragments](https://www.eonshowroom.eon.com/en/specials/experience-fragments-content.html) Precondition ##### Features - Different Form Elements can be used inside a Form Container - Actions for Form Data can be configured on Global Level - Get all Form Data in an Overview ##### Properties - Sending of Form Data as Mail works with Mulesoft - Add custom HTML-Mail Template - Unique HTML - ID needed ##### Design - Configure custom Success Message or redirect to Thank You Page - Configure custom Error Message - Add Form Elements to Form Container to create a Form ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | no | | 4 | no | | 5 | no | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | no | ##### DO's - After Publishing, check Form sending works as expected - Ensure Mulesoft Integration and Configuration is done [Info Icon Key: info-icon-9] [Info Icon Aria Label: Mulesoft & MT Captcha Integration] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-9] ##### Mulesoft & MT Captcha Mulesoft and MT Captcha are both needed for Forms. Mulesoft is a Preconditions to use Forms in Foundation 2020 Project. Furthermore, MT Captcha is a Service to make it harder for Bots (no real Users) to misuse a Form. [Read More about Mulesoft & MT Captcha Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html) [Info Icon Content End: info-icon-9] ##### DONT's - Do not use it in smaller Grid then 6 Column Grid ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_action---type%3A3-4?fmt=webp) ### Choose Form Action Type At first, Editor needs to select a Form Action Type "An HTML Email". Six different Action Types are available. Depending on the Selection, the Dialog will look different. But "An HTML Email" should be selected! For Experts only, if using "JSON to endpoint" Action Type, [UTM Tracking](https://confluence.eon.com/display/ddsmbfoun/UTM+Tracking) is possible. #### Keep in Mind The Form Action Type "An HTML Email" is recommanded to be choosen. For this Action Type an HTML-Mail Template is needed. [Read more about HTML-Mail Template](https://www.eonshowroom.eon.com/en/specials/form-mail-template.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_type-html--email%3A3-4?fmt=webp) ### Action Type "An HTML Email" If Action Type "An HTML Email" is selected, available Options are: - Send E-Mail to Customer Decide if an E-Mail should be sent to the Customer. - Send E-Mail to Customer Decide if an E-Mail should be sent to the Support. - Highlight Necessity Decide if required or optional Fields should be highlighted to the Users. - User Feedback Decide which Kind of User Feedback should be given. It can be either a Thank You Page or a Success Message. - Error Message Provide an Error Message that will be only shown to an User if an Error occurs. Therefore, an Icon must be selected, a Headline and some Text must be entered, and a Color Scheme can be choosen. - Content Too Large Message Provide a Custom Error Message that will be shown to a User if attached Files exceed the allowed size limit (8 MB). Therefore, the Message must appear below the Form and the Send button must be disabled. - HTML ID A valid HTML5 ID must be entered. It should only contain Letters, Numbers, Dashes, and Underscores and should start with a Letter. #### Keep in Mind If Files attached to the File Upload Component are larger than 8 MB, an Error Message will be displayed below the Form and the send Button will be disabled. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_to-customer%3A3-4?fmt=webp) ##### Send E-Mail to Customer If an E-Mail should be sent to the Customer, the following Options are available: - Subject Here Editor needs to enter the Subject Line for the Mail that will be sent for each submitted Form. It is possible to include Data entered in the Form in the Format of: > ${fieldname} - From Here Editor needs to enter the Mail Addresses that the Message is considered to be sent from. > "From" Mail-Address should be an @eon.com adress. Otherwise, it needs to be added to a White List. To add a Mail-Address to the White List, please contact Urs Kramer. - Sender Name Here Editor can enter a Sender Name to allow the User to directly recognize where the Mail is coming from. If no Sender Name is entered, Sender Name will be derived from the Prefix of the From-Mail-Address. - E-Mail To Here Editor needs to enter Mail Addresses where the Messages will be sent to. For sending a Mail to an Address that gets entered in the Form, Editor needs to add the Input Value of the Form Element, where the Mail is entered,**in "E-Mail To" Field as only Element in the Form of: > ${fieldname} All other Mail Addresses should then only be added in CC E-Mail Address Field. - CC E-Mail Addresses (optional) Here Editor can enter Mail Addresses where the Messages will be sent to as a Copy. - E-Mail Template A Path to the Mail Template that should be used. Read more about Mail Templates [here](/content/foundationNG/en/specials/form-mail-template.html). **Be aware that uploaded Files get attached to Support Mail only (not to Customer Mail).** ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_to-support%3A3-4?fmt=webp) ##### Send E-Mail to Support If an E-Mail should be sent to Support, the following Options are available: - Subject Here Editor needs to enter the Subject Line for the Mail that will be sent for each submitted Form. It is possible to include Data entered in the Form in the Form of: > ${fieldname} - From Here Editor needs to enter the Mail Addresses that the Message is considered to be sent from. > "From" Mail-Address should be an @eon.com adress. Otherwise, it needs to be added to a White List. To add a Mail-Address to the White List, please contact Urs Kramer. - Reply-To address Here Editor needs to enter the Mail Addresses to where the User can answer to. - E-Mail To Here Editor needs to enter Mail Addresses where the Messages will be sent to. For sending a Mail to an Address that gets entered in the Form, Editor needs to add the Input Value of the Form Element, where the Mail is entered,**in "E-Mail To" Field as only Element in the Form of: > ${fieldname} All other Mail Addresses should then only be added in CC E-Mail Address Field. - CC E-Mail Addresses (optional) Here Editor can enter Mail Addresses where the Messages will be sent to as a Copy. - E-Mail Template A Path to the Mail Template that should be used. Read more about Mail Templates [here](/content/foundationNG/en/specials/form-mail-template.html). **Be aware that uploaded Files get attached to Support Mail only (not to Customer Mail).** ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_highlight-necessity%3A3-4?fmt=webp) ##### Highlight Necessity Decide if required or optional Fields should be highlighted to the Users. ##### Provide User Feedback Decide which kind of User Feedback should be given. It can be either a Thank You Page or a Success Message. - Thank You Page If Thank You Pages is choosen, Editor needs to provide URL to the Thank You Page. User will be redirected to this Page after successful Form Submission. - Success Message If Success Message is choosen, Editor needs to select an Icon, provide a Headline and some Text, and optional a Color Scheme can be choosen. It will then be shown to User after successful Form Submission. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_thank-you-page%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_success-message%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_parsys%3A4-3?fmt=webp) ### Form Elements Editor can set any Kind of [Form Element](/content/foundationNG/en/specials/form-elements.html) inside the Form Container. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_open-data%3A4-3?fmt=webp) ### Form Data Overview To get an Overview of Form Container Data and Form Element Names in use, Editor can select Form Container and click on Star Icons. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_data-form-overview%3A1-1?fmt=webp) If Editor selects first Star, Overview of Data configured in Form Container is shown. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-container_data-form-element-overview%3A1-1?fmt=webp) If Editor selects second Star, Overview of used Element Names in Input Value Format is shown. The Overview is structured in 3 Columns. First Column shows all Element Names used in Form Container, second Column shows Element Names used in Customer Template for Customer Mail, and third Column shows Element Names used in Support Template for Support Mail.