Create a basic contact form

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 after sending the form

All fields shall be required in this case.

Let's get started:

  1. Create a new form

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

    The form module - click the button

    The form module without any forms - click the button to create one.

  2. Choose a name

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

    The form creation wizard - step 1

  3. Click "Next"

    As we are creating a basic form, step 2 will be automatically done and we directly see step 3. Click "Next" again.

    The form creation wizard - step 3

  4. Create new element

    You will now see the form editor view for your new form. Click on "Create new element" to add a field to your form.

    Create New Element Button

  5. Add "First Name"

    The first field we want to create is the "First Name". Choose "Text" from "Basic Elements" to create a simple text field for the first name.

    Create New Text Element

  6. Set options for "First Name"

    After selecting the "Text" type, we get new options in the inspector panel:

    Fields for a simple text field

    Fields for a simple text field.

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

  7. Repeat

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

    Fields for the "Last Name" text field.

  8. Add Email address

    Similar to the previous two fields, add an email field. Choose type email to automatically get an email field. Set an error message if the validation fails.

    Fields for the email field.

  9. Add textarea for message

    Choose the type Textarea for the message field.

    Choose textarea field.

    The "Textarea" type in the overview.

  10. Add options for the message field

    Set label, description and error messages.

    Configure textarea field.

    Configure the message field.

  11. Send an email on form submit

    When a user submits the form, we want to get an email. In form, that's what we call "a finisher" as it happens when "finishing" the form.

    Adding a finisher

    Adding a finisher

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

  12. Configure the email finisher

    You can configure the email finisher: Choose the subject, recipient, name and CC.

    Configuring the finisher
    Configuring the finisher - part two

    You can use fields from the form to pre-fill values via the {+} button. In our case, we want to configure the sender's name to use the first and last name from the form.

  13. Save the form

    Click on "Save" to save the current state of the form - even if we aren't finished it's a good idea to save our state sometimes so we minimize the risk to lose data.

    Saving the form

  14. Add confirmation finisher

    After the user submitted the form we want to display a confirmation/ thank you message. To do that, choose the "Confirmation message" finisher.

    Choose confirmation finisher

  15. Add confirmation message

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

    Set a confirmation message

  16. Preview the form

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

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

  17. Remove the "Step" headline

    The "Step" headline does not make sense for our form, as we only have a single step and the headline should be configured on the page where we will insert the form later. To remove it, leave the preview and click on "Step" in the tree view on the left side. Empty the field with "Step" in it.

  18. Save the form

    You can save the form and do another review - now it looks fine. Let's go and insert it on a page.

  19. Choose a page for your form

    The form you configured can now be inserted on any page you want. Go to the page module and choose one.

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

  20. Insert Plugin

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

    Select a page for your form

  21. Choose your form definition

    In the plugin tab, choose the form definition you just created. You can also use the "normal" TYPO3 fields like header to render a headline for your form.

    Choose the form definition

    Having a separate form definition allows you to insert the form on many pages, customizing for example the headline in each case.

  22. Save the content element and enjoy!

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

    The finished form

    Depending on your frontend, your form might look different.

    Congratulations, you did it! You created a fully functional contact form.