8. Contact forms

In this chapter you will learn how to create a contact form for your TYPO3 website. With this form you are able to add/edit the fields, set a receiving e-mail address and redirect to a thank you page. The form consists of two steps; first creating the field template of the form, and then adding the form template as page content.

All form templates are listed in a left-side menu in 'Forms' section, where you can also create a new form with a help of the blue button. (8.1.1)

After pressing 'Create a new form' button, a popup appears, where you need to add a form name (1) and form storage (2) and then press 'Next' button. (8.1.2)

'Form storage' refers to a folder in the filelist. If there is no 'Forms' folder available, please select 'User_upload' in the drop down menu.

After automatic processing of step 2 and 3 another popup will appear (8.1.3), where you just need to press 'Next' button.

As a result you will see this working area: (8.1.4), where are 3 main sections:

  1. The left hand side shows you the structure of a form, which can be a single page or multiple pages to create a multistep form.
  2. The center area helps you to work with elements within a form/page, where you can create the fields.
  3. The right hand side contains main information of the form, if the root of the form is selected in the left hand side. Here you will be able to change the name of form and also add finishers, which defines how the form should be posted, receiving email address etc. When creating fields, specific field information will also be shown in this section.

If you have already created forms, you will find them listed when selecting 'Forms' in the left-hand menu. To create a new form, click either of the plus icon buttons. (8.1.5)

To add new fields to your form, press 'Create new element' button (8.2.1)

A new popup area will appear, where you can select what kind of field you wish to add. (8.2.2)

After selecting the preferred field type, you can set its properties in the right-hand side. 
Here you can add the label/name of the field (1). There is also an option to add a placeholder (2), which is a text shown inside the field, that can contain short instructions (When the visitor clicks inside the field, this text is automatically removed). Another option is to add a value to the field (3). This text has the same function as the placeholder, with the difference that is is not removed automatically when the visitor clickes inside the field. The field can be set to be required (4) so that it is not possible to post the form unless filled out.
The 'Validators' section (5) contains options to validate the field - this is used, for example, to make sure email input field is validated for a correct email address. (8.2.3)

After adding fields to the form, don't forget to save! (8.2.4)

To move the field, hover over it, click and drag it to move in place.
To delete a field, hover over it, so that a trash can icon appears. Click the trash can to remove the field. (8.3.1)

After adding all the fields and their properties, click 'Settings' button to open the information on how the form should behave.
Here you can edit the Form name (1), name of submit button (2) and add finishers (3) - this is what should happen when the form i posted: with an email to sender, email to receiver, redirect to a page, delete uploads or save form after sending and in some cases a confirmation message.

NOTE! The order of these finishers are very important. Posting processes should always come first, sending the email to reciever and sender. After that it should save the form and then delete uploads. The last finisher should be redirect to a page or confirmation message, letting the sender know that the message was sent.


Each finisher has a set of options, that should be filled in.
Each field has a dropdown menu, to be able to select already created fields in from the form, in order to make selection process easier. (8.4.2)

Email to sender (8.4.3): This feature is not yet fully implemented, but will in the future send and email to the visitor, after posting, containing the information they filled out in the form. You can add a subject, recipient address (should be set to the email field in the drop down menu) and sender email address. These are required fields and other fields are optional.

Email to receiver (8.4.4): This finisher sends an email, wil form input to you/your company and the subject, recipient address and sender address are required fields, other fields are optional.

Redirect to a page: This finisher allows you to redirect the visitor, after sending a message via the form, to a separate 'Thank you' page. First create a 'Thank you' page that is set to be hidden in the menu. Then you can create the link to the 'Thank you' page by using the PID (Page ID number, which you can find by hovering the cursor over the page icon of the page in the page tree) or you can just choose a page from the page-tree by clicking the 'Page' button. (8.4.5)

Save form after send (8.4.6): This finisher will save the form data on designated page, pasting the page ID number or choosing the preferred storage page from the page tree by clicking 'Select storage' button.

Create a new element on the page and go to the 'Form elements' tab. Select the 'Mail form' element (8.5.1). 

In the 'General' tab you can see that the content element type 'Form' is selected (1). 
The element uses the regular header field (2) and the header type/size can be set below (3). But note that the form name will also be shown as a header. It is possible to set alignment for the header (4) and in the link field (5) you can insert the link to any page of a site or to a file, or to another site or even to email. Note that linking the header will change the appearence of the header. (8.5.2)

After filling out the necessary parameters in the general tab, move on to the 'Plugin' tab. Here you need to select which form template to show, by selecting it in the dropdown menu.  (8.5.3)

Press OK in the popup to apply selected form template. (8.5.4)

By checking the 'Override finishers' checkbox, you are able to set specific finishers for this particular form. After checking the box, click 'OK' in the popup window. The available finishers will now be presented as tabs. (8.5.5)

Then 'Save and close' the element.

Simply select 'Forms' in the control panel, and use the trash can icon to delete a form. (8.6.1)