TYPO3 v15 dev-main snapshot ()

Documentation/E/Accessibility/Index.rst

@@ -0,0 +1,46 @@
+.. include:: /Includes.rst.txt
+
+.. _accessibility:
+
+=============
+Accessibility
+=============
+
+There are numerous accessibility rules when it comes to making a form accessible
+to a large number of users. This includes accessibility to groups such as people
+with a disability, the elderly, non-native speakers, etc.
+
+The following should be kept in mind by editors creating forms
+in the backend form editor:
+
+Labels
+======
+
+Always use clear, descriptive labels in the :guilabel:`Label` field. Simply
+putting the label in field :guilabel:`Placeholder` is not
+considered accessible.
+
+Descriptions
+============
+
+Add an extended description in the field :guilabel:`Description`.
+
+Placeholder
+===========
+
+The :guilabel:`Placeholder` field should not contain the label.
+It should contain example content to make filling out the field easier for
+users.
+
+Autocomplete
+============
+
+The autocomplete property should be used whenever a field contains personal
+information. This property can then be used by assistive
+technology to aid users to fill out forms. Select the desired purpose from the
+select :guilabel:`Autocomplete`. See `Input Purposes for User Interface
+Components at w3.org <https://www.w3.org/TR/WCAG21/#input-purposes>`__ for
+an explanation of which purposes to use.
+
+If additional input purposes are needed, your integrator or developer can
+:ref:`add additional input purpose options <concepts-autocomplete-add-options>`.

Documentation/E/Finishers/Index.rst

@@ -0,0 +1,36 @@
+..  include:: /Includes.rst.txt
+
+..  _finishers:
+..  _finishers-introduction:
+..  _finishers-overview-of-finishers:
+
+=========
+Finishers
+=========
+
+Any number of "finishers" can be added to a form. Finishers are actions that will
+be executed once the form has been submitted by a user.
+
+In the following chapter, each finisher and its function will be explained. Not all
+finishers can be added via the form editor. There are some
+finishers that can only be added by integrators/ administrators. The following
+finishers are available by default:
+
+*   :ref:`Email to sender (form submitter) <finishers-email-to-sender>`
+*   :ref:`Email to receiver (you) <finishers-email-to-receiver>`
+*   :ref:`Redirect to a page <finishers-redirect>`
+*   :ref:`Delete uploads <finishers-delete-uploads>`
+*   :ref:`Confirmation message <finishers-confirmation-message>`
+
+..  figure:: Images/form_finishers_overview.png
+    :alt: Form editor - add new finishers.
+
+    Form editor - add new finishers
+
+..  important::
+
+    Finishers are executed in the order that they appear in your form definition.
+    This is particularly important for the  ``Redirect finisher``. Make sure
+    this finisher is the very last one to be executed. The ``Redirect finisher``
+    stops the execution of all subsequent finishers in order to perform the redirect.
+    Finishers defined after the ``Redirect finisher`` will be ignored.

Documentation/E/FormElements/Index.rst

