TYPO3 Forms

Estimated reading: 26 minutes 53 views

To use the TYPO3 Forms, you have to install the extension ‘forms’ and then you will be able to create a form in TYPO3. It can be a simple form like a contact form or feedback form, or you can also create the form with multi-step. You can not make a login/registration form with this. Here is the reference link for the TYPO3 forms – https://docs.typo3.org/c/typo3/cms-form/main/en-us/Index.html

Let’s start with the installation. You can install the form extension with composer and without composer. Here we are going with ‘installation of form extension without composer’.

How to install the ‘form’ extension (without composer)

Follow the given steps below to install the ‘form’ extension.

Go to Admin tools > Extension and select the “Installed Extension” in the dropdown at the top-left and search for the “form” and you will see the form extension on the screen, see the screenshot below for reference.
As you activate the extension, it will be added as a back-end module in the left sidebar under the “Web” menu as you can see in the screenshot below. Click on that back-end module “Forms” and then click on the “Create a new form” button.
When you click on the “Create New Form” button, you will see the options to select the form type, the options are a ‘Blank form’ and ‘Predefined form’ as you can see in the screenshot below.

Let’s see the “Blank form” and “Predefined form” one by one.

Blank Form

click on the blank form to select it.
After selecting the “Blank Form” you will get an option for configuration where you can set the name of the form.
After adding the name, click on the “Next” button and you will see the below screen.
Click on the “Next” button and the form will be created and you will see the screen below:

