--- title: "Form Grid" description: "The Form Grid Component features different Grid Layouts for Structuring a Form." path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---design---layout/form-grid.html lastModified: 2026-02-04T08:17:30.015Z --- # Form Grid # Form Grid ### 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 Grid Component features different Grid Layouts for Structuring a Form. - 4 different Grid Layouts - Helps to structure Forms [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-form-grid--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 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 What do you like ? I like AEM I like Forms [Info Icon Key: info-icon-4] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-4] ##### 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-4] 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] 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 - Can contain any Form Content. - Support for Dynamic Content Areas. ##### Properties - 4 different Grid Layouts ##### 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 a Form ##### 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-grid_dialog%3A2-1?fmt=webp-alpha) ### Configure Form Grid The only Option of Form Grid is to select a Grid Layout. These four Layouts are available: | Name of the Layout | Columns on Desktop | Columns on Table | Columns on Mobile | | --- | --- | --- | --- | | **D/T 12** | 12 | 12 | 12 | | **D/T 8+4** | 8+4 | 8+4 | 12/12 | | **D/T 4+8** | 4+8 | 4+8 | 12/12 | | **D/T 6+6** | 6+6 | 6+6 | 12/12 |