One of the common requests for any website is the need to create a contact us page. This is typically a form that is sent back to an administrator for the website through email. The Contao form generator within the Contao back end can quickly and easily create forms. Additionally, the forms have many options including data formats that can be sent through email, but the tutorial will take you through the more common options. The following quick start guide will walk you through the steps to creating a basic contact us form with the Contao Back End interface.
Using the Contao Form Generator for a Contact Us Page
- Login to the Contao Back End
- Scroll down the Back end modules on the left hand side of the screen unil you find FORM GENERATOR. Click on FORM GENERATOR to open following interface:
Click on the option that says NEW FORM in the right hand side of the interface.
- You will need to fill out parts of the form in order to create it. However, we will only use the basic settings in order to quickly create a contact form (the minimum required is the Title):
Fill out the TITLE using something like "Contact Us", then scroll down until you see the SEND FORM DATA VIA EMAIL (in tiny green print).
- Click on the checkbox for SEND FORM DATA VIA EMAIL and then you will see the following:
- Fill in the Recipient address (email address or addresses that will be receiving the form data) and fill in the Subject field with a title like "Contact Form Data". You can also select the Data Format for how you wish the data to appear on the email (the easiest format to understand would .CSV or .XLS if you are familiar with Excel Spreadsheets) The last option lets you skip fields in the form that have not been filled by the person filling out your contact form.
- Click on SAVE AND CLOSE to save your entries.
- Now we will continue to build the form by creating the fields. Click on FORM GENERATOR again, in the Back End modules list within Contao. This time you should see the form that you have created. Click on the Pencil icon in order to edit the form.
- When you open the form to edit, you should see something like this:
Click on the option labeled NEW FIELD in the top right hand corner. You will need to position the field first.
- Position the field by clicking on the first clipboard (with the arrow pointing down). After you click on the clipboard you will see the Form Generator form:
- To start the form, we're going to create a short explanation that will instruct the user on what to do with the form. Click on the drop-down menu for Field Type, then select EXPLANATION. The explanation form will appear as a small box that you can click into. Click on the box and then type in your instructions for the form. When you have finished, click on save at the bottom of the page. Your entry will then look like this:
Click on NEW FIELD to proceed with creating the form.
- To keep things simple we're just going to create fields for the following information:
||Textfield (Alphanumeric characters)
||Textfield (email address)
||Textfield (phone number)
||Textarea (Extended alphanumeric characters)
The table above indicates the FIELD TYPE used for each new field that we are adding to the contact form. Note that the input validation for each field is in parentheses beside each field type. The input validation allows you to restrict what can go into your entry fields for the form. You will basically go through the same process as you did for creating the explanation field except that you will also be selecting the validation field. Note that each field that you select should also include PLACEHOLDER text. This will gave a visible clue to your users as to the data required to be typed in.
- Remember that everytime you add a new field for the form, you will be need to go back to the beginning and position the field. Normally, the entries will be under the last one entered, but if you make a mistake, you can correct it using the MOVE icon to re-position the field. The last item that you add will be the SUBMIT button. Click on FIELD TYPE and select SUBMIT FIELD, then type in the name for the button.
- Once this is complete, click on SAVE AND CLOSE.
Adding the Form to the Site Structure
- Go back to the main Contao Back End interface and look through the list of modules on the left. Click on SITE STRUCTURE. When the tree structure is opened, click on NEW PAGE.
- Select the position of the new page by clicking on the clipboard icon at the far right. The clipboard icon with the arrow pointing right ()will insert your page within the group to the left. The clipboard icon with the arrow pointing down() will move the new page BELOW the group that you have selected.
- After you position the page, you will need to fill the following form:
Note that the form has been shortened to show only the field you will need to fill in order to complete this tutorial. There are many options, but we are only covering the basic options. Click on the checkbox for PUBLISH PAGE.
- Click on SAVE AND CLOSE.
- Next, go back to SITE STRUCTURE menu again, and this time look for the page that you just added. At the far right of that new page there will be a new icon called "Edit the Articles" that will look like this: . Click on this icon.
- Next, click on the pencil icon that (the edit icon) that looks like this: . After you select this icon, you should see something similar to the following:
Click on NEW ELEMENT in the top right hand corner and you will be asked to position the item. It will need to be right below the top or below any text fields that you may have added on the page. If it's not to your liking after you have added it, you can alway easily re-position the element using the move arrows in the menu.
- Once you have positioned the element, you will be able to choose an Element Type. Click on the drop-down arrow, then scroll down until you find the name of the form you just added.
- Click on SAVE AND CLOSE in order to save the new form entry and placement.
This completes a quick Contact Us page using the Contao back end interface. When you open the webpage you can see the Contao Form in the menu as follows:
If you are interested in getting a quick start on creating pages for Contao, please go to Quick Start to Creating a Page in Contao.