@@ -0,0 +1,651 @@
+.. include:: /Includes.rst.txt
+
+
+.. _form-elements:
+
+==================================
+Form elements and their properties
+==================================
+
+
+.. _form-elements-overview-of-form-elements:
+
+Overview of form elements
+-------------------------
+
+.. figure:: Images/form_elements_all.png
+   :alt: Overview of all form elements included in the TYPO3 core. There may
+    be fewer or different elements in your installation.
+
+   Overview of all form elements included in TYPO3. There may be
+   fewer or different elements in your installation.
+
+
+.. _form-elements-settings:
+
+Form element settings
+---------------------
+
+Most form elements have these 7 basic settings:
+
+- **Label**: Label of the element.
+- **Description**: Description of the element. Can be used to
+  provide the user with more information about the expected input.
+- **Placeholder**: Example of the expected content. Disappears with the user's
+  input.
+- **Default value**: Preset value. Pre-entered by the system and does not
+  disappear with the user's input.
+- **Mandatory field**: Specify whether the field is a mandatory field and thus
+  must be filled in by the user.
+- **Custom error message**: Custom message that will be displayed to the user
+  if the field is not filled in. If you don't provide a message, a default
+  message is shown.
+- **Validators**: Validators are used to check the data entered in the
+  field. The system displays error messages if there are errors.
+
+.. warning::
+
+   If a form element is a required field or validators fail, error
+   messages are displayed by the browser. These error texts and formatting cannot be
+   changed by editors or integrators as they are controlled
+   by the browser/operating system.
+
+
+.. _form-elements-basic-elements:
+
+Basic form elements
+-------------------
+
+
+.. _form-elements-basic-elements-text:
+
+Text
+====
+
+A single-line text field, e.g. for entering short information such as name,
+address, location. This element has the
+:ref:`basic settings <form-elements-settings>`.
+
+.. figure:: Images/form_elements_text_1.png
+   :alt: Element 'Text' - preview in the frontend.
+
+   Element 'Text' - preview in the frontend.
+
+.. figure:: Images/form_elements_text_2.png
+   :alt: Settings for the 'Text' element.
+
+   Settings for the 'Text' element.
+
+
+.. _form-elements-basic-elements-textarea:
+
+Textarea
+========
+
+A multi-line text field, e.g. for the free input of continuous text. This allows
+the user to provide a short text such as a message. This element has the
+:ref:`basic settings <form-elements-settings>`.
+
+.. figure:: Images/form_elements_textarea_1.png
+   :alt: Element 'Textarea' - preview in the frontend.
+
+   Element 'Textarea' - preview in the frontend.
+
+.. figure:: Images/form_elements_textarea_2.png
+   :alt: Settings for the 'Textarea' element.
+
+   Settings for the 'Textarea' element.
+
+
+.. _form-elements-basic-elements-password:
+
+Password
+========
+
+A single-line text field for entering a password. The browser "hides" the text
+input, i.e. the entered characters are not visible. This element has the
+:ref:`basic settings <form-elements-settings>`.
+
+.. figure:: Images/form_elements_password_1.png
+   :alt: Element 'Password' - preview in the frontend.
+
+   Element 'Password' - preview in the frontend.
+
+.. figure:: Images/form_elements_password_2.png
+   :alt: Settings for the 'Password' element.
+
+   Settings for the 'Password' element.
+
+
+.. _form-elements-special-elements:
+
+Special elements
+================
+
+Sometimes it is better to use special elements instead of simple text
+elements. Mobile devices such as smartphones display on-screen keyboards. If you
+use the "Email address" element the form field on the device will contain a
+"@" character in a central position and a validator will be triggered
+that checks for the input format "firstname.lastname@example.org".
+
+
+.. _form-elements-special-elements-email:
+
+Email address
+==============
+
+A single-line field for entering an email address. This element has the
+:ref:`basic settings <form-elements-settings>`. In addition, the field has an
+`Email` validator (this is the only validator available for this form element).
+
+.. figure:: Images/form_elements_email_1.png
+   :alt: Element 'E-mail' - preview in the frontend.
+
+   Element 'E-mail' - preview in the frontend.
+
+.. figure:: Images/form_elements_email_2.png
+   :alt: Settings for the 'E-mail' element.
+
+   Settings for the 'E-mail' element.
+
+
+.. _form-elements-special-elements-telephone-number:
+
+Telephone number
+================
+
+A single-line text field for entering a phone number. This element has the
+:ref:`basic settings <form-elements-settings>`.
+
+.. figure:: Images/form_elements_telephone_1.png
+   :alt: Element 'Telephone' - preview in the frontend.
+
+   Element 'Telephone' - preview in the frontend.
+
+.. figure:: Images/form_elements_telephone_2.png
+   :alt: Settings for the 'Telephone' element.
+
+   Settings for the 'Telephone' element.
+
+
+.. _form-elements-special-elements-url:
+
+URL
+===
+
+A single-line text field for entering a URL. A URL is typically an internet
+address, such as that of your website. This element has the
+:ref:`basic settings <form-elements-settings>`
+
+.. figure:: Images/form_elements_url_1.png
+   :alt: Element 'URL' - preview in the frontend.
+
+   Element 'URL' - preview in the frontend.
+
+.. figure:: Images/form_elements_url_2.png
+   :alt: Settings for the 'URL' element.
+
+   Settings for the 'URL' element.
+
+
+.. _form-elements-special-elements-number:
+
+Number
+======
+
+A single-line text field for entering a number. A user can increase and decrease
+the number in preconfigured steps using visual controls in the browser.
+This element has the :ref:`basic settings <form-elements-settings>`.
+By default, the field has a `Number` validator. Additional settings:
+
+- **Step**: Here you can enter a number that defines the step size. The step size
+  is the amount by which a number is increased or decreased in the frontend.
+
+.. figure:: Images/form_elements_number_1.png
+   :alt: Element 'Number' - preview in the frontend.
+
+   Element 'Number' - preview in the frontend.
+
+.. figure:: Images/form_elements_number_2.png
+   :alt: Settings for the 'Number' element.
+
+   Settings for the 'Number' element.
+
+
+.. _form-elements-special-elements-date:
+
+Date
+====
+
+A single-line text field for entering a date.
+`Most modern browsers <https://caniuse.com/input-datetime>`_ will also display a calendar from
+which the user can select the date. This element has the
+:ref:`basic settings <form-elements-settings>`. Additional settings:
+
+- **Frequency**: default value "1" means that the user can select every day.
+
+.. figure:: Images/form_elements_date_1.png
+   :alt: Element 'Date' - preview in the frontend.
+
+   Element 'Date' - preview in the frontend.
+
+.. figure:: Images/form_elements_date_2.png
+   :alt: Settings for the 'Date' element.
+
+   Settings for the 'Date' element.
+
+
+.. _form-elements-select-elements:
+
+Select elements
+---------------
+
+Select elements (including checkboxes, radio buttons and selectboxes) do not
+allow a user to enter text. Instead, they offer a predefined
+number of choices, for example, salutation options.
+
+.. note::
+
+    Select elements behave differently to text fields if they are marked as
+    "required".Checkboxes with multiple choices, for example, cannot be
+    be required fields. This is not supported by the HTML standard.
+
+
+.. _form-elements-select-elements-checkbox:
+
+Checkbox
+========
+
+A simple checkbox. This element has the :ref:`basic settings <form-elements-settings>`.
+
+.. figure:: Images/form_elements_checkbox_1.png
+   :alt: Element 'Checkbox' - preview in the frontend.
+
+   Element 'Checkbox' - preview in the frontend.
+
+.. figure:: Images/form_elements_checkbox_2.png
+   :alt: Settings for the 'Checkbox' element.
+
+   Settings for the 'Checkbox' element.
+
+
+.. _form-elements-select-elements-single-select:
+
+Single selectbox
+================
+
+An element to create a drop-down list. This element has the
+:ref:`basic settings <form-elements-settings>`. Additional settings:
+
+- **First option**: Define the "empty option", i.e. the first element of the
+  selectbox. You can use this to provide additional guidance for the user.
+- **Choices**: A tool to insert and manage options.
+   - **Label**: Name of the option.
+   - **Value**: Value of the option. The system automatically sets the
+     "Value" to the "Label". You can leave it like this if you are
+     unsure of what you are doing.
+   - **Selected**: Check this to pre-select an option in the frontend.
+   - **[ + ]**: Adds a new line for a new option.
+
+.. figure:: Images/form_elements_singleSelect_1.png
+   :alt: Element 'Single select' - preview in the frontend.
+
+   Element 'Single select' - preview in the frontend.
+
+.. figure:: Images/form_elements_singleSelect_2.png
+   :alt: Settings for the 'Single select' element.
+
+   Settings for the 'Single select' element.
+
+
+.. _form-elements-select-elements-radiobutton:
+
+Radio buttons
+=============
+
+An element to display one or more radio buttons. This element has the
+:ref:`basic settings <form-elements-settings>`. Additional settings:
+
+- **Choices**: A tool to insert and manage the options.
+   - **Label**: Name of the option.
+   - **Value**: Value of the option. The system automatically sets the
+     "Value" to the "Label". You can leave it like this if you are
+     unsure of what you are doing.
+   - **Selected**: Check this to pre-select an option in the frontend.
+   - **[ + ]**: Adds a new line for a new option.
+
+.. figure:: Images/form_elements_radioBtn_1.png
+   :alt: Element 'Radio button' - preview in the frontend.
+
+   Element 'Radio button' - preview in the frontend.
+
+.. figure:: Images/form_elements_radioBtn_2.png
+   :alt: Settings for the 'Radio button' element.
+
+   Settings for the 'Radio button' element.
+
+
+.. _form-elements-select-elements-multi-checkbox:
+
+Multi checkbox
+==============
+
+An element to create one or more checkboxes. This element has the
+:ref:`basic settings <form-elements-settings>`. Additional settings:
+
+- **Choices**: A tool to insert and manage the options.
+   - **Label**: Name of the option.
+   - **Value**: Value of the option. The system automatically sets the
+     "Value" to the "Label". You can leave it like this if you are
+     unsure of what you are doing.
+   - **Selected**: Check this to pre-select an option in the frontend.
+   - **[ + ]**: Adds a new line for a new option.
+
+.. figure:: Images/form_elements_multiCheckbox_1.png
+   :alt: Element 'Multi checkbox' - preview in the frontend.
+
+   Element 'Multi checkbox' - preview in the frontend.
+
+.. figure:: Images/form_elements_multiCheckbox_2.png
+   :alt: Settings for the 'Multi checkbox' element.
+
+   Settings for the 'Multi checkbox' element.
+
+.. warning::
+
+    **HTML** does not check that "required" fields are filled out. They
+    are only checked after a form has been submitted.
+
+
+.. _form-elements-select-elements-multi-select:
+
+Multi select
+============
+
+An element to create a multiple selection. This element has the
+:ref:`basic settings <form-elements-settings>`. Additional settings:
+
+- **First option**: Define the "empty option", i.e. the first element of the
+  select. You can use this to provide additional guidance for the user.
+- **Choices**: A tool to insert and manage the options.
+   - **Label**: Name of the option.
+   - **Value**: Value of the option. The system automatically sets the
+     "Value" to the "Label". You can leave it like this if you are
+     unsure of what you are doing.
+   - **Selected**: Check this to pre-select an option in the frontend.
+   - **[ + ]**: Adds a new line for a new option.
+
+.. figure:: Images/form_elements_multiSelect_1.png
+   :alt: Element 'Multi select' - preview in the frontend.
+
+   Element 'Multi select' - preview in the frontend.
+
+.. figure:: Images/form_elements_multiSelect_2.png
+   :alt: Settings for the 'Multi select' element.
+
+   Settings for the 'Multi select' element.
+
+
+.. _form-elements-select-elements-country-select:
+
+Country select
+==============
+
+An element to create a country selectbox. This element has the
+:ref:`basic settings <form-elements-settings>` Additional settings:
+
+- **First option**: Define the "empty option", i.e. the first element of the
+  select. You can use this to provide additional guidance for the user.
+- **Prioritized countries**: A multi-selection of country names, which should
+  be listed as the top options in the form element.
+- **Only countries**: Restrict the countries to be rendered in the selection.
+- **Exclude countries**: Define which countries should not appear in the
+  selection.
+
+
+.. _form-elements-advanced-elements:
+
+Advanced elements
+-----------------
+
+
+.. _form-elements-advanced-elements-file-upload:
+
+File upload
+===========
+
+An element to upload a file to the :guilabel:`File > Filelist` module. This element has the
+:ref:`basic settings <form-elements-settings>`. Additional settings:
+
+- **Allowed Mime Types**: Select the allowed file extensions a user is able to
+  upload.
+- **Storage path for uploads**: Select the storage path in your TYPO3 installation.
+  This is where the uploaded file will be saved.
+
+.. figure:: Images/form_elements_fileUpload_1.png
+   :alt: Element 'File upload' - preview in the frontend.
+
+   Element 'File upload' - preview in the frontend.
+
+.. figure:: Images/form_elements_fileUpload_2.png
+   :alt: Settings for the 'File upload' element.
+
+   Settings for the 'File upload' element.
+
+.. error::
+
+    **Privacy issues**:
+    Keep in mind that the storage path you choose may not be protected. The path may
+    be indexed by your search and search engines. If you need to protect sensitive
+    documents, contact your administrator to create a secure storage path.
+
+
+.. _form-elements-advanced-elements-hidden:
+
+Hidden
+======
+
+A field that is not visible in the frontend. The form element is inside the red
+rectangle in the image. Such a field might be needed for technical functionality,
+e.g. to add hidden values to a form. This element has the
+:ref:`basic settings <form-elements-settings>`. Additional settings:
+
+- **Value**: Here you can set a value for the element.
+
+.. figure:: Images/form_elements_hidden_1.png
+   :alt: Element 'Hidden' - preview in the frontend.
+
+   Element 'Hidden' - preview in the frontend.
+
+.. figure:: Images/form_elements_hidden_2.png
+   :alt: Settings for the 'Hidden' element.
+
+   Settings for the 'Hidden' element.
+
+
+.. _form-elements-advanced-elements-image-upload:
+
+Image upload
+============
+
+An element to upload an image to :guilabel:`File > Filelist`. This element has the
+:ref:`basic settings <form-elements-settings>`. Other settings:
+
+- **Allowed Mime Types**: Select the file extensions a user is allowed to
+  upload.
+- **Storage path for uploads**: Select the storage path in your TYPO3 installation.
+  This is where the uploaded file will be saved.
+
+.. figure:: Images/form_elements_imageUpload_1.png
+   :alt: Element 'Image upload' - preview in the frontend.
+
+   Element 'Image upload' - preview in the frontend.
+
+.. figure:: Images/form_elements_imageUpload_2.png
+   :alt: Settings for the 'Image upload' element.
+
+   Settings for the 'Image upload' element.
+
+.. error::
+
+    **Privacy issues**:
+    Keep in mind that the storage path you choose may not be protected. The path may
+    be indexed by your search and search engines. If you need to protect sensitive
+    documents, contact your administrator to create a secure storage path.
+
+
+.. _form-elements-advanced-elements-advanced-password:
+
+Advanced password
+=================
+
+The element is analogous to the `Password` form element. A single-line text
+field is displayed for entering a password. The browser "hides" the text input,
+i.e. the entered characters are not visible. Another field is displayed below it
+so that the user has to repeat the password to prevent typing errors. This field
+is useful for registration forms. This element has the
+:ref:`basic settings <form-elements-settings>`. Additional settings:
+
+- **Confirmation label**: Label for the confirmation field.
+
+.. figure:: Images/form_elements_advancedPassword_1.png
+   :alt: Element 'Advanced password' - preview in the frontend.
+
+   Element 'Advanced password' - preview in the frontend.
+
+.. figure:: Images/form_elements_advancedPassword_2.png
+   :alt: Settings for the 'Advanced password' element.
+
+   Settings for the 'Advanced password' element.
+
+
+.. _form-elements-advanced-elements-static-text:
+
+Static text
+===========
+
+A field for static text. This text cannot be formatted, which means you can't
+insert links or highlight text. Instead, the text is output in the style of
+your website. The settings for this element are:
+
+- **Heading**: Heading for the element.
+- **Text**: Content for the element.
+
+.. figure:: Images/form_elements_staticText_1.png
+   :alt: Element 'Static text' - preview in the frontend.
+
+   Element 'Static text' - preview in the frontend.
+
+.. figure:: Images/form_elements_staticText_2.png
+   :alt: Settings for the 'Static text' element.
+
+   Settings for the 'Static text' element.
+
+
+.. _form-elements-advanced-elements-content-element:
+
+Content element
+================
+
+You can display any content elements that are on your website. The settings for
+this element are:
+
+- **Content element uid**: ID of the content element you want to display. You can
+  either enter the ID manually or select it via the page tree.
+  To do this, click on the "Page content" button.
+- **[ Page content ]**: Modal which displays the page tree. You can select
+  a page and the content element.
+
+.. figure:: Images/form_elements_contentElement_1.png
+   :alt: Element 'Content element' - preview in the frontend.
+
+   Element 'Content element' - preview in the frontend.
+
+.. figure:: Images/form_elements_contentElement_2.png
+   :alt: Settings for the 'Content element' element.
+
+   Settings for the 'Content element' element.
+
+
+.. _form-elements-container-elements:
+
+Container elements
+------------------
+
+Fieldset and grid elements are container elements that structure
+your form in terms of content or visual appearance. Container elements can
+be combined. For example, a fieldset can contain several grids.
+
+
+.. _form-elements-container-elements-fieldset:
+
+Fieldset
+========
+
+This container groups form elements based on content. This is
+important for screen readers and helps you to improve the accessibility of your form.
+For example, in an "Address" fieldset you could have
+street, house number, postal code and city form elements. The settings for
+this element are:
+
+- **Field group name**: Heading for the field group, e.g. "Address".
+
+.. figure:: Images/form_elements_fieldset_1.png
+   :alt: Element 'Fieldset' - preview in the frontend.
+
+   Element 'Fieldset' - preview in the frontend.
+
+.. figure:: Images/form_elements_fieldset_2.png
+   :alt: Element 'Fieldset' - preview in the backend.
+
+   Element 'Fieldset' - preview in the backend.
+
+.. figure:: Images/form_elements_fieldset_3.png
+   :alt: Settings for the 'Fieldset' element.
+
+   Settings for the 'Fieldset' element.
+
+
+.. _form-elements-container-elements-grid:
+
+Grid
+====
+
+Use this container element to place fields next to each other (create a visual structure).
+
+**The additional settings apply to the content elements inside the grid**:
+
+- **Configuration Grid Area**:
+   - Areas: **xs** (Very small), **sm** (Small), **md** (Medium), **lg** (Large),
+     **xl** (Extra large), **xxl** (Extra extra large).
+   - These are the "breakpoints". These are ranges of
+     resolutions or adaptations to different screen sizes. Smartphones,
+     for example, have a low resolution range (xs or sm) and desktop monitors
+     have a high resolution range (lg, xl or xxl). Use this to
+     abstractly control how many elements are displayed next to each other in
+     which resolution.
+- **Number of columns for grid area "xx"**:
+   - Enter a number for the selected area.
+   - The number determines how much space the field takes up on the different
+     screen sizes and therefore how many elements are displayed next to
+     each other.
+
+.. figure:: Images/form_elements_grid_1.png
+   :alt: Element 'Grid' - preview in the frontend.
+
+   Element 'Grid' - preview in the frontend.
+
+.. figure:: Images/form_elements_grid_2.png
+   :alt: Element 'Grid' - preview in the backend.
+
+   Element 'Grid' - preview in the backend.
+
+.. figure:: Images/form_elements_grid_3.png
+   :alt: Settings for the 'Grid' element - Part 1.
+
+   Settings for the 'Grid' element - Part 1.
+
+.. figure:: Images/form_elements_grid_4.png
+   :alt: Settings for the 'Grid' element - Part 2.
+
+   Settings for the 'Grid' element - Part 2.

