--- title: "Forms" path: https://www.eonshowroom.eon.com/en/best-practice/accessibility-testing/forms.html lastModified: 2025-10-08T13:05:44.819Z --- # Forms ![Hanging Lamps](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/bulbs_lights_in_front_of_wall%3A2-1?fmt=webp) ## Turn the Lights ON ! The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. [How to Configure Content Header](https://www.eonshowroom.eon.com/en/teasers-and-highlights/content-header.html) # Accessibility Testing for Forms [Info Icon Key: info-icon-1] [Info Icon Aria Label: info about this headline] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ##### 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-1] #### Modal on Page Load [Modal ID: modal-disclaimer] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. [Redirect To Homepage](https://www.eonshowroom.eon.com/en.html) [Form & Form Elements](#form) [Form Message](#message) [Segmented Button](#segmented) [Data Table](#datatable) [Preloaders & Progress Cycle](#preloaders) [Search Result Item](#searchitem) [Tag Pills](#tagpills) [Google Maps with Tag Pills](#mapwithpills) ### Information requested Title - Mrs - Miss - Ms Name Last Name Gender Male Female other ##### Contact Details Address Number Phone Number Email ## Persons to join Slider Birthday help Date help Comment I like a Switch What do you like ? I like AEM [Info Icon Key: info-icon-2] I like Forms [Info Icon Key: info-icon-3] [Info Icon Aria Label: asdfasdfasdfasdfsaf] Which Form Element Catagory do you like best? - Data Inputs - Selectors - Others [Info Icon Key: info-icon-4] [Info Icon Aria Label: info] 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. ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/brand-evolution/GettyImages-129991559.jpg) Spring ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/nature/seats_by_the_sea.jpg) Summer ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/nature/sunset_on_wheat_field.jpg) Autumn ![](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/nature/teaserbild_waermekaelteloesungen.jpg) Winter **Submit Data** ### Example of a filled Form Container. ##### Mulesoft prod/edt/ used With the Form 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 Thank You Page. Some Form Elements can display more than one function. For example the Form Options Element can be used for Radio Buttons and Dropdown Lists. #### Message #### Segmented Button Group #### Data Table Id Name Type Height Weight 1 bulbasaur grass 7 69 bulbasaur 2 ivysaur grass 10 130 ivysaur 3 venusaur grass 20 1000 venusaur 4 charmander fire 6 85 charmander 5 charmeleon fire 11 190 charmeleon 6 charizard fire 17 905 charizard 7 squirtle water 5 90 squirtle 8 wartortle water 10 225 wartortle 9 blastoise water 16 855 blastoise 10 caterpie bug 3 29 caterpie 11 metapod bug 7 99 metapod 12 butterfree bug 11 320 butterfree 13 weedle bug 3 32 weedle 14 kakuna bug 6 100 kakuna 15 beedrill bug 10 295 beedrill 16 pidgey normal 3 18 pidgey 17 pidgeotto normal 11 300 pidgeotto 18 pidgeot normal 15 395 pidgeot 19 rattata normal 3 35 rattata 20 raticate normal 7 185 raticate 21 spearow normal 3 20 spearow 22 fearow normal 12 380 fearow 23 ekans poison 20 69 ekans 24 arbok poison 35 650 arbok 25 pikachu electric 4 60 pikachu **Action Button** **Action Button** **Action Button** **Action Button** **Action Button** **Action Button** **Action Button** #### Preloaders & Progress Cycle ## Preloader Circle ## Preloader Squares ## Progress Circle #### Tag Pills Sample text First sample text Second sample text Third sample text #### Google Maps Tag Pills ## Essen : I. Dellbrügge 7 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Service Cente in Essen, Germany **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## München: Arnulfstraße 203 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at München EDG **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brucker Holt 58 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise%3A3-1?fmt=webp) ### Welcome at E.ON Service GmbH in Essen **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Landshut: E.ON-Allee 5 ![Kid enjoys snow](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_snow%3A3-1?fmt=webp) ### Welcome at Landshut EDG **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Milano MI: Via Amerigo Vespucci, 2 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Milano MI, Italy **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Wien: Wienerbergstraße 9 ![Sun energy](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON-solarpark-tucson_sky%3A3-1?fmt=webp) ### Welcome at E.ON in Austria **Large Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Opernplatz 1 ![Kid enjoys rain](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/kid_enjoys_rain%3A3-1?fmt=webp) ### Welcome at Innogy in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae. ## Essen : Brüsseler Platz 1 ![Wind energy on sea](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Offshore_Wind_Production_Sun_Rise?fmt=webp) ### Welcome at E.ON in Essen, Germany **Small Info-Layer**- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae.