--- title: "Form Text Element" description: "The Form Text Element can be used for Informtion like Name, Address, or Mail etc. Every Form Text setting can by set to \"required\"." path: https://www.eonshowroom.eon.com/en/specials/form-elements/form-data-input/form-text-element.html lastModified: 2026-02-25T08:21:55.047Z --- # Form Text Element # Form Text Element ### Information requested Some Text **Type Text (Default):** Example of the Default Setting of the Form Text. Here you can put in any Kind of Text in one Line. Text Area **Type Text Area:** Example of Text Area Setting. It is possible to put every Text freely with Multi Lines, like for Example a Comment. Some Text wit Info Icon [Info Icon Key: info-icon-1] [Info Icon Aria Label: Tooltip] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ## 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-1] **Type Text (Default) with Info Icon:** Example of the Default Setting of the Form Text with an additional Info Icon. Here you can put in any Kind of Text in one Line. [How to Configure](#how-to) ### Description The Form Text Element Component can be used to offer an Option to enter textual Information, like for Example Name, Address, Mail, or Comment and so on. - Different Types are available - Can be made required [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/form-input--interactive) ### Inspirations ### Information requested Mail **Type Email:** Example of the Mail Setting. Here the Main Structure of a Mail Address is required. Tel. Number **Type Tel:** Example of the Telefon Setting. It is used to get Telephone or Mobile Numbers. Password **Type Password:** Example of the Password Setting. Everything you put in here is hidden by Default, but by clicking on the Eye on the right Side of the Field, User can switch to viewable Letters. Prize **Type Currency:** Example of the Currency Setting. Everything you can put in here are Numbers in Prize Format. In this Example Format of Euro (€) is used. ### Usage Rules & Features ##### Features - Regular Expressions Validation can be used - Different Types are available ##### Properties - Can be made mandatory - Add Help Text and User Messages (for required Hint as well as for Input Validation) ##### Design - If using Currency Input, choose fitting Currency Symbole ##### 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 - Choose best fitting Type for the Purpose of it - After Publishing, check Form sending works as expected - Ensure Mulesoft Integration and Configuration is done [Info Icon Key: info-icon-2] [Info Icon Aria Label: Mulesoft & MT Captcha Integration] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-2] ##### 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-2] ##### 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 ## 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_text-type%3A3-4?fmt=webp) ### Type Selection In Properties Tab of Form Text Field, Editor first needs to choose one of the following Types by selecting it from Dropdown: - Text - Textarea - Email - Tel - Number - Password - Currency ### 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 ### Set Properties Depending on selected Type, different Properties are available. For all Text Field Elements, a Label and an Element Name is required. The Label is visible in the Form, while Element Name is needed for technical Referencing. Moreover, an Help Message can be entered, the Label can be hidden, the Number of Text Lines can be defined, and a Value can be set. ###### Additionally: For **Textarea** Type, the Number of Text Lines and the Textarea Width is configurable. The Text Area Width is calculated by the Average Width of a Number of Characters. That means, if 50 is entered, the Width is the Avarage Width of 50 Characters. Min Value is 50. If Text Width is kept empty, Text Area gets 100% Width of it's Parent Component. For **Currency**, the Kind of Currency is selectable. Available Currencies are: - Dollar e.g. $1,234.56 - Euro e.g 1.234,56 € - Pound Sterling e.g. £1,234.56 - Swedish Krona e.g. 1.234,56 kr - Danish Krona e.g. kr. 1.234,56 - Czech Koruna e.g. 1.234,56 Kč - Polish Zloty e.g. 1.234,56 zł - Hungarian Forint e.g. 1.234,56 Ft - Romanian leu e.g. 1.234,56 Lei ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form_text-text%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form_text-textarea%3A3-4?fmt=webp) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form_text-currency%3A3-4?fmt=webp) #### Info Icon Tooltip For Info Icon an Experience Fragment of a Tooltip is needed. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ### Add Info Icon Except of Type Currency and Type Textarea, for all other Types an Info Icon can be added. Selecting "Enable Info Icon" Checkbox reveals a new Tab, called Info Icon. In this Tab, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/form_text-constraints%3A3-4?fmt=webp) ### Configure Constraints In Constraints Tab of Form Text Field, Editor can choose, if this Field should be required. If so, also providing a Required Message is advisable. Furthermore, Editor can choose to check Input Patterns using Regular Expressions. Therefore, it can be choosen from a List*, which Pattern should be validated. Beside that a Custom Error Message for Input Validation must be provided. * To extend the List of Patterns, Editor can use FoundationNG RegEx Config (DEVELOPERS ONLY!).