Learn TYPO3

TYPO3 is a flexible CMS ideal for small blogs and complex multilevel online corporations.

• Last Updated: 06/01/2020
• ( 11 minutes reading )

How to create Forms and display them on your Pages in TYPO3


Web forms are an essential part of a website. They allow you to create areas where your visitors can register on your site, subscribe to a newsletter, contact you directly or log in. Their application is so widely spread, that without them, you will certainly struggle in developing a website that meets today’s standards. Fortunately, TYPO3 lets you create contact forms and tailor them to your specific needs. In this tutorial, we will take you through the process of creating such a form and deploy it on your page. Let’s begin!


Getting Started

For a start, please log into your admin dashboard first. To do that, please add “/typo3” to your domain name - for example, “mycms.com/typo3” where “mycms.com” is your actual domain.


TYPO3 Admin Login Page


Accessing the mentioned URL will show a login page, where you have to enter your login credentials to access the backend. We also highly recommend checking our TYPO3 Backend Overview tutorial, which introduces the basics.

Once you have logged into your dashboard, please point your attention to the left, where you will see the module menu. 


Access TYPO3 Forms section


Right under the “Web” section, you will see the “Forms” option. When you click on it, the page will be refreshed, and you will see a table section, containing the existing forms. If you have pre-installed a distribution package, you will typically find the default forms it contains.


TYPO3 Existing Forms list


To add a new form, please press the plus (+) button located either on the left corner of the table, or the plus (+) button located on the left corner of the page.


Add New TYPO3 Form


In the middle of the table section, you will see three icons. They allow you to perform certain activities with the forms, such as Edit”, “Duplicate” and “Delete”,


Edit, Duplicate, or Delete TYPO3 Forms


To edit the Form, please press the icon resembling a pencil. To duplicate the Form, please press the icon resembling two pieces of paper stacked on top of each other. Finally, to delete the Form, please press the icon resembling a garbage can.

Now that we have gone over the initial page let’s go over the actual form creation process.


Creating Forms

As mentioned earlier, to start the form creation process, please press one of the available plus (+) icons on the page. Doing so will open a popup window, which will initiate the creation process. It is divided into four steps, thus the click will take you to the first step. It entails setting up the Form’s name and the Form’s storage location.

In addition to that, you will see an “Advanced settings” checkbox. If checked, it will let you choose a pre-existing template from the available ones deployed with the distribution package. You can use them as a foundation to start building the Form from there.


TYPO3 Form name and storage location


After you have set the name and selected your storage location, please press the “Next” button, located at the bottom right corner of the window. This will take you straight to the third step as step 2 is only generated when the “Advanced settings” checkbox is ticked. 


Ready to create new TYPO3 Form


All you need to do here is press the “Next” button. The entire process afterward is completely automated, and all that’s left to do is wait until TYPO3 creates the base of your Form.

After a brief loading period, you will find yourself on the “Form Creating” page.


TYPO3 Form creation page


Let's first start with the right side of the page. You will see two text fields and a dropdown menu.

  • Form name - This text field will allow you to set a name for your Form. You may use it, in case you would like to change the initial name you entered.
  • Submit label - This text field allows you to set a name for the button of your contact form. For example, if your contact form has multiple steps, this could be “Next”, if this is a registration form, this could be “Register”, and if it is a login form, you could type in “Login”.
  • Finishers - Using this dropdown, you can manipulate the outcome after the button we talked about above is pressed. Here are the available options you can set:
    • Email Sender - Selecting this option will send an email after the sender has filled up the Form and pressed the Submit Label switch.
    • Email Receiver - Selecting this option will send an email to a webmaster or yourself (depending on the email address you set).
    • Redirect to a Page - Selecting this option, after using the Submit Label switch, the submitter will be redirected to the selected page.
    • Delete uploads - If the client attached an image or a file to the Form, it would be deleted upon pressing the Submit Label switch.
    • Confirmation Message - Selecting this option will show a message after the Submit Lable switch has been clicked.


Form name, Submit Level and Finishers settings


In the middle, you will see the base of the Form itself. It will be represented by a section containing a button, allowing you to add various elements for the Form, such as text fields, text boxes, checkboxes, file upload buttons, and static texts. On the left side of this section, you will find two buttons. The first one will be selected by default, and this is the “Edit” option, allowing you to perform changes on the Form. The second one, which is on the left side, will be the “View” button, letting you check how the Form will visually look.


Add Elements, View, or Edit TYPO3 Form


In this example, we are going to create a very basic contact form, which will contain two text fields, expecting a name and an email address, a content box, requiring a message, and finally, a button that will send a message to you (the webmaster).

