9. Simple contact forms

Transcription

1 9. Simple contact 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, set a receiving address and redirect to a thank you page. IMPORTANT!!! For all fields in the Formwizard, mentioned below, you need to hit Enter on your keyboard or click the green checkbox icon on the right, for the added text to actually stick to the field. Otherwise it will disappear when you save. 9.1 Creating a form 9.1 Creating a form Create a new element and go to the "Form elements" tab. There you select the "Mail form" element (Img 9.1.1).

2 9.1.1 NOTE! Before continuing, please save the element. Divider 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 9.1.2) Adding fields 9.2 Adding fields To add new fields to your form, you need to be in the Form wizard (Please see section 9.1, Img 9.1.2). Go to the tab "Elements". Here you can find "Basic form elements" (1), "Predefined form elements" (2) and "Content elements" (3) (Img 9.2.1). You add the fields by dragging the field type, from the list on the left, and

3 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 9.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. The section also contains options to add a placeholder (1), which adds a text inside the field with instructions. If you need to change the type of field (2), this is also possible. Autocomplete (3) can be used to turn on and off autocompletion of a field, that gives suggestions from previous input information. Finally you can set the field to be required (4). (Img 9.2.3).

4 9.2.3 The "Validation" section allows you to add validations for the fields, for example if an field should be validated for a correct address (Img 9.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) and wether or not the message should be shown next to the label or not (3) (Img 9.2.5)

5 9.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. 9.3 Posting options 9.3 Posting options The tab "Forms" contains all information on how the form should behave and where the form 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 9.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

6 unique for each form. (Img 9.3.2) NOTE! This field is not allowed to have any capital letters or special characters, except underscore, because it will break the posting process Skip to the section "Post processors", to edit the information on where the should be sent. Add the adress of the receiver (1), sender (2) and the subject of the (3). (Img 9.3.3) Redirect to "Thank you"-page

7 9.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 "Add a Post Processor", select "Redirect". This will add a new field. (Img 9.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 9.4.2)

8 Deleting fields 9.5 Deleting fields To delete fields, hover over it or click it in the right hand section, so that a trashcan and pen icon appear. Click the trash can to remove the field. (Img 9.5.1)

9 9.5.1 About TYPO3manual.com TYPO3manual.com is an online manual for editors working with TYPO3. It is powered by the web design agency Pixelant AB. Read more about Pixelant About TYPO3 For more information about TYPO3, go to TYPO3.org TYPO3 is a Trademark of the TYPO3 Association. All rights reserved 2017