How to Create TYPO3 Form - Tutorial & Add-on Extensions

How to Create TYPO3 Form - Tutorial & Add-on Extensions

No matter what's role as editor, integrator, or developer, The TYPO3 form extension is a common topic with simple to advanced level creating TYPO3 form. In this article, you will get the beginner to intermediate level TYPO3 form skills.

Since TYPO3 v8 LTS, The community created a cool form extension within the TYPO3 core. In my opinion, it was one right decision taken by the community. At each version, improved the TYPO3 form extension with new features for TYPO3 Editors, integrators, and developers.

I want to dedicate this blog to all contributors & especially team TRITUM for their tremendous efforts o developed and maintained the TYPO3 form extension, #T3Kudos!

History of TYPO3 Form

You know what? The core TYPO3 form extension not created by the core-team. It proves, If you want to contribute to the TYPO3 core, you don’t necessarily need to be part of the TYPO3 core team ;)

Who’s Behind TYPO3 Form Core Feature?

The TYPO3 Community is incredible; the beauty is that people can contribute to the core without joining the TYPO3 core team ;)

The history of the TYPO3 form initiated, developed, and maintained by the Form Framework Initiative. Let's be big hands to all members of this initiative.

  • Follow their Form Forger for the status of the project.
  • Feel free to ask you any questions to their Slack channel
  • You can join the team to contribute bugs, feedback, submit a patch, documentation, etc. :)

Do you know TYPO3 Form won the OpenSource award?

The TRITUM, The TYPO3 agency that performs significant roles on the “Form Framework Initiative”  is a proud winner of the Thuringian Open Source Prize 2019, firstly awarded by ITnet Thüringen in the scope of IT-Exhibition in Erfurt, Read the article.

TYPO3 Form Core vs Powermail

Whenever you search for TYPO3 formular extensions, you will find two solutions: 1st TYPO3 form which is provided by TYPO3 core, 2nd TYPO3 formular extensions from TER (TYPO3 extensions repository).

In some perspective, Third-party TYPO3 extensions are more popular like EXT:powermail because many people used it for a year, TYPO3 core missed feature-rich form features, etc. You can explore available TYPO3 form extensions at TER.

What is Powermail?

The official author says;

Powermail is a well-known, editor-friendly, powerful, and easy to use email form extension with lots of features (spam prevention, marketing information, optin, ajax submit, diagram analysis, etc.)

Big thanks to In2code people, who developed and maintained powermail extensions, and are still used by many TYPO3 users because of powerful features like data stored into the database, easy to extend, developer-friendly hooks, etc.

powermail

Extension key

770000+

Downloads

Why should you use the TYPO3 form core?

The reason is simple, to easily maintain and upgrade your site’s future TYPO3 version.

Since TYPO3 v8, TYPO3 has a cool drag-n-drop form feature within the core, and we highly recommend using the TYPO3 core form feature to avoid as much as possible third-party TYPO3 extensions.

TYPO3 form core is easy to use for editors, integrators, and developers. Your marketing people can simply create and publish TYPO3 contact forms without needing any technique guys ;)

Install and Active TYPO3 Form

Before we start, Make sure you have already installed & activated TYPO3 form the core extension from the extensions manager.

// Composer guys can install with;
composer require typo3/cms-form

How easy is it to create a TYPO3 form for editors?

It’s straightforward, TYPO3 form developed mainly to focus on editors who can create and publish forms with the click-based and drag-n-drop feature. Get ready to publish your first form with the below steps.

Step 1. Go to Page > Forms backend module.

Step 2. Click on the “Create a new form” button.

Step 3. Choose the “Blank form” option

Step 4. Enter your form’s name, click on the “Next” button.

Step 5. Congrats, You are ready to by clicking the “Finish” button.

Step 6. Let’s quickly create a few fields in your form; click on “Create new element”.

Step 7. Choose your element eg., Text element

Step 8. On the right-side panel, you can configure all properties eg., Label.

Step 9. Add all your requirement field to the form like Name, Email, Message, etc.

Step 10. Click on the “Settings” button to finish the form.

Step 11. On the right side, Choose and configure all your required “Finishers”. It means once the user will submit your form, what kind of actions do you want to take. Eg., To receive an email, Choose the “Email to receiver (you)” option.

Step 12. You’re done, Of course by clicking on the “Save” button ;)

Step 13. Last part, Let’s insert your created form at a particular page. Switch to the Page module and click on your page. Click on the “Create a new content element” button.

