--- title: "Form Elements" description: "The Form Elements are different Components to create a Form. Their Parent Component is the Form Container." path: https://www.eonshowroom.eon.com/en/specials/form-elements.html lastModified: 2026-04-13T08:34:36.021Z --- # Form Elements # Form Elements ### 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** [How to Configure](#how-to) ### Description The Form Elements are different Compoents to create a Form. Their Parent Component is the [Form Container](/content/foundationNG/en/specials/form-container.html). - Different Form Elements are available - With the Form Container and its Elements, its possible to build up any Kind of Form - Every Form Element can be set to required. [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 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] ##### 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-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 buy 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** ## Overview and Links to existing Form Components ## Form Text Special Components, Forms The Form Text Element can be used for Informtion like Name, Address, or Mail etc. Every Form Text setting can by set to "required". [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form-data-input/form-text-element.html) ## File Upload Special Components, Forms The Form File Upload Element can be used to enable user to upload one or multiple Files, like an Image or an Document. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form-data-input/form-file-upload-element.html) ## Date Picker Special Components, Forms With the Form Date Picker a Date can be entered or selected by the User. [Have a Look ?](https://www.eonshowroom.eon.com/en/specials/form-elements/form-data-input/form-date-picker-element.html) ## Form Checkbox Special Components, Forms With the Form Checkbox Element, Editor can create Checkboxes. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-checkbox.html) ## Form Dropdown Special Components, Forms With the Form Dropdown Element, Editor can create a Dropdown. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-dropdown.html) ## Form Radio Button Group Special Components, Forms With the Form Radio Button Group Element, multiple Radio Buttons can be created, where User can only select one of it. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-radio-button-group-element.html) ## Form Switch Special Components, Forms With the Form Switch Element user can switch between a "true" or "false" Status of one Information. For Example to agree to some Terms. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-switch-element.html) ## Form Compass Special Components, Forms With the Form Compass Element, User can select a Direction. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-compass-element.html) ## Form Slider Special Components, Forms With the Form Slider Element, User can select a Number or a Number Range. For Example to choose a Range for a Group-Size. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-slider-element.html) ## Form Answer Card Special Components, Forms The Form Answer Card Component can be used to offer an Possibility to select different Options. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-answer-card-element.html) ## Form Segmented Button Special Components, Forms The Form Segmented Button can be used to offer a Possibility to select different Options. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-segmented-button-element.html) ## Form Option Picker Special Components, Forms The Form Option Picker can be used to offer an Possibility to select different Options. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-option-picker.html) ## MT Captcha Special Components, Forms MT Captcha adds a Service to the Form to make it harder for Bots (no real Users) to misuse a Form. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---others/form-mt-captcha-element.html) ## Form Hidden Element Special Components, Forms With the Form Hidden Field a hidden Value can be send, which is not visible to the User. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---others/form-hidden-element.html) ## Form Button Element Special Components, Forms With Form Button Element a Submit Button is created. One Submit Button is needed for each Form. Otherwise, Data can not be send. [Have a Look?](https://www.eonshowroom.eon.com/en/specials/form-elements/form---others/form-button-element.html)