--- title: "Form Box" description: "The Form Box Component features colored Background for Form Components and can be used for Structuring and Highlighting Forms" path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---design---layout/form-box.html lastModified: 2026-03-31T14:21:11.142Z --- # Form Box # Form Box ### Information requested ##### Register for an Imaginary Newsletter First Name Last Name Email Do you like an Imaginary Birthday Surprise ? Then, let us now your Birthday: Birthday help I have read the [Terms and Conditions](#). Please send me your Imaginary Newsletter. **Register me now** [How to Configure](#how-to) ### Description The Form Box Component features colored Background for Form Components and can be used for Structuring and Highlighting Forms - Can contain any Form Content - Can be placed inside a Form Container - Helps to structure and highlight Forms [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/page-structure-box--form-structuring) ### 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 Birthday help [Info Icon Key: info-icon-3] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-3] ![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-3] Address Email Phone Number Comment I like a Switch [Info Icon Key: info-icon-4] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-4] ##### 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-4] What do you like ? I like AEM I like Forms [Info Icon Key: info-icon-5] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-5] ##### 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-5] Which Form Element Catagory do you like best? - Data Inputs - Selectors - Others [Info Icon Key: info-icon-6] [Info Icon Aria Label: info] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-6] ## 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-6] 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 by it all. [Info Icon Key: info-icon-7] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-7] ##### 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-7] **Submit** ### Usage Rules & Features ##### Features - Can contain any Form Content ##### Properties - Horizontal and vertical Alignment is possible - Offset Option is Available ##### Design - Structure and highlight Form Content with a colored Background ##### 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 - Use it for Structuring and Highlighting ##### DONT's - Do not put Form Box inside a Form Grid as it is Parent Component of Form Grid ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-box_dialog%3A1-1?fmt=webp-alpha) ### Configure Form Box For a Form Box Component, there are only four different Configuration Options: - Box Color - Alignment (Left or Center) - Vertical Content Position (Top, Center, or Bottom) - Offset (check to align Box Content with Content of the Rest of the Form) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-box_parsys%3A2-1?fmt=webp-alpha) ### Add Content In Parsys of the Form Box Component, Editor can add any Content. All Components (except Form Box itself) that can be added in a Form Container can also be added inside a Form Box.