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

  1. Login to the Contao Back End
  2. 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:

    Main Form generator page

    Click on the option that says NEW FORM in the right hand side of the interface.

  3. 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):

    Blank form shown when NEW FORM is selected

    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). 

  4. Click on the checkbox for SEND FORM DATA VIA EMAIL and then you will see the following:

    Send Form Data area

  5. 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.

  6. Click on SAVE AND CLOSE to save your entries.

  7. 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. 

  8. When you open the form to edit, you should see something like this:

    form-create-form-fields

    Click on the option labeled NEW FIELD in the top right hand corner.  You will need to position the field first.

  9. 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:

    Form Generator


  10. 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:

    Explanation field in form

    Click on NEW FIELD to proceed with creating the form.

  11. To keep things simple we're just going to create fields for the following information:

    First Name Textfield (Alphanumeric characters)
    Last name Textfield(Alphanumeric characters)
    Email Address Textfield (email address)
    Phone Number Textfield (phone number)
    Comments 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.

  12. 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.

  13. Once this is complete, click on SAVE AND CLOSE.

 
Adding the Form to the Site Structure

 

  1. 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.

  2. 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 (clipboard-right)will insert your page within the group to the left.  The clipboard icon with the arrow pointing down(clipboard-down) will move the new page BELOW the group that you have selected.

  3. After you position the page, you will need to fill the following form:

    New page in site structure 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.
  4. Click on SAVE AND CLOSE.
  5. 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:  edit-article-icon.   Click on this icon.

  6. Next, click on the pencil icon that (the edit icon) that looks like this:  Edit icon.   After you select this icon, you should see something similar to the following:

    Page with article id and option for new element

    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. 

  7. 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.
  8. 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:

Form as it appears in the front end

 
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.

 

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Did you find this article helpful?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.