Let’s get an overview of how to create the new element. Reference link: https://docs.typo3.org/c/typo3/cms-form/main/en-us/E/FormElements/Index.html
1. By clicking on the “Create new element”, you can add a new field to the form. After clicking that button, you will see the popup with fields as seen in the screenshot below:
2. You can add as many fields as you want to add from the popup in the above screenshot. To create the form let’s add some fields step by step and see their explanation.
3. As you can see in the screenshot below, we have added the Text field from “Basic elements” and a Grid: Row field from “Container elements”.
  1. Text: A single-line text field, e.g. for entering short information such as name, address, and location. You can see the settings in the screenshot below for the Text field
    
    As you can see in the screenshot above, you can add the label, description, placeholder default value, etc. Also, you can set the Field required, custom message, and validations. Below is the explanation:
    1. Label: Set a label for your field, such as name, address, email, etc.
    2. Description: Add some description about the field that will be displayed below.
    3. Placeholder: Add a placeholder of the field.
    4. Default value: You can add any default value to the field, so if the user does not add any value to that field, the default value will be considered.
    5. Field required: You can set the field “required” by using this.
    6. Custom error message: You can add a custom error message that should appear if the user forgets to add the value for the required field.
    7. Validator: You can add validators for specific fields from here. You can see more details about validators in the section Validators.
  2. Grid: You can use this container element to place fields next to each other. Obviously, this is a visual structuring.
    1. Let’s add other fields to the grid and place them next to each other.
    2. As indicated in the above screenshot, you can add fields in grid as seen in the screenshot below:
    3. After adding the fields you can see the form by clicking the view icon on the top left of the form as seen in the screenshot below:
      
      Click on the edit icon beside the view icon to see the form and to add more fields.
  3. Fieldset: You can use this container to group several elements in the form. This is a content-based structuring, i.e. you create a context content-wise. This is awarded by screen readers and helps you to improve the accessibility of your form. A typical fieldset would be, for example, “Address”. Within this fieldset you have form elements for the street, house number, postal code, and city. The settings for this element are:
    1. Field group name: Heading for the field group, e.g. “Address”.
    2. You can see in the above screenshot that the fieldset element has taken and labeled as “Address”, and that contains other fields like street, house number, city etc.
    3. You can take fields as per your requirement as inner fields of address, here text and number fields are taken. The form will look like the below screenshot after adding the fieldset element.
  4. Datepicker: A single-line text field to select a date using a calendar. A JavaScript library is used for this purpose. The settings for this element adhere to the default. Additional settings:
    1. Date format: select date format (e.g. d.m.Y or Y-m-d or d-m-Y)
      1. d: stands for day
      2. m: stands for month
      3. Y: stands for year
    2. Enable date selection: Check this to display a calendar.
    3. Show time selection: Check this to display two drop downs for ‘Hour‘ and ‘Minute‘ respectively.
    4. You will need to add the jQuery UI (download jQueryUI – https://releases.jquery.com/ui/) to get the calendar for the datepicker field in front-end as seen in the screenshot below:
  5. Content element: You can display any content element of your website. The settings for this element are:
    1. Content element uid: ID of the content element you want to display. You can either enter the ID manually or select it comfortably via the page tree. To do this, click on the “Page content” button.
    2. [ Page content ]: Modal which displays the page tree. You can select a page and a corresponding content element.
      
      You can check the below screenshots for understanding.
  6. Hidden: This field is not visible in the front-end. Such a field is usually needed for technical aspects, e.g. to add hidden values to the form. The settings for this element adhere to the default. Additional settings:
    1. Value: Here you can set a value for the element.
4. You can create steps for any form, it will be usable if you want to create a wizard which will have multiple steps.
5. We are not creating the steps here in the blank form, but we will see about the steps in the predefined form.
6. Other fields are common and you can see the details of them in the reference link given here: https://docs.typo3.org/c/typo3/cms-form/main/en-us/E/FormElements/Index.html
Let’s put the form on a page to see how it will look on front-end. You can see the below screenshots to understand how to put the form on the page.
1. Create a new page or select the existing page, the page name is “Contact” here, but you can assign any name to the page.
2. Click on the “+Content” button, select the “Form elements” tab, and select “Form” and you will see the plugin is added to your page.
3. Then go to the plugin tab and select the form you want to add to the page, you will see a dialog box, click on the “ok” button and save the page.
4. Then click on the view button to see the page on front-end.
  
  Below is the screenshot of the form in front-end with the field explanation.
5. Here please note that we don’t need to add the submit button, that button will be added by default, we can change the label of the submit button if we want to change it.

Predefined Form

Click on the “Predefined form” to select it.
After selecting the predefined form, you will see there are 2 options for the form which are “Blank Form” and “Simple Contact Form”.
If you select the “Blank form”, the blank form will be created which we already have seen above. There is no difference between the normal blank form and the blank form from the predefined form.
Let’s select the “Simple contact form” and add the name of the form.
After selecting the predefined contact form click on the “Next” button and you will see the below screen.
After clicking the next button, you will see the form with predefined fields as you can see in the screenshot below:
You can make updates to the predefined fields like you can remove any field you don’t need, or you can add a new field or update the name, validation, etc. You can see the updates in the screenshot below:

As you can see in the above screenshot, the range has been set from 0 to 100, so the value that will be added to the “Range” field, must be between 0 to 100. Other values will not be accepted by the field.
Here we have a summary page in the next step as you can see in the below screenshots.

Let’s remove the summary page.
After removing the summary page, let’s add a new step to the form.

Add a new step to the form

When you click the button “Create new step”, you will get the option of whether you want to add a new step or a summary page.
As you click on the step, you will get a new step and you can add fields for the new step
Let’s add a field and finisher and then add the form on the contact page as we did for the blank form.

Let’s add the finisher. Here the “Confirmation message” finisher has been used. You can use any finisher you want. The “finishers“ section is explained after the validations.
Add the form in the contact page, here the previous contact form is disabled now so we will get the new form only.
Let’s check in the front-end.

Below is the screenshot of the step 2.

You will get the below message after submitting the form, as we set the “Confirmation message” as the finisher.

Add a summary page to the form

Let’s add a summary page now after step 2.
1. Follow the screenshot below to add the summary page.
2. After adding the summary page you will get the below screen.
3. Save the form open the front-end and fill up the form again. When you click the “Next Step” in step 2, you will get the summary like the screenshot below:
4. You can go previous by clicking the previous button if you want to edit any field.
5. Then Click the Send button to submit the form, and as we added the “Confirmation message” finisher, you will see a message on the screen as you submit the form.

Validators

Validators can be added to each of the form elements to establish a validation for the specific field. The validity will be checked when the user fills up the form. You can check the different validators provided by the TYPO3 form extension. Reference link: https://docs.typo3.org/c/typo3/cms-form/main/en-us/E/Validators/Index.html

Alphanumeric

The validator checks whether the field contains an alphanumeric string only.
“Alphanumeric” defines a combination of alphabetic and numeric characters. No special characters can be entered, only characters from [A-Z] and [0-9].
The settings of the validator are as follows:
1. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. Text
2. Textarea
3. Password
4. Advanced password

String length

The validator uses the minimum and maximum values to check how many characters can be entered. The settings of the validator are as follows:
1. Minimum: How many characters the field must contain as a minimum.
2. Maximum: How many characters the field may contain as a maximum.
3. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. Text
2. Textarea
3. Password
4. Advanced password

Email

The validator checks whether the entered value is a valid email address. The default allows international characters and multiple occurrences of the @ sign. The settings of the validator are as follows:
1. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. Text
2. Email address (validator is automatically active)
3. Password
4. Advanced password

Integer number

The validator checks whether the entered value is a valid integer. No numbers with commas can be entered. The settings of the validator are as follows:
1. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. Text
2. Textarea
3. Password
4. Advanced password

Floating-point number

The validator checks whether the entered value is a valid floating-point number. Only numbers with a comma can be entered. The settings of the validator are as follows:
1. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. Text
2. Textarea
3. Password
4. Advanced password

Number

The validator checks whether the entered value is a valid number. Only numbers without a comma can be entered. The settings of the validator are as follows:
1. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. “Number” (validator is automatically active)

Number range

The validator checks if the entered value is a number within the specified number range. The settings of the validator are as follows:
1. Minimum: The minimum value to accept.
2. Maximum: The maximum value to be accepted.
3. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. Text
2. Textarea
3. Password
4. Advanced password
5. Number

Regular expression

The validator checks whether the entered value matches the specified regular expression. The settings of the validator are as follows:
1. Regular expression: The regular expression to use for validation.
2. Custom error message: Custom error message that will be shown if the validation fails.
Imagine the following example. You want the user to specify a domain name. The value entered should contain only the domain, for example, “docs.typo3.org” instead of “https://docs.typo3.org“. The regular expression for this use case would be /^[a-z]+.[a-z]+.[a-z]$/.
The validator is available for the following form elements:
1. Text
2. Textarea
3. Password
4. Advanced password
5. Telephone number
6. URL

Date range

The validator checks whether the entered value is within the specified date range. The range can be defined by specifying a start and/ or end date. The settings of the validator are as follows:
1. Start date: Select the beginning of the date range (input: YYYY-MM-DD).
2. End date: Select the end of the date range (input: YYYY-MM-DD).
3. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. Date

Number of submitted values

The validator checks whether the entered value, which is defined in a minimum and a maximum, contains the specified number of elements. The settings of the validator are as follows:
1. Minimum: The minimum number of values submitted.
2. Maximum: The maximum number of submitted values.
3. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
- Multi checkbox
- Multi select

File size

The validator checks a file resource for its file size. The settings of the validator are as follows:
1. Minimum: The minimum file size that is accepted (default: 0B).
2. Maximum: The maximum file size that will be accepted (default: 10M).
Use the format B | K | M | G (byte | kilobyte | megabyte | gigabyte) when entering file sizes. For example: 10M means 10 megabytes. Please note that the maximum file size also depends on the settings of your server environment.
The validator is available for the following form elements:
1. File upload
2. Image upload

Date/ Time

The validator checks if the entered value is a valid date and/ or time. The settings of the validator are as follows:
1. Custom error message: Custom error message that will be shown if the validation fails.
The validator is available for the following form elements:
1. Date picker (jQuery)

Finishers

Let’s get the overview for the finishers. Reference link: https://docs.typo3.org/c/typo3/cms-form/main/en-us/E/Finishers/Index.html#finishers-1

Email to the sender (form submitter)

This finisher sends an email to the form submitter – i.e. the user – with the contents of the form. The settings of the finisher are as follows:

Subject:
1. Subject of the email.
2. { + }: Overview of existing form elements – the variable will be replaced by the user’s input.
Recipients:
1. Recipient of the email.
2. Email Address: Email address of a recipient, e.g. “some.recipient@example.com” or “{email-1}”.
3. Name: Name of a recipient, e.g. “Some Recipient” or “{text-1}”.
4. [ + ]: Adds a new line for another recipient.
Sender address:
1. Email address of the sender, e.g. “your.company@example.com“
2. { + }: Overview of existing form elements – the variable will be replaced by the user’s input.
Sender name:
1. Name of the sender, e.g. “Your Company”.
2. { + }: Overview of existing form elements – the variable will be replaced by the user’s input.
Reply-to Recipients:
1. Email address which will be used when someone replies to the email.
2. Email Address: Email address for reply-to.
3. Name: Name for reply-to.
4. [ + ]: Adds a new line for another reply-to address.
CC Recipients:
1. Email address to which a copy of the email is sent. The information is visible to all other recipients.
2. Email Address: Email address for CC.
3. Name: Name for CC.
4. [ + ]: Adds a new line for another CC address.
BCC Recipients:
1. Email address to which a copy of the email is sent. The information is not visible to any of the recipients.
2. Email Address: Email address for BCC.
3. Name: Name for BCC.
4. [ + ]: Adds a new line for another BCC address.
Add HTML part:
1. Activate this option to send the email as HTML as well.
Attach uploads:
1. Activate this option to receive the uploaded files/ images via email.
Translation language:
1. The labels of the form elements will be displayed in the selected language.
Title:
1. The title, being shown in the Email. The title is rendered in the header section right above the email body. Do not confuse this field with the subject of your email.
2. { + }: Overview of existing form elements – the variable will be replaced by the user’s input.

Email to receiver (you)

This finisher sends an email to the receiver – i.e. you as the owner of the website – with the contents of the form. The settings of the finisher are the same as for the finisher “Email to sender”.

Redirect to a page

This finisher redirects the user after submitting the form to a given page. Additional parameters can be added to the URL. The settings of the finisher are as follows:
1. Page: ID of the page to redirect to.
  1. [ Page ]: Choose a page from the page tree.
2. Additional parameters: URL parameters which will be appended to the URL.
3. URL fragment: ID of a content element identifier or a custom fragment identifier. This will be appended to the URL and used as a section anchor.

Delete uploads

This finisher removes the files, which have been transferred via an image or file upload. There is no additional configuration necessary. Use this finisher e.g. after the email finisher if you don’t want to keep the files in your TYPO3 instance.

Confirmation message

This finisher outputs a given text after the form has been submitted. The settings of the finisher are as follows:
1. Content element uid: ID of the desired content element.
  1. [ Page Content ]: Choose a content element from the page tree.
2. Text: Text which is displayed after the form has been successfully submitted.

Template edit and implement style to the form

To implement style in the form, let’s override the form extension and then edit the form template by adding classes to it. Then, we will implement the style in the form using the newly added classes. Reference link: https://docs.typo3.org/c/typo3/cms-form/main/en-us/I/Concepts/FrontendRendering/Index.html

Form override

Follow the below steps to override the form:

Go to your TYPO3 setup.
Go to Admin Tools > Extensions, select “Installed Extensions” and select “All”, search for ‘form’ and download the extension “TYPO3 CMS Form” in your local system.
You can override the form in any extension, and if you don’t have any extension in your TYPO3 setup, you can override the form directly from the fileadmin. Let’s see both ways to override the form.

Override the form by using the extension

Make sure that the extension in which you are going to override the form extension is enabled in your TYPO3 setup.

Partials: After downloading the form extension, go to the extension folder and go to the folder /Resources/Private/Frontend/Partials, copy all the things and then go to your TYPO3 setup, go to any of your extension’s partial folder, the path is: public_html/typo3conf/ext/<my_ext>/Resources/Private/Partials, then create a folder with any name, here let’s create the folder “Forms” and paste all the things from partial folder to here.
Template: Then go to the /Resources/Private/Frontend/Templates folder in your downloaded form extension, copy all the things and go to your TYPO3 setup, go to the extension’s template folder, the path is: public_html/typo3conf/ext/<my_ext>/Resources/Private/Templates, then create the folder for forms, let’s create a folder “Forms” and paste all the things in this folder.

Yaml: Let’s create the ‘yaml file’ for the custom form. Go to public_html/typo3conf/ext/<my_ext>/Configuration and create a folder Yaml. Create the file ‘CustomFormSetup.yaml‘ into the Yaml folder. The file path will be: public_html/typo3conf/ext/<my_ext>/Configuration/Yaml/CustomFormSetup.yaml and put the below code into the file.

TYPO3:
  CMS:
    Form:
      
      prototypes:
        standard:
          formElementsDefinition:
            Form:
              renderingOptions:
                templateRootPaths:
                  100: "EXT:<my_ext>/Resources/Private/Templates/Forms/"
                partialRootPaths:
                  100: "EXT:<my_ext>/Resources/Private/Partials/Forms/"

Make sure you have added your extension’s folder name in the place of <my_ext> in the above code.
If the TYPO3 version is older, the above code might not be working for you, in that case, please add the code given below:

TYPO3:
  CMS:
    Form:
      persistenceManager:
        allowedExtensionPaths:
          1000: EXT:<my_ext>/Resources/Private/Forms
        allowSaveToExtensionPaths: true
        allowDeleteFromExtensionPaths: true

      prototypes:
        standard:
          formElementsDefinition:
            Form:
              renderingOptions:
                templateRootPaths:
                  100: "EXT:<my_ext>/Resources/Private/Templates/Forms/"
                partialRootPaths:
                  100: "EXT:<my_ext>/Resources/Private/Partials/Forms/"

Typoscript: Now add the below code to your extension’s setup.typoscript file to call the files. File path: public_html/typo3conf/ext/<my_ext>/Configuration/TypoScript/setup.typoscript

plugin.tx_form {
    view {
        templateRootPaths.100 = EXT:<my_ext>/Resources/Private/Templates/Forms/
        partialRootPaths.100 = EXT:<my_ext>/Resources/Private/Partials/Forms/ 
    }
    settings {
        yamlConfigurations {
            200 = EXT:<my_ext>/Configuration/Yaml/CustomFormSetup.yaml
        }
    }
}

Make sure you have added your extension’s folder name in the place of <my_ext> in the above code.

Then to check if the Typoscript is added or not, go to the TYPO3 admin panel, Site Management > Typoscript, select “Active typoscript” and open the “Configuration” for “Setup” and check plugin > tx_form. Your overridden files should be included here as you can see in the screenshot below:
Let’s edit the form template file by adding a class attribute to it. Open the file: public_html/typo3conf/ext/<my_ext>/Resources/Private/Templates/Forms/Form.html and add a class attribute and class name as you can see in the screenshot below:
Let’s check in the front-end the class attribute has been added or not. Go to front-end and inspect the element.
You can implement style by using this unique class. Now if you want to add a class for a specific field, you can do that from the field’s HTML file. Suppose you want to add a unique class for the textarea field, go to public_html/typo3conf/ext/employee/Resources/Private/Partials/Forms/Textarea.html and add a class name as you can see in the screenshot below:

You can see in the below screenshot that the class has been added to the textarea field:
Let’s create a CSS file to implement the style.
1. Go to public_html/typo3conf/ext/<my_ext>/Resources/Public/css folder and create a CSS file custom_form.css. You can give any name to the file.
2. Now include that file in setup.typoscript file by adding the given code below to the public_html\typo3conf\ext\<my_ext>\Configuration\TypoScript\setup.typoscript
```
includeCSS {		
        customForm = EXT:employee/Resources/Public/css/custom_form.css
	}
```
3. Then add the style to the public_html/typo3conf/ext//Resources/Public/css/custom_form.css file.
```
.contact_one{
    padding: 50px 300px;
}

.contact_one .btn-toolbar{
    margin-top: 10px;
}

.contact_one h2{
    margin-bottom: 40px;
    text-decoration: underline;
}
```
And you will see the form like this on front-end:

Override the form from fileadmin (without extension)

If you don’t have any extension in your TYPO3 setup and you don’t want to create any extension, then you can override the form from the fileadmin. Follow the below process to override the form directly from the fileadmin.

Partials: After downloading the form extension, go to the extension folder and go to the folder /Resources/Private/Frontend/Partials, copy all the things and then go to your TYPO3 setup, go to public_html/fileadmin and create a Folder structure Resources/Private/Partials/Forms and paste all the things from partial folder to here.
Template: Then go to the /Resources/Private/Frontend/Templates folder in your downloaded form extension, copy all the things and go to your TYPO3 setup, go to public_html/fileadmin/Resources/Private/Templates/Forms and paste all the things in this folder.

Yaml: Let’s create the ‘yaml file’ for the custom form. Go to public_html/fileadmin and create Configuration folder and create Yaml folder into the Configuration folder, the folder structure will be public_html/fileadmin/Configuration/Yaml, then create the file CustomFormSetup.yaml into this folder and add the code given below:

TYPO3:
  CMS:
    Form:
      prototypes:
        standard:
          formElementsDefinition:
            Form:
              renderingOptions:
                templateRootPaths:
                  100: "EXT:<my_ext>/Resources/Private/Templates/Forms/"
                partialRootPaths:
                  100: "EXT:<my_ext>/Resources/Private/Partials/Forms/"

If the TYPO3 version is older, the above code might not be working for you, in that case, please add the code given below:

TYPO3:
  CMS:
    Form:
      persistenceManager:
        allowedExtensionPaths:
          1000: EXT:<my_ext>/Resources/Private/Forms
        allowSaveToExtensionPaths: true
        allowDeleteFromExtensionPaths: true

      prototypes:
        standard:
          formElementsDefinition:
            Form:
              renderingOptions:
                templateRootPaths:
                  100: "EXT:<my_ext>/Resources/Private/Templates/Forms/"
                partialRootPaths:
                  100: "EXT:<my_ext>/Resources/Private/Partials/Forms/"

Typoscript: You will have to write the typoscript in the admin panel. Open the TYPO3 admin panel, go to Site Management > Typoscript, select the root page and select the “Edit Typoscript Record” option and click on the “Setup”.

You will get the below screen where you can add the typoscript.

Add the below code in typoscript
```
plugin.tx_form {
    view {
        templateRootPaths.100 = fileadmin/Resources/Private/Templates/Forms/
        partialRootPaths.100 = fileadmin/Resources/Private/Partials/Forms/ 
    }
    settings {
        yamlConfigurations {
            200 = fileadmin/Configuration/Yaml/CustomFormSetup.yaml
        }
    }
}
```
To add the class in the form template, go to fileadmin/Resources/Private/Templates/Forms/Form.html and add a class attribute if it is not there and assign a unique class as you can see in the screenshot below:
Now check your front-end and inspect the element and you will see the class has been added to the form.
Let’s add the CSS to the form.
1. Go to public_html/fileadmin/Resources and create the folder Public and Create CSS folder into it.
2. Now you should have the folder structure public_html/fileadmin/Resources/Public/css and create the file custom_form.css (you can give any name to the file.)
3. Then add the given code below to the custom_form.css file
```
.contact_one{
    padding: 50px 300px;
    background: #f0f8ff;
}

.contact_one .btn-toolbar{
    margin-top: 10px;
}

.contact_one h2{
    margin-bottom: 40px;
    text-decoration: underline;
}
```
4. Now include the CSS file into the typoscript. Add the below code in typoscript:
```
  page { 
  includeCSS {		
        customForm = fileadmin/Resources/Public/css/custom_form.css
	}
    }
```
  Below is the screenshot of the typoscript:
5. After the above changes, clear the cache and reload the front-end and you will see the form in the screenshot below:

Actions on form

Let’s see which actions can be performed on the form.
Go to your TYPO3 backend and click on the “Forms” tab from the left sidebar.
You will see the list of the forms as seen in the screenshot below, to perform action on the form, click on the 3 dots on the right side.
If the form is already in use, you will not see the option to delete the form.

Duplicate this form

Click on the “Duplicate this form” option, add the name of the form, and click on the next button as did at the time of the new form creation, the duplicate form will be created and will be added to the list as you can see in the screenshot below:

Show reference for this form

When you click on the “Show reference for this form”, you will see the popup with the list of pages where the form is added. (the screenshot is for the “Contact Form – Predifined”)

Delete the form

To delete the form, first remove the form from the page we have used it. We used the form in the contact page, let’s remove it from there.
Click on the “Delete record” button to remove the form from the page.
You can see in the below screenshot that the form “Contact Form – Predefined” is removed from the contact page.
Let’s delete the form now. You can see in the below screenshot that the delete option for the “Contact Form – Predefined” form is enabled now:
After clicking on the “Delete this form”, you will see a popup, click the button “Remove” to delete the form completely.
After clicking on the remove button you will see the form is not there in the list.

Documentation