Feature Highlight: TYPO3 Forms Are Quick and Customizable

TYPO3 provides a guided interface for editors to create forms. Before you create your first form, your admin will need to have added the TYPO3 Forms extension. Once they do you can click on the “Forms” module in the left-hand menu, and select the “Create new form” button to begin.

A wizard will give you two options: begin with a blank form or start with a predefined form. If you know you only want basic contact information or website visitors to be able to message you, we recommend going with the predefined form (you can still customize details later).

A predefined form, like the “Default Contact form” below, will come with predefined settings. You can still edit these settings or add fields, so you can think of these templates as a head-start on creating your form.

If you want to start fresh, TYPO3 allows you to create forms from scratch. Begin with a blank form and add your first field by selecting “Create new element”.

TYPO3 comes with over twenty form fields, by default, including: 

• Basic elements, like text or password fields
• Special elements requiring specific format validation, like phone numbers or dates
• Select elements, like checkboxes or multiple choice
• Advanced elements that have special rules, like user uploads or calendar date pickers
• Container elements to visually organize your survey

Once you’ve selected a form element, you can customize the settings for how the field is displayed and collected. Fill out the information in the pane that appears on the right-hand side of your screen. For a simple text field, for example, you have the option to fill in the following fields:

• Label: the title of the form field
• Description: instructions for how a user should respond to this field
• Placeholder: an example that will sit in the form field, until a user types
• Default value: to be filled in if you have a default answer, “i.e. N/A”
• Required field: check to require responses
• Custom error message: message shown if the format is invalid or a user fails to respond to a required field
• Validators: checks you can put on the answer so that a user follows the correct format

You can then preview what your form will look like to your website visitors by clicking on the ‘Preview mode’ icon in the top right corner.

While some simple forms, like a “Message us” form, might only have one stage, other forms require multiple stages to collect information (think of a payment flow, where you collect shipping addresses and billing information in separate steps). In TYPO3 you can add multiple steps to your forms, and even name the steps as you go. Click on the step of the form on the left-hand side then fill out the basic info, including the title of the step, and labels for the “previous” and “next” buttons.

Add new steps by clicking on the “Create new step” button in the left-hand menu.

Once you've designed the steps and added the fields to your form, think about what you want to happen when the visitor clicks the submit button. For example, you might want to display a confirmation message so they don’t submit again or you might want to redirect them to another related page. You can specify this behavior by clicking on the form title at the top of the right-hand menu. Add “finishers” to the form, including:

• Email to sender (form submitter)
• Email to receiver
• Redirect to a page
• Delete uploads
• Confirmation message

When you add a finisher, click on the “down” carat to expand it and configure the settings. Your form won’t be considered validated if the finisher is highlighted in red and missing information.

Once you’ve created your form, inserting one on your website is as easy as adding any content elements to your page. Simply add the “Form” content element and choose where it should go on the page.

Then you can select which form to use from the “Form definition” dropdown menu under the “Plugin” tab.Then you can select which form to use from the “Form definition” dropdown menu under the “Plugin” tab.

If you get to the point where you’re running a complicated sales operation, you might need to expand the power of your forms. In TYPO3 it’s easy to integrate extensions with existing forms. If you integrate with Mautic, for example, any changes to a TYPO3 form will update the same form in Mautic creating seamless lead tracking.