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 Video tutorials Pieces of advice
Step by step
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.
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.
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
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 ↗
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
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.
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.
toujou element library
Text elements ❯
Teaser elements ❯
Blockquotes ❯
Teaser cards ❯
Media elements ❯
Map elements ❯
Blog elements ❯