---
title: How to Create Custom Forms with the TYPO3 Form Extension
url: "https://b13.com/knowledge/create-custom-forms-with-typo3"
description: Forms are a must-have on any website these days; from a simple contact form to a complex multi-page form for data processing. TYPO3 CMS’s built-in form functionality has all the answers.
image: "https://b13.com/fileadmin/_processed_/3/0/csm_forms_191-1_3ae9454904.jpg"
date: 2021-04-22
modified: 2026-08-19
lastUpdated: 2026-08-19
---
# How to Create Custom Forms with the TYPO3 Form Extension
[ Forms ](https://b13.com/knowledge/forms) [ UX/UI-Design ](https://b13.com/knowledge/uxui-design) [ TYPO3 ](https://b13.com/knowledge/typo3)
Showcasing the flexibility of TYPO3’s Form Framework
======================================================
Let us inspire you to fit it to your own design
David Steeb
28 April 2021
[ RSS Feed ](https://b13.com/rss.xml)
Embedding forms into a website is a basic requirement when selecting a content management system (CMS) today. Requirements for working with forms can range from simple to complex. Perhaps you want to add a contact form to the contact page or embed a form from a third-party application like Hubspot or Salesforce; or maybe you need to enable your marketers and editors to create custom forms on the spot within the CMS. Luckily for us, TYPO3 CMS comes with the system extension “form” that can handle almost any usage scenario you can think of. One of the main benefits being that editors can create forms with just a few clicks.
The “form” system extension is highly configurable, offering an enormous array of options, configuration settings, and templates. This sort of flexibility can be daunting, but don’t worry. We’re going to talk you through how we implemented forms on the [TYPO3 Demo website](https://demo.typo3.org/) so you can get a feel for what’s under the hood and how to adapt it to your own needs.
If you’re familiar with the Bootstrap framework, you’ll probably be able to get started creating forms that look okay out-of-the-box. This is because the form extension comes with a set of templates (and a concept for their use) that draws from the Bootstrap framework. If not, then you will need to dive into setting up TYPO3’s form extension with your own templates, according to your own use case and configuration requirements. At b13, we prefer to work with custom markup, CSS, and JavaScript because it is easier to maintain in the long run.
TYPO3’s form extension: What’s in the box?
--------------------------------------------
Let’s take a look at what’s included with TYPO’s core extension “form”:
- Create forms in all shapes and sizes, from simple contact forms with a few fields to multi-page forms including complex validation, custom form data processing, and more
- Editors can create forms from scratch or based upon included or custom-built example form definitions you provide yourself
- Form comes with around 20 field types and a set of commonly used, powerful validators to give you full flexibility to build custom forms
- A form filled out in the frontend can be processed using one or multiple so-called “form finishers” for sending an email, saving form fields to the database, saving uploaded files to the file system, etc.
- All form definitions are saved using a YAML configuration file under the hood, making it possible to create forms and deploy across servers, multiple TYPO3 instances, and reuse form configurations across multiple projects or for similar forms in a multi-site setup
TYPO3’s form extension: When to use it?
-----------------------------------------
At b13 we have projects where we use this extension in multiple ways and various places. We have projects where we use the extension as a basis for a simple contact form—and remove most of the other features (or just hide the form editor from regular editors). We also work with solutions like custom built mini-extensions that just save some data to the database.
### Example use case: Editors create and edit forms
TYPO’s form extension is great for when your editors need freedom to create and change forms. They can add or remove fields, as well as change labels and descriptions inside a form.
### Example use case: Editors choose predefined forms
Say you need one contact form that sends out emails to a customer service email address, and you don’t want anyone to change it. You can use the extension to create that form and save the configuration into your version control. This means you can remove the form editor from your backend users so that they only work with predefined forms—giving you a tightly integrated, regularly upgraded form extension. The form extension is maintained by TYPO3’s Core team, which means it is regularly updated.
### Example use case: Forms integrate with other systems
Perhaps you want to build a contact form that is integrated with or exports to external systems. With this type of specific workflow, you won’t want anyone to change the structure or placement of the form. In this instance you might opt to create a small, custom-built extension for that specific use case. Sometimes it’s easier to create a form with a single template that fits your design and requirements instead of changing lots of Fluid partials, and messing with CSS class configuration and error handling.
How to configure TYPO3’s form extension to your needs
-------------------------------------------------------
On the official TYPO3 Demo website, we recently added form features as a showcase of what you can do with forms in TYPO3. We wanted to create a simple contact form as an example, and also show the form editor’s capabilities, so that people can test out what is possible with this module. To make sure we met all our internal requirements and had a consistent layout and design, we needed to install the form extension and customize the setup. Our requirements:
- Use our own, custom templates for forms, with custom markup
- Prepare a default contact form, that is not editable (but may be used as a preset for creating new forms)
- Remove field types we did not customize for this project
- Remove finishers from the system (we do not want the TYPO3 Demo project to turn into a spam machine sending out emails left and right)
 The official TYPO3 demo site contains a simple contact form as an example. This is the editor’s view in the backend.
 The contact form as presented in the frontend output
### Install form extension and prepare your system
To install TYPO3’s form extension,load the extension and add it to your system. We use composer to do so:
`composer req typo3/cms-form`
Alternatively, you can use the Extension Manager to install Form Framework and activate the “Form” extension.
You will see the form module icon in the backend module menu. Add the extension’s TypoScript setup to your site extension package to enable frontend output for forms:
`@import 'EXT:form/Configuration/TypoScript/setup.typoscript'`
In the steps to follow we want to change the default configuration to fit our requirements. We want to use our own template files for form templates and add the following TypoScript to our setup:
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
```
plugin.tx_form {
settings {
yamlConfigurations {
100 = EXT:site_t3demo/Configuration/Yaml/FormSetup.yaml
}
}
}
module.tx_form {
settings {
yamlConfigurations {
100 = EXT:site_t3demo/Configuration/Yaml/FormSetup.yaml
}
}
}
```
You might be confused looking at this because it seems redundant: the `plugin.tx_form` key registers our FormSetup.yaml file for frontend rendering of the forms, while `module.tx_form` announces our YAML file to be taken into account within the backend form editor module.
### Note
Configuration for forms is done in YAML files, as opposed to what you might be used to from most other plugins in TYPO3. The reason is that YAML can be used agnostic of backend and frontend configuration, which is typically done via PageTsConfig and TypoScript respectively.
### Customize form templates
Next, we created an example form using the form module that includes all the field types we wanted to make available for use by editors and marketers within the TYPO3 backend. This involves creating a new form (using the form module) and adding that form to a page in our page tree (using the form content element) to see that form in our website’s frontend.
All form elements (the form itself, fieldsets, and all individual elements) are rendered using default Fluid Templates and Partials you will find within the folder `sysext/form/Resources/Private/Frontend`. So, to change a template to fit our desired markup we added our own template for each element within our site extension package folders. We use the folder `Resources/Private/Plugins/Form/` inside our site extension package.
To make form use these templates, we add the Fluid paths to the FormSetup.yaml, like this:
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```
```
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Form:
renderingOptions:
templateRootPaths:
20: 'EXT:site_t3demo/Resources/Private/Plugins/Form/Templates/'
partialRootPaths:
20: 'EXT:site_t3demo/Resources/Private/Plugins/Form/Partials/'
layoutRootPaths:
20: 'EXT:site_t3demo/Resources/Private/Plugins/Form/Layouts/'
```
A typical partial for a form field, like a simple text input, could look like this:
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
```
```
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
<f:form.textfield
property="{element.identifier}"
id="{element.uniqueIdentifier}"
class="b_form__text {element.properties.elementClassAttribute}"
errorClass="{element.properties.elementErrorClassAttribute}"
additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}"
/>
f:render>
formvh:renderRenderable>