Creating a contact form 

Content element Contact Form in the TYPO3 backend

You can create a form from the Content > Forms module. This is a system extension which needs to be activated by your administrator. It is written in TypoScript and is fully documented in the Form Framework system extension manual.

This module provides a guided interface for editors to create any kind of form such as a contact form, newsletter subscription or a survey. TYPO3 comes with one pre-defined form already built, which you can use to get started.

  1. In the Content > Forms module, click the + Create new form button. The Create new form wizard displays.

    The Forms module without forms, with the button "Create new form"

    Launching the Create new form wizard

  2. Choose the template Simple contact form.

    Changed in version 15.0 Feature: #110331 - Improved form template picker with icon and description

    Before, the wizard asked whether to create a blank form or a predefined form, and offered the templates in a list in a later step.

    The first step of the wizard with the templates "Blank form" and "Simple contact form"

    Choose a template

  3. Enter a name for the form and click Next.

    The step "Settings" of the wizard with the name of the new form

    Enter a name

  4. TYPO3 creates the form. Click Finish. Your new form is displayed.

    The last step of the wizard with the message "Form created"

    The form is created

    The new contact form in the form editor

    New form based on template

    The predefined 'Simple contact form' comes with some settings already configured, but you can edit these settings and add more fields. For example, you might want to delete the Summary page, and change the labels on the buttons.

  5. Add your form to a page the same way you would add any content element. On the Form elements tab, choose 'Form'.

  6. In the form content element, go to the Plugin tab and in the Form definition list, choose your form.

    The tab "Plugin" of a form element with the form definition "Get in touch"

    Choose your form on the Plugin tab

  7. On the General tab, type a header for your form, then save and close the record.

    Preview the page and it should look something like this:

    The contact form in the frontend

    The contact form in the frontend

Create a form from scratch 

  1. In the Content > Forms module, click the + Create new form button.
  2. In the Create new form wizard, choose Blank form.

  3. Give your form a name, then click Next and Finish.

    A blank form displays.

    A blank form in the form editor

    Create a new form from scratch

  4. Click the Create new element button. The New element window displays.

    The window "New element" with the types of form elements

    Create new element in form

    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 surveys

    Once you’ve selected a form element, you can customize the settings for how the field is displayed.

  5. Choose the Text element and the field is added to your form. You can configure settings for the field (such as placeholder text and field validation) on the right-hand side of the screen .

    A text field in the form editor, with its settings on the right

    Configure the settings of the field

  6. Click the Preview mode icon to see an indication of how your form will display on the frontend. Use the Edit mode icon to return to editing your form.

    The form in the preview mode of the form editor

    The preview mode of the form editor

Working with forms 

When you have added multiple fields to your form, you can drag and drop them to rearrange their order.

Add Finishers like a confirmation message or redirection to another page.

Add finishers to a form

You can integrate extensions with existing forms. For example, if you're running a sales operation, you can integrate with Mautic and any changes to a TYPO3 form will update Mautic to give you seamless lead tracking.