Создание контактной формы

Создать форму можно из модуля Веб > Формы / Web > Forms. Это системное расширение, которое должно быть активировано вашим администратором. Оно написано на языке TypoScript и полностью документировано в руководстве по системному расширению Form Framework.

Модуль предоставляет редакторам интерактивный интерфейс для создания любых форм, к примеру, контактной формы, формы подписки на рассылку или даже опроса. TYPO3 поставляется с одной уже созданной формой, которую можно использовать в начале работы.

  1. В модуле Веб > Формы / Web > Forms нажмите кнопку + Создать новую форму / + Create new form. На экране появится мастер создания новой формы.

    ../../_images/FormCreateNew.png

    Launching the Create new form wizard

  2. Выберите, следует ли создать пустую форму или использовать предопределенную форму. В этом случае выберите Предопределенная форма / Predefined Form.

    ../../_images/FormsSettingsStep1.png

    Choose Predefined form

  3. Выберите предопределенную Простая контактная форма / Simple contact form и введите название.

    ../../_images/FormsSettingsStep2.png

  4. Проверьте настройки и еще раз нажмите кнопку Далее / Next.

    ../../_images/FormsSettingsStep3.png

  5. В списке Начальный шаблон / Start template выберите "Простая контактная форма" / "Simple contact form" и введите название формы.

    ../../_images/FormsNewForm.png

    New form based on template

    Предопределенная "Простая контактная форма" / "Simple contact form" поставляется с некоторыми уже настроенными параметрами, но их можно редактировать и добавлять дополнительные поля. Например, можно удалить страницу "Резюме" / "Summary" и изменить надписи на кнопках.

  6. Добавьте форму на страницу таким же образом, как и любой другой 'элемент содержимого'. На вкладке Элементы формы / Form elements выберите "Форма" / "Form".

  7. В элементе содержимого формы перейдите на вкладку Дополнение / Plugin и в списке Определение формы / Form definition выберите свою форму.

    ../../_images/FormsFormDefinition.png

    Choose your form on the Plugin tab

  8. На вкладке Общие / General введите название формы, сохраните и закройте запись.

    В результате страница должна выглядеть примерно так:

    ../../_images/FormOutput.png

    The contact form in the frontend

Создание формы с нуля

  1. В модуле Веб > Формы / Web > Forms нажмите кнопку + Создать новую форму / + Create new form.

  2. В мастере Создание новой формы / Create new form выберите создание пустой формы.

  3. Задайте название формы, нажмите Далее / Next и Завершить / Finish.

    На экране появляется пустая форма.

    ../../_images/FormsBlankForm.png

    Create a new form from scratch

  4. Нажмите кнопку Создать новый элемент / Create new element. На экране появится диалог Новый элемент / New element.

    ../../_images/FormsNewElement.png

    Create new element in form

    По умолчанию TYPO3 поставляется с более чем двадцатью полями форм, включая:

    • Основные элементы, такие как текстовые поля или поля для ввода пароля.

    • Специальные элементы, требующие специальной проверки параметров (телефонных номеров или дат).

    • Элементы выбора, такие как флажки или многовариантный выбор.

    • Дополнительные элементы, для которых действуют специальные правила, например, загрузка файлов пользователями или выбор даты в календаре.

    • Элементы-контейнеры для визуальной организации опросов.

    Выбрав элемент формы, можно настроить параметры отображения этого поля.

  5. Выберите элемент Текст / Text, и поле будет добавлено в форму. Справа можно настроить параметры поля (например, текст-заполнитель / placeholder и проверку поля).

    ../../_images/FormsFieldSettings.png

    Create a new form from scratch

  6. Щелкните на пиктограмме Предпросмотр / Preview mode, чтобы увидеть, как ваша форма будет отображаться на сайте. Для возврата к редактированию формы используйте пиктограмму Правка / Edit mode.

    ../../_images/FormsPreview.png

    Create a new form from scratch

Работа с формами

Если в форму добавлено несколько полей, их можно перетаскивать, меняя порядок расположения.

Нажмите кнопку Настройки / Settings в верхней части формы, для добавления Финишеров / Finishers, вроде сообщения о подтверждении или перенаправления на другую страницу.

Добавление финишеров к форме

Можно интегрировать расширения с существующими формами. Например, если вы занимаетесь продажами, можно интегрировать расширение с Mautic, и любые изменения в форме TYPO3 будут обновляться в Mautic, что позволит вам без проблем отслеживать потенциальных клиентов (лиды).

Tip

Существует множество других свойств, которые могут быть заданы. Они описаны в руководстве по системному дополнению "Form Framework".