Documentation/E/Index.rst

@@ -0,0 +1,61 @@
+.. include:: /Includes.rst.txt
+
+.. _forEditors:
+
+===========
+For Editors
+===========
+
+Introduction to forms
+---------------------
+
+Forms are provided by the **Form TYPO3 extension**. Form is a TYPO3 core
+extension which has been available by default since TYPO3 version 8.
+
+What can Form do?
+-----------------
+
+- TYPO3 core extension
+- flexible, extensible and easy to use
+- easy to use via drag-and-drop
+- live preview
+- form reuse
+- create templates for new forms
+- set mandatory fields
+- set finishers (downstream processing)
+- automatic spam protection
+- multi-step forms
+
+What can't Form do?
+-------------------
+
+Form has limited:
+
+- formatting of form labels
+- multilingual support
+- possibilities for textual design of emails
+
+When can I use Form?
+--------------------
+
+- for contact forms
+- for application forms
+- for simple or complex forms
+- for different forms on my pages
+
+Notes on data protection
+------------------------
+
+Data submitted in forms is not stored in the TYPO3 backend due to privacy reasons.
+There are TYPO3 extensions that retrofit this behavior but we do not recommend using these
+extensions. Instead, check if the form data can be transferred directly to your
+CRM or similar tools.
+
+..  toctree::
+    :maxdepth: 1
+
+    FormElements/Index
+    Validators/Index
+    Finishers/Index
+    Accessibility/Index
+    Tutorials/Index

