Introduction

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.

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.

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.

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.

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

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.

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

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

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!

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.

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!