12. Forms

Learn how to create a simple contact form for your TYPO3 website, as shown in the example on the right. With this form you are able to add/edit the fields and set a receiving e-mail address.

This is a built in standard form with limited functions. If you wish to have a more advanced form, we recommend the plugin Powermail. 

12.1 Creating a form

Create a new element and go to the "Form elements" tab. There you select the "Mail form" element (img 12.1.1). 

NOTE! Before continuing, please save the element. 

Go to the tab "Form", and click the icon on the right of the "Configuration" field, to use the Form wizard for creating the fields (img 12.1.2). 

12.2 Adding fields

To add new fields to your form, you need to be in the Form wizard (Please see section 12.1, image 12.1.2). Go to the tab "Elements". Here you can find "Basic form elements" (1), "Predefined form elements" (2) and "Content elements" (3) (img 12.2.1). You add the fields by dragging the field type, from the list on the left, and into the section on the right.

The basic form elements contain regular fields, like text fields and text area. The predefined form elements has the option of grouped fields, like checkboxes and radio buttons. The content elements allow you to add headers and text in between fields. 

After dragging and dropping a field type, the tab "Options" is selected automatically. Below the section "Label properties" you can now edit the field label. After editing the title, hit Enter on your keyboard or click the green checkbox icon on the right, to save the title (img 12.2.2). 

Move on to the section "Attributes properties" and add a name for the fields. This is used for the system to differentiate the fields. NOTE! This field is not allowed to have any capital letters or special characters, except underscore. It will break the posting process (img 12.2.3). 

The "Validation" section allows you to add validations for the fields, for example if a field should be Required (img 12.2.4). After selecting a validation, each validation has a set of options, a message shown next to the label (1), an error message if not correctly filled out (2), if validation should be stopped if this field is incorrect filled out (3: should always be left unchecked) and wether or not the message should be shown next to the label or not (4) (img 12.2.5).

On the right hand side of the tabs, you can see the fields being added to the form.

NOTE! To be able to see the form in the frontend, you must first save and close the form wizard, and then save the form element.

12.3 Posting options

The tab "Forms" contains all information on how the form should behave and where the form e-mail should be sent. The first section is "Behaviour" and has the option if a confirmation page should be shown before posting the form. It will sum up the information, the visitor has filled out, before actually posting it. This is not a necessary step for a simple contact form (img 12.3.1). 

The next section is called "Prefix" and contains the individual name of the form. It differentiates the forms, if you have more then one on the website. This should be unique for each form. NOTE! This field is not allowed to have any capital letters or special characters, except underscore, because it will break the posting process (img 12.3.2). 

Skip to the section "Post processors", to edit the information on where the e-mail should be sent. Add the e-mail adress of the receiver (1), sender (2) and the subject of the e-mail (img 12.3.3). 

12.4 Redirecting to "Thank you"-page

To redirect the visitor, after sending a message via the form, first create a "Thank you"-page that is set to be hidden in the menu.

In the "Form wizard", go to the tab "Form" and open the section "Post processors". In the dropdown, select "Redirect". This will add a new field. (img 12.4.1). 

To create the link to the "Thank you"-page, either use the PID (Page ID number, which you can find by hovering the cursor over the page icon of the "Thank you"-page, as shown in the image below) or you can add the link address to the "Thank you"-page. (img 12.4.2)

12.5 Deleting fields

To delete fields, hover over it in the right hand section, so that a trashcan and pen icon appear. Click the trashcan to remove the field (img 12.5.1).