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!
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.
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.
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.
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.
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”,
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.
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.
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.
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.
Let's first start with the right side of the page. You will see two text fields and a dropdown menu.
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.
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.
Here is what we use to modify the “Name” field in the Form:
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”.
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)”
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.
After a second, the middle area will expand a little bit, and you will see the layout of the Form.
If you like what you see, please press the “Save” button, located on the top left side of the screen.
Now that the Form is created let’s go add it to a page and make it usable for our viewers!
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.
Upon doing so, you will see the Page Tree unveiled in the middle of the screen.
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.
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.
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.
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.
Upon going there, you will see a dropdown menu, which will list all available form elements. Please select the Form you created.
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.
Now, please click the “View” button, located on the top side of the screen right above the menu bar.
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.
After a few moments, you will see the confirmation message, we set up earlier, which was “Thank you for reading this tutorial!”
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!
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.