Knowledgebase

Adding Menus to the Contao CMS Layout will improve user experience and mae your website navigation easier and better. The instructions below are using the default Theme that comes with the Contao CMS.

Adding menus starts with creating site structures.

Login to the Contao Back End
Scroll down the left hand column that is labeled Back end Modules and then click on SITE STRUCTURES. You will see a structure of the current website constructed using the default Contao theme.

You will also want to read:

Contao Login Tutorial
Contao user management tutorial

Main layout site structure

At the top of the interface, click on NEW PAGE. The first thing you will be required to do is position the item. You will see instructions indicating this need:

Select position for new page

Click on one of the clipboards to the right in order to set the position the of the page you are adding.

Also read:
Contao Login Tutorial
Contao user management tutorial


Pages that you add in the site structure can be part of another group, or you can create a new group. If you click on the clipboard with the arrow pointing down, then the page will be placed BELOW the site structure item you are selecting, and it will create a new “group." Selecting the clipboard with the arrow pointing to the right will create a group that is inside the group that you have selected. Note that the site structure added (termed as PAGE in the interface) can be either an organizational unit (menu item), a re-direct, or website page depending on your selection. Here are a few screenshots demonstrating these groupings:

New Page positioned under Main Menu item -can be used for another URL

Clipboard with arrow pointing selected - Root URL Menu Item

Menu item below website root item ("Sky from the Appalachian Trail in Amherst" is the root URL item) - items placed beneath the website root can be main menu items or pages. You can easily move the added item throughout the site structure at any point after the item has been saved.

Menu position when clicking on top most item with arrow pointing right


Menu item created as sub-menu under an existing menu option
Submenu item or page within a main menu item

After you position the page you will see the following form to fill out for the page/menu item you have created. Note that the form is broken up into three pieces because of its length:


Part 1 of the New Page form entries - includes the required item of the page name, page alias, page type (Name and type section)

New Page- top part of form

The top part of the form includes the mandatory fields for the Page name, and language. The other important section of this form is the Page Type drop down menu. Here's a quick table descrbing the options that can be selected:

Regular page Normal website page
Website root Primary domain for website
Internal redirect Re-directs to a location within the website
External redirect Re-directs to a location outside of the website
403 Access denied Error page for access denied attempts
404 Page not found Error page for page not found errors

In order to make a menu item simply select Regular page. If you intend to redirect from the menu entry, then select one of the redirect types. If you intend to create a new menu for a separate URL (apart from the primary one established with the start of the menu), then select Website root.


Part 2 of the form - Includes the global settings, XML Settings, and layout settings.

Do not click on ASSIGN A LAYOUT if you intend to create a menu item. This item should be selected if you are creating a page that will be opened. If you click on this option you will see the following:

shows layout setting options



Part 3 of the form includes the cache settings, access rights, publishing settings, and viewing restrictions (based on date and time).

Make sure to click on PUBLISH in order to be able to see the page/menu item within the website. Pay close attention to the form options because they will change per the page type.

Click on a SAVE option at the bottom of the page to save your entries.


It is important to remember that we are modifying the existing default Contao demo website and therefore, the default Contao theme. This gives us a baseline in which to understand how to manipulate and create the menu and site structure that Contao provides.

Do you forget how to login to the Contao bacend, here is the process again along with password recovery method:

Logging in to the Contao Back-end

The url is typically the domain/contao. For example: http://yourdomain.com/contao/. You will see a screen for the Back-end login:


Type in the user name for the administrator and the corresponding password. Change the language if necessary. Click on LOGIN once the user name and password have been entered.

A successful login will lead you to access the back-end modules.

If you are unable to login, you will see a LOGIN FAILED message on the login screen.

How to login to the frontend in Contao

The front-end of the CMS is used to share information or content with registered and non-registered users of the website. Logging in as a registered user will allow access depending upon the access rights granted to the user by the administrator. The following article shows how to login to the front end of the Contao CMS.

Type in the URL to get to the front-end login window.
Type in the User name and password.
Click on LOGIN in order to get into the website's front end.

If you are already logged to the backend, then you need first to logout before you login in to the frontend.


Resetting an Administrator Password for Contao


A common technical support issue which support receives quite often is how to recovery of a lost password for the Contao backend. Recovering a lost password for Contao requires that you have access to a database utility and the database in which the password resides. We shall now look at how to recover or reset the Contao Administrator password using phpMyAdmin.

Login to the Cpanel
Go to the Database section and select phpMyAdmin. You will then find the database for your Contao installation. When you have located your database, look for the table labeled tl_user.

Click on the table and it will open up


Note that you may need to find the admin user based on the user name (if you know it). If you do NOT know the Administrator's user name, you can also look for the column ID ADMIN - if there is a value of 1 in the field, then that user is an Administrator. Once you have found your administrator user, click on EDIT (at the beginning of the line) in order to change the password for the admin user.

Scroll down the list of values assigned to the user name until you find the column ID labeled PASSWORD. Proceed to change the password.

As per the steps listed above: 1) Click in the field with the old encoded password and type in a new password (it will appear un-encoded), then 2)Click on the drop-down menu and select the SHA1 encryption option.

The last part requires that you scroll down to the bottom
Click on GO in order to save the changes.

Using The Encrypted Password Recovery Method

As per the Contao documentation, you can also use the following encrypted password if you're still having issues recovering the password:

8e0107bf1c7fbeef6538dff7173aa458e7dd585e:8c37627a0e2c606189e7765

You use the same steps to find the administrator and password above, then copy and paste the value into the database field for the password. The encrypted password is: reset123.

You should be able to log back into the Contao Back end with that change and then immediately RESET the password by editing the user.

Using the Contao Form Generator for a Contact Us Page.

You will follow the steps below to create a contact page with the Contao form generator.

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:

Main Form generator page

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

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

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

Send Form Data area

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:

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.

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:

Explanation field in form

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:

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.

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

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.
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: edit-article-icon. Click on this icon.

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.

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