---
title: "Create a basic contact form"
manual: "Form"
version: "14.3"
permalink: "https://docs.typo3.org/permalink/typo3/cms-form:editors-basicform@14.3"
source: "E/Tutorials/BasicForm/Index.rst"
rendered: "2026-09-19T11:59:02+00:00"
---

# Create a basic contact form {#editors-basicform}

In this tutorial, you will learn how to create a basic contact form.

Let's define what we need:

-   contact information from our visitors: first name, last name, email address
-   the message from our visitor: a text area where they can enter their message
-   an email to us with their message
-   a confirmation message to the visitor after the form has been submitted

All fields will be required fields.

Let's get started:

1.  Create a new form

    Go to the **Web > Forms** module and create a new form by clicking on "Create new form".

    ![The form module - click the button](Images/1_newForm.png)
1.  Choose a name

    Choose a name for your form - something you will recognize later on - and click "Next"

    ![The form creation wizard - step 1](Images/2_newForm_wizard1.png)
1.  Click "Next"

    As we are creating a basic form, step 2 is done automatically and we go to step 3. Click "Next" again.

    ![The form creation wizard - step 3](Images/2_newForm_wizard2.png)
1.  Create new element

    The form editor view will now display your new form as below. Click on "Create new element" to add a field to your form.

    ![Create New Element Button](Images/3_createElement_1.png)
1.  Add "First Name"

    Create a simple text field for the first name by clicking on "Text" in "Basic Elements".

    ![Create New Text Element](Images/3_createElement_2.png)
1.  Set options for "First Name"

    Options for your new text field will be displayed in the inspector panel on the right:

    ![Fields for a simple text field](Images/3_createElement_3.png)

    Fields for a simple text field.

    1.  Label: Enter a label for your field - in this case "First Name".
    1.  Description: Enter a description - something that helps your users to know what they should enter.
    1.  Placeholder: Enter an example value for the field - this will be used as placeholder in the frontend.
    1.  Required Field: Click the checkbox to make your field required.
    1.  Enter an error message for users who forget to fill out the field.
    1.  Add a "Non-XML text" validator to only allow simple text input.
1.  Repeat

    Repeat the steps in 6 for the "Last Name" field.

    ![Fields for the "Last Name" text field.](Images/4_lastName.png)
1.  Add Email address

    Now add an email field. Choose type `email`. Set an error message for if the validation fails.

    ![Fields for the email field.](Images/5_email.png)
1.  Add textarea for message

    Add a `Textarea` field where the user can enter a message.

    ![Choose textarea field.](Images/6_textarea_1.png)
1.  Add options for the message field

    Set label, description and error messages.

    ![Configure textarea field.](Images/6_textarea_2.png)
1.  Send an email on form submit

    When a user submits a form, we want to be sent an email by TYPO3. In a form,
    this is what is called "a finisher" as it happens when the form is "finished".

    ![Adding a finisher](Images/7_addFinisherEmail_1.png)

    1.  Click on the form name on the top left - here you can edit general form settings.
    1.  Choose a finisher on the right. To send an email to yourself, choose "Email to receiver (you)".
1.  Configure the email finisher

    Choose a subject, the recipient, name and CC.

    ![Configuring the finisher](Images/7_addFinisherEmail_2.png)

    ![Configuring the finisher - part two](Images/7_addFinisherEmail_3.png)

    You can use fields from the form to pre-fill values using the `{+}` button.
    Here we configure the sender's name from the first and last names in the form.
1.  Save the form

    Click on "Save" to save the current state of the form. Even if your form
    isn't complete, it's a good idea to save your state frequently to minimize
    the risk of losing data.

    ![Saving the form](Images/7_addFinisherEmail_4.png)
1.  Add confirmation finisher

    Add a "Confirmation message" finisher to display a confirmation/ thank you
    message to the user after they have submitted the form.

    ![Choose confirmation finisher](Images/8_addFinisherConfirmation_1.png)
1.  Add confirmation message

    Set a "Thank You" message in the "Confirmation Finisher" options.

    ![Set a confirmation message](Images/8_addFinisherConfirmation_2.png)
1.  Preview the form

    Your form is now fully configured and ready to be added to website pages. Save it again and let's preview it.

    ![Preview the form](Images/85_preview.png)

    1.  Click on the preview icon and see a rudimentary preview of your form. Notice the "Step" headline.
1.  Remove the "Step" headline

    The "Step" headline above does not make much sense, as there is only a single
    step in our form before a user submits it and the headline should be taken
    from the page where we will insert the form. To remove it, leave the preview
    and click on "Step" in the tree view on the left side. Delete the word "Step".
1.  Save the form

    Save the form and check everything is ok - now it looks fine. Let's go and insert it on a page.
1.  Choose a page for your form

    Your form can now be added to a web page. Go to the page module and choose a web page.

    ![Select a page for your form](Images/9_selectPageForForm.png)

    1.  Go to the page module.
    1.  Choose a page in the page tree (for example: "Contact" for the Contact form :)).
    1.  Click on `+ Content` to create a new content element for your form.
1.  Insert Plugin

    In the content element wizard, choose "Form" (in "Form elements" tab).

    ![Select a page for your form](Images/10_elementWizard.png)
1.  Choose your form definition

    In the plugin tab, choose the form definition you just created.

    ![Choose the form definition](Images/10_chosenFormInCE.png)

    Having a separate form definition allows you to insert the form on many web pages.
    You can then customize fields, for example, the headline, by using the "normal" TYPO3
    header field to render a headline for your form.
1.  Save the content element and enjoy!

    Save the content element and view your web page. You can now see your completed form.

    ![The finished form](Images/11_finishedForm.png)

    Depending on your frontend, your form might look different.

    Congratulations! You have created a fully functional contact form.