Step 14. Go to Form elements, and select the “Form” plugin.

Step 15. Choose your created form in the Plugin tab.

Step 16. Woohoo! Your form is published at your TYPO3 site :)

TYPO3 Form Quick Steps for Integrators

As a TYPO3 integrator, while you are integrating the TYPO3 template, you simply need to take care of one thing as below.

Include Static TypoScript Template

Go to Template > Root page > Includes, TypoScript templates. 1st Fluid Content Elements (fluid_styled_content), 2nd Form (form).

TYPO3 Form Architecture

Generally, TYPO3 integrators and developers prefer to create and manage their forms within their template extension eg., site_package to get benefits like code-versioning.

What’s Form Configuration?

  • Which form elements, finishers, and validators are available,
  • how those objects are pre-configured,
  • how those objects will be displayed within the frontend and backend.

What’s Form Definition?

  • All form elements and their corresponding validators,
  • the order of the form elements within the form, and
  • the finishers which are fired as soon as the form has been submitted.
  • Furthermore, it defines the concrete values of each property of the mentioned aspects.

Fortunately, the TYPO3 core provides a rich YAML configuration to create multiple TYPO3 forms.

What’s an ideal structure for the TYPO3 form?

Before we start to code, officially documentation highly recommended to set up the following folder structure in your template extension.

Form Configuration

  • EXT:extension_key/Configuration/Form/

Form Definitions

  • EXT:extension_key/Resources/Private/Forms/

Custom form templates

  • Templates EXT:extension_key/Resources/Private/Templates/Form/
  • Partials EXT:extension_key/Resources/Private/Partials/Form/
  • Layouts EXT:extension_key/Resources/Private/Layouts/Form/

Translations

  • EXT:my_site_package/Resources/Private/Language/Form/

Configuration aspects

In EXT:form, there are four aspects which can be configured:

  • the behavior of the frontend rendering,
  • the behavior of the form editor,
  • the behavior of the form manager, and
  • the behavior of the form plugin.

Configuration Inheritance

You can use YAML inheritance and override configuration.

Tips

For debugging purposes or for getting an overview of the available configuration uses the SYSTEM > Configuration module. Select in the menu the Form: YAML Configuration item to display the parsed YAML form setup. If the module is not available, install the low-level system extension.

Step-by-Step to Configure TYPO3 Form

By default, TYPO3 form extension stores all forms into /fileadmin/user_uploads/ folder. It’s not good practice to store production’s form into fileadmin.

In the first step, Let’s do configuration so the forms will be stored to your template extension eg., /extension_key/Resources/Private/Forms path.

For TYPO3 integrators and developers, Let’s dive into depth to register, configuration, and publish TYPO3 form within your custom template extension.

1. Register TypoScript Setup

Yes, you can easily create a TYPO3 form with the below steps.

Step 1. Create typo3conf/ext/extension_key/Configuration/Form/MyForm.yaml with sample below code.

TYPO3:
  CMS:
    Form:
      persistenceManager:
        allowedExtensionPaths:
          110: EXT:extension_key/Resources/Private/Forms/
        allowSaveToExtensionPaths: true
        allowDeleteFromExtensionPaths: true

Step 2. To register at Frontend plugin, add the following TypoScript to your template

// EXT:extension_key/Configuration/TypoScript/setup.typoscript
plugin.tx_form {
    settings {
        yamlConfigurations {
            100 = EXT:extension_key/Configuration/Form/MyForm.yaml
        }
    }
}

Step 3. To register at Backend module, add below TypoScript

// EXT:extension_key/ext_typoscript_setup.txt

module.tx_form {
    settings {
        yamlConfigurations {
            100 = EXT:extension_key/Configuration/Form/MyForm.yaml
        }
    }
}

For TYPO3 Developer Tips

Do you want to register a particular TYPO3 form in your extension, You can easily do it with the below PHP-way ;)

