--- title: "Tutorials: Create and edit forms in TYPO3 – this is toujou." url: "https://www.toujou.com/service/tutorials/page-content/forms/" description: The TYPO3 forms module is fully available to you. Here you learn how to create forms and edit existing ones. date: 2019-03-21 modified: 2022-09-27 --- # Tutorials: Create and edit forms in TYPO3 – this is toujou. 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Tutorials](https://www.toujou.de/service/tutorials/) 4. [Content editing](https://www.toujou.de/service/tutorials/page-content/) 5. [Forms](https://www.toujou.de/service/tutorials/page-content/forms/) Create forms ============ In this tutorial, you'll learn how to create forms and how your toujou back end menu differs from other TYPO3 installations. For functionality, the TYPO3 forms module is entirely at your disposal. [Manual](#c1004994) [Video tutorials](#c1004996) [Pieces of advice](#c1004998) --- Step by step -------------- [ ![](https://www.toujou.de/_assets/processed/MEwJrj0TXf9LJBNKVDd35k69BrUat-WKgVBt3EKqp3g/q:85/c:1918:1077.5280898876:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX2Zvcm11bGFyZV92MTBfZW5fNWI5NWU4MzExMg:t/cb:0906152f98fdfc0e6ee950d0d43e7cd2615cdc65/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvZm9ybXVsYXJlX3YxMF9lbi5wbmc) ](https://www.toujou.de/_assets/processed/tXI5RiUHQBFwdf1UsiJG24r7U7Lw6yPRJ7oJNmVqIF0/q:85/w:1024/h:576/fn:Y3NtX2Zvcm11bGFyZV92MTBfZW5fNzI0NmFmZjQwZQ:t/cb:0906152f98fdfc0e6ee950d0d43e7cd2615cdc65/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvZm9ybXVsYXJlX3YxMF9lbi5wbmc) ### Overview of entries - When you click on the *forms* icon in the back end of your website, you will see an overview of all your forms. With toujou, a simple contact form (*Kontaktformular*) is created by default. - You can edit any form by clicking on its title. - Click on **+ Form name** to create a new form. A new pop-up window will appear. With TYPO3 Version 10 you have the choice between a **blank form** and a **predefined form**. The predefined one uses an existing arrangement of elements from another form. If you choose this one, you have to select the appropriate **form** in the next step (see screenshot). - Further explanation can be found in detail in the [video tutorial below](#c1004996). --- ![](https://www.toujou.de/_assets/processed/CrcyF8pFAlhUiaYeLCj4I29aI4SQVw4KWQ4SE1r5hHE/q:85/w:433/h:243/fn:Y3NtX0Zvcm11bGFyX3JlcGVhdGFibGVfY29udGFpbmVyX2VuXzQxNjI4NDBhZWE:t/cb:17b153f151da625625b42815db4b4bb23e020288/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvZm9ybXMvRm9ybXVsYXJfcmVwZWF0YWJsZV9jb250YWluZXJfZW4ucG5n) ### Querying data for multiple people within a single form - To query specific information such as name and email address for multiple people within a form at once, you can use the *Repeatable Container* element in toujou. This allows you to display all the elements stored in the container bundled multiple times. - First select the **Repeatable Container** from the elements in the form. Then click on the element in the form (right screenshot) to have it displayed within a blue frame. Click on the **+ icon** and select the option *inside* to add more elements to the container. Please note: You are free in the selection and number of elements you can add. - To add more elements in the container, you can also click on an added element inside the container and select the **+icon**. - You can customize the container actions by labeling the buttons for adding and removing. Therefore just type the respective text in the *Copy button* *label* and the *Delete button label.* Also, you can name the container in the *Repeatable Container* field. To define the maximum of repeating options for users, type the number in the *Maximum number of copies text* field. [ ![](https://www.toujou.de/_assets/processed/VmF4jQl7O09YbJTo94vAXWXQDkX3vdJTt7L0lEqmyWc/q:85/w:433/h:244/fn:Y3NtX2Zvcm11bGFyX21laHJlcmVfYWRyZXNzYXRlbl9lbl84ZjRjZDc0OGJi:t/cb:8b2708b35cd5ff39889f1f0e7a396aa08c611fbe/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvZm9ybXMvZm9ybXVsYXJfbWVocmVyZV9hZHJlc3NhdGVuX2VuLnBuZw) ](https://www.toujou.de/_assets/processed/ArFjCeepjrohiLsog8KtkXwRfDbhSigFAR72s9I5nXU/q:85/w:1024/h:576/fn:Y3NtX2Zvcm11bGFyX21laHJlcmVfYWRyZXNzYXRlbl9lbl9hMjIwZTliZjU1:t/cb:8b2708b35cd5ff39889f1f0e7a396aa08c611fbe/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA2X3BhZ2UvZm9ybXMvZm9ybXVsYXJfbWVocmVyZV9hZHJlc3NhdGVuX2VuLnBuZw) ### How to sent a form to different e-mail addresses - If you want a form to be sent to different contact persons, you can use the *Single Select* element in the *Select Elements* area. - First name the field by entering the text in the *Label* field, for example Subject / Contact Reason. - Then enter the subject or reason for contact in the Label field under Options, for example Suppport, Sales or similar. Enter the corresponding e-mail address in the field *Value* and save your settings. - Enter the *Single Select* field with the curly brackets as the destination address in the *E-mail adress* field in the Recipient area of your finisher, for example like this: {singleselect-2}. - In addition, make sure that the field *Sender address* contains noreply@domain.de. Video tutorial via typo3-websites.eu/en ----------------------------------------- [ ![](https://www.toujou.de/_assets/processed/UPXp_evLxPHoaabUxnk-i_xAGq1DhQS-yQXQqAhgX0I/q:85/w:432/h:242/fn:Y3NtX1ZpZGVvX0Zvcm1zX1RZUE8zXzM3NDg0NDA0ZWI:t/cb:791e21a3804fe35ca1b7d990b4e3c6e11785148b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzL1ZpZGVvX0Zvcm1zX1RZUE8zLnBuZw) ](https://www.typo3-websites.eu/fileadmin/global/dateien/videos/further_features_typo3_8.mp4) ### The forms module Get to know the functionality of the forms module in your TYPO3 back end: Create, edit and insert forms. **Duration forms description**: until 9'50'' (13'12" total) [Watch this and more videos on typo3-websites.eu/en ↗](https://www.typo3-websites.eu/en/typo3-videos/) ### **General notes** - If you want to request a date of birth in the form, we advise using a text field with a placeholder. - Make sure that the field *e-mail address* of the sender always contains the address of the domain (e.g. noreply@domain.de). The »text-2« application described from minute 3'05'' is no longer common. --- Pieces of advice ---------------- toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website. Unlike as seen in the video tutorial, with toujou you insert a form once it’s completed through the element library. For that, you can choose the *Mailform* element in the *Widgets* tab. A preview of the default contact form can be [found here](https://www.toujou.de/service/element-library/widgets/#c1002703). Please note that when adding a *redirect to a page* finisher (as demonstrated in the video) you can either redirect visitors to an existing page of your page tree (such as the home page) or to a custom form confirmation page. How to insert new pages into your page tree is explained in the tutorial [Create pages/navigation](https://www.toujou.de/service/tutorials/pages-navigation/). --- ##### Tutorials [Checklist ❯](https://www.toujou.de/service/#c1004820) [Contact data ❯ ](https://www.toujou.de/service/tutorials/contact-data/) [File list ❯ ](https://www.toujou.de/service/tutorials/file-list-module/) [Edit navigation ❯ ](https://www.toujou.de/service/tutorials/pages-navigation/) [Edit page content ❯ ](https://www.toujou.de/service/tutorials/page-content/) [Edit page properties ❯](https://www.toujou.de/service/tutorials/page-properties/) [Responsive & mobile first ❯](https://www.toujou.de/service/tutorials/responsive-mobile-first/) [Yoast SEO ❯ ](https://www.toujou.de/service/tutorials/yoast-seo/) [Redirects ❯ ](https://www.toujou.de/service/tutorials/redirects/) [Blog administration ❯](https://www.toujou.de/service/tutorials/blog-administration/) [Linkvalidator ❯](https://www.toujou.de/service/tutorials/blog-administration/) ##### toujou set-up [Theme ❯ ](https://www.toujou.de/service/toujou-set-up/theme-settings/) [Logo ❯ ](https://www.toujou.de/service/toujou-set-up/logo-settings/) [Font ❯ ](https://www.toujou.de/service/toujou-set-up/font-settings/) [Color ❯ ](https://www.toujou.de/service/toujou-set-up/color-settings/) [Social media ❯ ](https://www.toujou.de/service/toujou-set-up/social-media-settings/) [Analytics ❯](https://www.toujou.de/service/toujou-set-up/analytics-settings/) [Data protection ❯](https://www.toujou.de/service/toujou-set-up/data-protection-settings/) [Website overlay ❯](https://www.toujou.de/service/toujou-set-up/website-overlay/) ##### toujou element library [Text elements ❯ ](https://www.toujou.de/service/element-library/text-elements/) [Teaser elements ❯ ](https://www.toujou.de/service/element-library/teaser-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/element-library/blockquote-elements/) [Teaser cards ❯ ](https://www.toujou.de/service/element-library/card-elements/) [Media elements ❯ ](https://www.toujou.de/service/element-library/media-elements/) [Map elements ❯ ](https://www.toujou.de/service/element-library/map-elements/) [Blog elements ❯](https://www.toujou.de/service/element-library/blog-elements/) #### [Navigation elements ❯ ](https://www.toujou.de/service/element-library/navigation-elements/) [Widgets ❯ ](https://www.toujou.de/service/element-library/widgets/) [Headline element ❯ ](https://www.toujou.de/service/element-library/text-elements/headline-element/) [Combined elements ❯](https://www.toujou.de/service/element-library/combined-elements/)