Documentation/E/Tutorials/BasicForm/Index.rst

@@ -0,0 +1,219 @@
+.. include:: /Includes.rst.txt
+
+
+.. _editors-basicForm:
+
+===========================
+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 to the visitor after the form has been submitted
+
+All fields will be required fields.
+
+Let's get started:
+
+.. rst-class:: bignums-xxl
+
+#. Create a new form
+
+   Go to the :guilabel:`Web > Forms` module and create a new form by clicking on "Create new form".
+
+   .. figure:: Images/1_newForm.png
+      :alt: The form module - click the button
+
+      The form module without any forms - click the button to create one.
+
+#. Choose a name
+
+   Choose a name for your form - something you will recognize later on - and click "Next"
+
+   .. figure:: Images/2_newForm_wizard1.png
+      :alt: The form creation wizard - step 1
+
+#. Click "Next"
+
+   As we are creating a basic form, step 2 is done automatically and we go to step 3. Click "Next" again.
+
+   .. figure:: Images/2_newForm_wizard2.png
+      :alt: The form creation wizard - step 3
+
+#. 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.
+
+   .. figure:: Images/3_createElement_1.png
+      :alt: Create New Element Button
+
+#. Add "First Name"
+
+   Create a simple text field for the first name by clicking on "Text" in "Basic Elements".
+
+   .. figure:: Images/3_createElement_2.png
+      :alt: Create New Text Element
+
+#. Set options for "First Name"
+
+   Options for your new text field will be displayed in the inspector panel on the right:
+
+   .. figure:: Images/3_createElement_3.png
+      :alt: 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 users 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: Click the checkbox to make your field required.
+   5. Enter an error message for users who forget to fill out the field.
+   6. Add a "Non-XML text" validator to only allow simple text input.
+
+#. Repeat
+
+   Repeat the steps in 6 for the "Last Name" field.
+
+   .. figure:: Images/4_lastName.png
+      :alt: Fields for the "Last Name" text field.
+
+#. Add Email address
+
+   Now add an email field. Choose type `email`. Set an error message for if the validation fails.
+
+   .. figure:: Images/5_email.png
+      :alt: Fields for the email field.
+
+#. Add textarea for message
+
+   Add a `Textarea` field where the user can enter a message.
+
+   .. figure:: Images/6_textarea_1.png
+      :alt: Choose textarea field.
+
+      The "Textarea" type in the overview.
+
+#. Add options for the message field
+
+   Set label, description and error messages.
+
+   .. figure:: Images/6_textarea_2.png
+      :alt: Configure textarea field.
+
+      Configure the message field.
+
+#. 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".
+
+   .. figure:: Images/7_addFinisherEmail_1.png
+      :alt: 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)".
+
+#. Configure the email finisher
+
+   Choose a subject, the recipient, name and CC.
+
+   .. figure:: Images/7_addFinisherEmail_2.png
+      :alt: Configuring the finisher
+
+   .. figure:: Images/7_addFinisherEmail_3.png
+      :alt: Configuring the finisher - part two
+
+   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.
+
+#. 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.
+
+   .. figure:: Images/7_addFinisherEmail_4.png
+      :alt: Saving the form
+
+#. Add confirmation finisher
+
+   Add a "Confirmation message" finisher to display a confirmation/ thank you
+   message to the user after they have submitted the form.
+
+   .. figure:: Images/8_addFinisherConfirmation_1.png
+      :alt: Choose confirmation finisher
+
+#. Add confirmation message
+
+   Set a "Thank You" message in the "Confirmation Finisher" options.
+
+   .. figure:: Images/8_addFinisherConfirmation_2.png
+      :alt: Set a confirmation message
+
+#. 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.
+
+   .. figure:: Images/85_preview.png
+      :alt: Preview the form
+
+   1. Click on the preview icon and see a rudimentary preview of your form. Notice the "Step" headline.
+
+#. 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".
+
+#. Save the form
+
+   Save the form and check everything is ok - now it looks fine. Let's go and insert it on a page.
+
+#. 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.
+
+   .. figure:: Images/9_selectPageForForm.png
+      :alt: 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 for your form.
+
+#. Insert Plugin
+
+   In the content element wizard, choose "Form" (in "Form elements" tab).
+
+   .. figure:: Images/10_elementWizard.png
+      :alt: Select a page for your form
+
+#. Choose your form definition
+
+   In the plugin tab, choose the form definition you just created.
+
+   .. figure:: Images/10_chosenFormInCE.png
+      :alt: Choose the form definition
+
+   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.
+
+#. Save the content element and enjoy!
+
+   Save the content element and view your web page. You can now see your completed form.
+
+   .. figure:: Images/11_finishedForm.png
+      :alt: The finished form
+
+   Depending on your frontend, your form might look different.
+
+   Congratulations! You have created a fully functional contact form.
+

Documentation/E/Tutorials/Index.rst

@@ -0,0 +1,13 @@
+.. include:: /Includes.rst.txt
+
+
+.. _editorTutorials:
+
+=========
+Tutorials
+=========
+
+.. toctree::
+
+   BasicForm/Index
+   PhotoContest/Index