// typo3conf/ext/extension_key/ext_localconf.php
defined('TYPO3_MODE') or die();
call_user_func(function () {
     \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScriptSetup(
         trim('
             module.tx_form {
                 settings {
                     yamlConfigurations {
                         100 = EXT:extension_key/Configuration/Form/MyForm.yaml
                     }
                 }
             }
         ')
     );
});

2. YAML Setup

YAML configuration is the heart of Form extension, Let’s explore it.

Custom TYPO3 Fluid Form Templates

# /extension_key/Configuration/Form/MyForm.yaml

TYPO3:
  CMS:
    Form:
      prototypes:
        standard:
          formElementsDefinition:
            Form:
              renderingOptions:
                templateRootPaths:
                  100: 'EXT:extension_key/Resources/Private/Frontend/Templates/'
                partialRootPaths:
                  100: 'EXT:extension_key/Resources/Private/Frontend/Partials/'
                layoutRootPaths:
                  100: 'EXT:extension_key/Resources/Private/Frontend/Layouts/'

Add Translations Files

# /extension_key/Configuration/Form/MyForm.yaml

TYPO3:
  CMS:
    Form:
      prototypes:
        standard:
          formElementsDefinition:
            Form:
              renderingOptions:
                translation:
                  translationFiles:
                    # custom translation file
                    20: 'EXT:extension_key/Resources/Private/Language/Form/locallang.xlf'

Useful TYPO3 Form Extensions from Community

The TYPO3 Community is fantastic; they always create add-ons to core features ;) Here is the list of some useful TYPO3 form extensions.

Form log

Mathias Brodala (from Pagemachine AG) created the most-demanded TYPO3 form extension add-on to store data ;) 

One feature absent in the TYPO3 form extension is the logging of form data. If you have ever used the now-defunct Formhandler extension, you know how valuable this can be. You can quickly check if form submissions are working as they should see internal values are generated correctly and perform some fundamental analysis thanks to exports to CSV or similar.

TYPO3 Form to Database

Philipp Mueller created a similar extension to form-log. This extension adds a finisher to the TYPO3 Form (tx_form) to save the results into the database.

reCAPTCHA

Integrates Google reCAPTCHA via TypoScript renderer. Easy on Humans, Hard on Bots.

Forms Export

Team !frappant created other forms of the export feature. Adds the possibility, as a finisher, to save and export the form entries from customers.

Custom form element "Linked checkbox."

Team TRITUM created this extension which adds a custom form element "Linked checkbox" to the TYPO3 form framework. The user can define the link target and the link text.

Custom form element for static_info_tables

One more extension from Team TRITUM which adds a custom form element "Country select" to the TYPO3 form framework. It displays a select list with all countries from the database table static_countries from the extension static_info_tables within the frontend. Also, a country can be preselected in the form editor.

EXT:form Serial-number Finisher

Armin Vieweg, The famous extension developer, created a smaller but useful extension called “form_serialnumber”. It provides a serial number finisher for EXT:form.

Form Double Opt-In

TYPO3 Extension adding Double Opt-In to the TYPO3 CMS Form Framework

Practical Examples of TYPO3 Form

1st, Sebastian Klein, created good examples of TYPO3 form with different TYPO3 versions. It’s a good idea to check out form examples.

2nd, TRITURM, the TYPO3 form core developer’s created examples of “Repeatable Form Elements” as below.

Video Tutorials of TYPO3 Form

If you are eager to dig-into-depth, you can check out these videos (German & English).

Wrap-up!

Thanks for reading my blog. I hope you learned and liked the overview of the TYPO3 form extension.

  • The TYPO3 form is a bigger topic to explore each configuration and customization, and I highly recommend to read official TYPO3 documentation.
  • Avoid as much as possible third-party TYPO3 extension for form features. Keep using core form features and explore to extend it for your custom requirement.

Are you facing any issues while setting up the TYPO3 form? Or, Do you have any useful resources suggestions? I’ll be happy to receive your feedback in the comment box

Post Comment

Your email address will not be published. Required fields are marked *

×

Name is required!

Enter valid name

Valid email is required!

Enter valid email address

Comment is required!

Google Captcha Is Required!

Be the First to Comment
TYPO3 Speed & Performance - Essential Extensions!

TYPO3 Speed & Performance - Essential Extensions!

For all the benefits TYPO3 CMS brings, out of the box speed isn’t one of the biggest selling points. Luckily, there are a number…

What Is TYPO3 Extension? An Introduction Guide

What Is TYPO3 Extension? An Introduction Guide

TYPO3 is an Open-source CMS and is a free tool for creating websites that put you in control of the design, features, and content…

Enrich Your Website With Multipurpose TYPO3 Sliders

Enrich Your Website With Multipurpose TYPO3 Sliders

Setting up a slider image on your TYPO3 website can be your game changer. A slider to your website can improve User Experience to…

Stay up to date with our recent TYPO3 Blogs, news, & updates