--- title: "Form Answer Card Element" description: "The Form Answer Card Element can be used to offer an Possibility to select different Options." path: https://www.eonshowroom.eon.com/en/specials/form-elements/form---selectors/form-answer-card-element.html lastModified: 2025-10-01T07:52:04.345Z --- # Form Answer Card Element # Form Answer Card Element ![Feel the Spring](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/brand-evolution/GettyImages-129991559.jpg) Spring ![Take a Seat](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/nature/seats_by_the_sea.jpg) Summer ![Autumn Sun](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/nature/sunset_on_wheat_field.jpg) Autumn ![Walk on a Winter's Day](https://www.eonshowroom.eon.com/content/dam/foundationNG/images/nature/teaserbild_waermekaelteloesungen.jpg) Winter [How to Configure](#how-to) ### Description The Form Answer Card Component can be used to offer an Possibility to select different Options. - Three different Options for Image Area (Image, Icon, or Pictogram) - Single or Multi Selection is possible - Can be made required [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-answer-card-answer-card-group--interactive) ### Inspirations [Solar Energy: solar](https://www.eon.de/de/pk/solar/photovoltaik.html) [Wind Energy: wind](https://www.eon.com/en/about-us/media/press-release/2016/global-wind-day.html) [Real Estate](https://www.eon.com/en/business-customers/sectors/real-estate.html) [Commercial](https://www.eon.com/en/business-customers/sectors.html#SectorBySector) [Industry](https://www.eon.com/en/business-customers/sectors.html#SectorBySector) [Public & Municipal Entities](https://www.eon.com/en/business-customers/sectors/public---municipal-entities.html) ### Usage Rules & Features ##### Features - Three different Options for Image Area (Image, Icon, or Pictogram) are available - Can Link to different Pages ##### Properties - Can be made mandatory - Add Required Message ##### Design - Single or Multi Selection is possible ##### 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-1] [Info Icon Aria Label: Mulesoft & MT Captcha Integration] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ##### 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-1] ##### DONT's - Do not use it in smaller Grid then 6 Column Grid - Try not to use it outside of Form Container - Any Kind of Form Element can be used only inside a Form Container - Do not use it in Form Grid - When using the Full Width option for images, only decorative images should be used – not product images ## 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-element_answer-card__properties%3A1-1?fmt=webp) ### Form Answer Cards Properties The Form Answer Card needs an Element Name. This Element Name is needed for technical Referencing. Furthermore, it is possible to choose Horizontal View and / or Multi Select. Moreover, Editor can decide what to show in Image Area. It can be Image, Icon, or Pictogram. In addition, the Full Width property is available. This Option allows the Form Answer Card to span the entire Width of its Container, which is especially useful for layouts where move Visual emphasis or better Alignment with other Full-Width elements is required. ### Rules for the Element Name: The Element Name is a technical Name and therefore, there are some Rules to make it work: - Name must be UNIQUE - Just use lower Case Letters - No special Signs - No Blancs - No Numbers ##### Keep in Mind When more than two Answer Tiles are used and the Horizontal View is not disabled, the Grid is filled automatically without requiring the Full Width option. ### Options for Answer Cards with Image Per Answer Card, Editor needs to click on Add Button. Then, following Options are available: - Card Label Enter Label that should be displayed on the Card. - Option Value Enter Value that should be send with the Form. - Redirect URL If wanted, clicking on the Card can redirect to another Page. Therefore, URL needs to be added. If it should not redirect to another Page, this Field should be kept empty. - Open in new Window If Redirect URL is configured, it can also be opened in new Window by checking this Checkbox. - Option Image Path Select an Path to an Image. Image Ratio of 1:1 will be automatically choosen by the Component. - Decorative Image Decorative Image is selected by default. If Editor wants to enter Alt-Text and Title, it must be unchecked. An Alt-Text (Alternative Text) is a brief Description of an Image that provides Context used by Assistive Technologies, like e.g. for visually impaired Users, or when Images are disabled. While the Title Tag of an Image is an optional HTML Attribute that can be used to provide additional Information or a Tooltip when a User hovers over the Image. It is not a Replacement for the Alt-Text. **But: Do not use it, if it does not bring any Value to the (visually impaired) User.** ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_answer-card_options-for-img%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_answer-card_options2-for-img%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_answer-card_options-for-icon%3A3-4?fmt=webp) ### Options for Answer Cards with Icon Per Answer Card, Editor needs to click on Add Button. Then, following Options are available: - Card Label Enter Label that should be displayed on the Card. - Option Value Enter Value that should be send with the Form. - Icon Select an Icon from Icon List. - Redirect URL If wanted, clicking on the Card can redirect to another Page. Therefore, URL needs to be added. If it should not redirect to another Page, this Field should be kept empty. - Open in new Window If Redirect URL is configured, it can also be opened in new Window by checking this Checkbox. #### Keep in Mind To get more / other Icons on your Icon List, just use FoundationNg Bullet List Icon Config. [Read more about FoundationNg Bullet List Icon Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_answer-card_options-for-picto%3A3-4?fmt=webp) ### Options for Answer Cards with Pictogram Per Answer Card, Editor needs to click on Add Button. Then, following Options are available: - Card Label Enter Label that should be displayed on the Card. - Option Value Enter Value that should be send with the Form. - Pictogram Select a Pictogram from Pictogram List. - Redirect URL If wanted, clicking on the Card can redirect to another Page. Therefore, URL needs to be added. If it should not redirect to another Page, this Field should be kept empty. - Open in new Window If Redirect URL is configured, it can also be opened in new Window by checking this Checkbox. #### Keep in Mind To get more / other Pictograms on your Pictogram List, just use FoundationNG Pictogram Config. [Read more about FoundationNG Pictogram Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form-element_answer-card_constrains%3A1-1?fmt=webp) ### Configure Constraints In Constraints Tab of Form Answer Card, Editor can choose, if this Field should be required. If so, also providing a Required Message is advisable.