To begin with, we are going to insert the two text fields, along with the content box. We are also going to give them appropriate names - Name, Email, and Message. The options on the left side of the screen will change for each selected element. Here is a screenshot example of how they are going to look like.


Add Elements to TYPO3 Form


  • Label - This text field will allow you to specify the name of the element. In our case, it is “Name”, as we are expecting the visitor to enter their name.
  • Description - This text field is used to set a description for the field. This will appear as a small text below the actual field on the page. It is intended for a clarification of what exactly is expected from the user. For example, for a "Name" field, you can write, “Please introduce yourself!” or something similar.
  • Placeholder - This is intended for setting a placeholder for the field. It will be a grayed-out text written in the field, which can give the user an idea of what they should write. For instance, you can place a very common name in there, such as “John”.
  • Default value - This is intended for the default value of the text field.
  • Required field - This checkbox will allow you to add a requirement to the field and also set a custom error message when it is not met.
  • Validator - For this dropdown, you can select the validation method for the above checkbox. If your visitor triggers the validation method selected, they will receive the custom error message you set earlier.

Here is what we use to modify the “Name” field in the Form:


TYPO3 Form Name field modification


  • Label - The label we set is “Name”.
  • Description - The description we typed is “Please enter your name”.
  • Placeholder  - The placeholder we set is “Enter Name Please”.
  • Default value - The default value we entered is “Name”.
  • Required field  - We ticked the required option.
  • Validator - We selected the “String Length” validator, which we confirmed to require names that have at least 5 and a maximum of 30 letters.


We are not going to go over the next few elements, as the way they are configured similarly. The last thing we need to do is give the Form an actual name, set a label for the button, and add a finisher. To do so, please point your attention to the left side of the page where you will see an area, which is identical to the TYPO3 page tree.

Please click on the option, which is on the very top of The tree. In our case, this is “HostArmada”.


Root of TYPO3 Form Tree


This will bring us back to the fields we discussed earlier. The “Form Name” in our case is “HostArmada”, the “Submit label” and we have added two “Finishers” - “Confirmation message” and “Email to receiver (you)


TYPO3 Form final step


The setup part is over - now it is time to see how the Form will actually look like on the page. To see that, please click on the icon, resembling an eye over a page, located on the top left corner inside the add element section.


View TYPO3 Form on the frontend


After a second, the middle area will expand a little bit, and you will see the layout of the Form.


TYPO3 Form Layout


If you like what you see, please press the “Save” button, located on the top left side of the screen.


Save TYPO3 Form


Now that the Form is created let’s go add it to a page and make it usable for our viewers!


Assigning Forms to Pages

To display the newly created Form on a page, you need to first access the Page Tree. To do so, please point your attention to the left side of the screen. On the top side, you will see the “Web” section, please find and click on the “Page” option underneath.


Access TYPO3 Pages section


Upon doing so, you will see the Page Tree unveiled in the middle of the screen. 


TYPO3 Page Tree


Please select the desired page from the Page Tree. Doing so will refresh the screen, and you will see an option allowing you to add content to your page. 


Add Content to TYPO3 Page


This process was explained in detail in our How to add content to newly created pages in TYPO3 tutorial.

Please select the area where you want to add the Form to by clicking on the corresponding “+ Content” button. In our case, we are going to insert this Form right under the header of the page.


Insert Form in TYPO3 Page


This will open a popup window containing all the available elements. We are going to open the “Form elements” tab and then select the “Form” option from there.


TYPO3 Page Form Elements


This will take us to the “Create new Page Content” page, and we will have the option of modifying this area. From the menu bar on top of the page, please select the “Plugin” tab.


TYPO3 Page Form Elements Plugin tab


Upon going there, you will see a dropdown menu, which will list all available form elements. Please select the Form you created.


Select Form to display on TYPO3 Page


After choosing your Form, you will receive a popup window, notifying you that the page needs to be refreshed after inserting the Form. Please click the “OK” button located on the bottom right corner of the window.


TYPO3 Page Refresh Required notification


Now, please click the “View” button, located on the top side of the screen right above the menu bar.


View TYPO3 Form on the Page


This will immediately open a new tab in your browser, and you will see how the Form appears on your website frontend!

Fill up the Form accordingly, and then hit the “Send” button to test out its functionality.


Test TYPO3 Form functionality


After a few moments, you will see the confirmation message, we set up earlier, which was “Thank you for reading this tutorial!


TYPO3 Form Confirmation notification


And there you have it! The method of creating contact forms and then implementing them on your pages. At first, it may seem a little overwhelming, as there is quite a lot of stuff to do, but eventually, you will come to realize how seamless and intuitive adding web forms to TYPO3 really is!



Content Marketing Specialist

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.