--- title: "Form without MTCaptcha and with Success Message" description: "There are many different Form Elements addable to the Form Container to build up any kind of Form." path: https://www.eonshowroom.eon.com/en/testing-only/forms/janosch/back-up---do-not-touch1/form-nomt-success.html lastModified: 2024-03-19T15:10:41.509Z --- # Form without MTCaptcha and with Success Message ## Form Container The Form Container itself is not Background sensitive. It only should be used in 6-, 8- or 9-Column Grids, otherwise the design will not be displayed as expected. There are many different Form Elements addable to the Form Container to build up any kind of Form. - Different Form Elements can be used inside a Form Container - With the Form Container and its Elements, its possible to build up any kind of Form - Actions for Form Data can be configured on Global Level #### Editor How-To [jump directly to "how to use" section](#how-to) ## Design Principles ### Information requested Title - Mrs - Miss - Ms Name Last Name Gender Male Female other Address Email Phone Number Birthday help Date help Comment I like a Switch What do you like ? I like AEM [Info Icon Key: info-icon-1] I like Forms [Info Icon Key: info-icon-2] [Info Icon Aria Label: asdfasdfasdfasdfsaf] Which Form Element Catagory do you like best? - Data Inputs - Selectors - Others [Info Icon Key: info-icon-3] [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. ### 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. ## How to configure? Any kind of Form Element can be set inside a Form Container. Also there are different action for the Form Data choosable. #### Keep in Mind As precondition to make Forms with Mulesoft work, Mulesoft Integration is needed! [Read more about Mulesoft Integration](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages/foundationng-form-config.html) Precondition ### Choose Form Action Type At first editor needs to select a Form Action Type "Mailjet". Available action types are "JSON to endpoint", "Mail" and "Mailjet". Depending on the selection, the dialog will look different. But "Mailjet" should be selected! #### Keep in Mind The Form Action Type "Mailjet" is recommanded to be choosen. For "Mailjet" an HTML-Mail template is needed. (Read more about it [here](#template)). ### Action Type "Mailjet" If Action Type "Mailjet" is selected, available options are: - Send E-Mail to Customer Decide if an E-Mail should be sent to the Customer. - Send E-Mail to Support Decide if an E-Mail should be sent to the Support. - User Feedback Decide which kind of User Feedback should be given. It can be either a Thank You Page or a Success Message. - Error Message Provide an Error Message that will be only shown to an User if an Error occurs. Threfore, an Icon must be selected, a Headline and some Text must be entered, and a Color Scheme can be choosen. - HTML ID A valid HTML5 ID must be entered. It should only contain Letters, Numbers, Dashes, and Underscores and should start with a Letter. ##### Send E-Mail to Customer or Support If an E-Mail should be sent to the Customer and/or to Support, for each the following Options are available: - Subject Here editor needs to enter the Subject Line for the Mail that will be sent for each submitted Form. - From Here editor needs to enter the Mail Addresses that the Message is considered to be sent from. > "From" Mail-Address should be an @eon.com adress. Otherwise, it needs to be added to a White List. To add a Mail-Address to the White List, please contact Urs Kramer. - E-Mail To Here editor needs to enter Mail Addresses where the Messages will be sent to. For sending a Mail to an Address that gets entered in the Form, editor needs to add the Input Value of the Form Element, where the Mail is entered,**in "E-Mail To" field as First Element in the Form of: > ${fieldname} - CC email addresses (optional) Here editor can enter Mail Addresses where the Messages will be sent to as a Copy. - E-Mail template A Path to the Mail Template that should be used. Editor can add the following manually to the end of the path of Mail Template, but do not need to do it anymore: > "/jcr:content/data/master/mailbody.json" Read more about Mail Templates [here](https://www.eonshowroom.eon.com/en/specials/form-container.html#template). ##### Provide User Feedback Decide which kind of User Feedback should be given. It can be either a Thank You Page or a Success Message. - Thank You Page If Thank You Pages is choosen, editor needs to provide URL to the Thank You Page. User will be redirected to this Page after successful Form Submission. - Success Message If Success Message is choosen, editor needs to select an Icon, provide a Headline and some Text, and optional a Color Scheme can be choosen. By default it is Bordeaux. It will then be shown to User after successful Form Submission. ### Form Elements Editor can set any kind of [Form Element](/content/foundationNG/en/specials/form-elements.html) inside the Form Container. ### E-Mail Template An E-Mail Template is an HTML Template that can be used for sending an E-Mail using Mailjet. Each E-Mail from a Form Submit will then look like defined in the Template. Editor can find an Example Template using E.ON Brand Design in DAM at: > /dam/project-name/mail-template This Example Template needs to be adjusted to the needs of the Form and its purpose. It can be either edited in DAM directly, or via Download in an HTML Editor of choice and newly uploaded. To use Input Values of the Form, call the Values by the following Structur: > ${elementname} The Element Name here is always the "Element Name" of the Input Field that is refered. When the Form is submitted, the *${elementname}* will be replaced by the Input Value of the corresponding Field in the sended E-Mail. #### Keep in Mind For the technical name, the so called "Element Name": - Just use Lower Case Letters - No Special Signs - No Blancs - No Dashes - No Numbers Beside that, if using the provided Example Template, editor must adjust Legal Information and Logo etc. to the needs!