Grav - Формы

Вы можете создать форму, используя formплагин доступен по этой ссылке . Найдите плагин формы и установите его в папку Grav.

Вы также можете установить этот плагин с помощью команды $ bin/gpm install Form. Перейдите в корневую папку Grav и введите эту команду. Он автоматически загрузит плагин формы и установит необходимые зависимости.

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

Вы можете создать простую форму, которая может быть определена на странице YAML frontmatter. Ниже приведен пример формы -

---
title: Contact Form

form:
   name: contact

   fields:
      - name: name
         label: Name
         placeholder: Enter your name
         autofocus: on
         autocomplete: on
         type: text
         validate:
            required: true

      - name: email
         label: Email
         placeholder: Enter your email address
         type: email
         validate:
            required: true

      - name: message
         label: Message
         placeholder: Enter your message
         type: textarea
         validate:
            required: true

      - name: g-recaptcha-response
         label: Captcha
         type: captcha
         recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8
         recaptcha_not_validated: 'Captcha not valid!'
         validate:
            required: true

   buttons:
      - type: submit
         value: Submit
      - type: reset
         value: Reset

   process:
      - email:
         subject: "[Site Contact Form] {{ form.value.name|e }}"
         body: "{% include 'forms/data.html.twig' %}"
      - save:
         fileprefix: contact-
         dateformat: Ymd-His-u
         extension: txt
         body: "{% include 'forms/data.txt.twig' %}"
      - message: Thank you for getting in touch!
      - display: thankyou
---

В приведенном выше коде показана простая страница формы с полями имени, электронной почты, сообщения и Captcha. Когда вы отправляете информацию после заполнения формы, форма будет обработана путем добавленияprocess к фронтматеру YAML, как показано в коде.

В process поле использует следующую информацию -

  • В email опция использует два поля, например from поле укажите отправителя электронного письма и to в поле укажите получателя почты.

  • В subject использует [feedback][entered mail] вариант, при котором электронное письмо отправляется на введенный адрес электронной почты.

  • Тело письма указано в forms/data.html.twig файл, который находится в папке темы.

  • Данные ввода формы хранятся под user/dataпапка. Шаблон определен вforms/data.txt.twig файл, который находится в папке темы.

  • Создайте подстраницу под thankyou/ подпапка, которая будет перенаправлена ​​на эту страницу, когда пользователь отправит форму.

Вы можете использовать некоторые поля с плагином формы, как показано в следующей таблице -

Sr. No. Поле и описание
1

Captcha

Это поле защиты от спама, которое используется в вычислениях, чтобы определить, является ли пользователь человеком.

2

Checkbox

Он отображает простой флажок.

3

Checkboxes

Он отображает несколько флажков.

4

Date and Datetime

Оба поля используются для отображения даты и даты вместе со временем соответственно.

5

Email

Это поле электронной почты с проверкой.

6

Hidden

Он указывает скрытое поле.

7

Password

В нем указывается поле пароля.

8

Radio

Он отображает простые переключатели.

9

Select

Он предоставляет поле выбора.

10

Spacer

Позволяет добавить в форму заголовок, текст или горизонтальную линию.

11

Text

Отображает простое текстовое поле.

12

Textarea

Он отображает простое текстовое поле.

13

Display

Он отображает текст или поле инструкции, а не поле ввода.

Параметры полей

Каждое поле принимает следующие параметры, которые можно использовать для настройки внешнего вида в форме.

Sr. No. Параметр и описание
1

label

Он определяет поле метки.

2

validate.required

Это делает элемент необходимым.

3

validate.pattern

Он определяет шаблон проверки.

4

validate.message

Он отображает сообщение, когда проверка не выполняется.

5

type

Он определяет тип поля.

6

default

Он определяет тип поля по умолчанию.

7

size

Он отображает размер поля, такой как большой, x-маленький, средний, длинный, маленький.

8

name

Он определяет имя поля.

9

classes

Он использует строку с классами css.

10

id

Он определяет идентификатор поля.

11

style

Он определяет стиль поля.

12

title

Он определяет заголовок поля.

13

disabled

Он определяет, находится ли поле в отключенном состоянии.

14

placeholder

Это короткая подсказка, которая отображается в поле ввода до того, как пользователь вводит значение.

15

autofocus

Он указывает, что элемент ввода должен автоматически получать фокус при загрузке страницы.

16

novalidate

Он указывает, что данные формы не должны проверяться при отправке.

17

readonly

Он определяет поле как состояние только для чтения.

18

autocomplete

Он отображает параметры в поле, когда пользователь начинает вводить в поле, и отображает значения на основе ранее введенных значений.

Некоторые поля содержат определенные параметры, такие как -

Sr. No. Параметр и описание
1

date and datetime

Эти поля используют validate.min и validate.max для установки минимального и максимального значений.

2

spacer

Оно использует underline добавить <hr> тег, добавляет текстовые значения с помощью text и использует title как тег <h3>.

3

select

Оно использует multiple параметр, чтобы добавить несколько значений.

4

select and checkboxes

Оно использует options поле, чтобы установить доступные параметры.

5

display

Оно использует contentпараметр для отображения содержимого. Он устанавливаетmarkdown значение true, чтобы отображать содержимое.

6

captcha

Оно использует recatpcha_site_key и recaptcha_not_validated параметры.

Примечание о капче

У нас есть код для информации о капче в поле под названием g-recaptcha-response как показано ниже -

- name: g-recaptcha-response
   label: Captcha
   type: captcha
   recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8
   recaptcha_not_validated: 'Captcha not valid!'
   validate:
		required: true

ReCaptcha используется для защиты вашего сайта от спама и злоупотреблений. Он используетrecatpcha_site_keyвариант и отображает виджет на вашем сайте. Чтобы использовать reCaptcha, просто обратитесь к документации reCaptcha . Если reCaptcha неверный, он отобразит сообщение с использованиемrecaptcha_not_validated вариант.

Действия с формой

Эл. адрес

Вы можете отправить электронное письмо с определенными параметрами под process поле, как показано ниже -

- email:
	from: "{{ config.plugins.email.from }}"
	to: "{{ config.plugins.email.to }}"
	subject: "Contact by {{ form.value.name|e }}"
	body: "{% include 'forms/data.html.twig' %}"

Он использует опцию электронной почты, которая включает два поля; тоfrom поле указывает отправителя адреса электронной почты и toполе указывает получателя адреса электронной почты с помощью конфигурации плагина электронной почты. В поле электронной почты также используетсяsubject вариант, при котором электронное письмо отправляется на адрес электронной почты, введенный с темой [Связаться с] [введенное имя], а тело сообщения определяется в forms/data.html.twig файл темы.

Перенаправление на другую страницу

Вы можете перенаправить на другую страницу, используя message и display варианты, определенные в process поле.

process:
   - message: Thank you for getting in touch!
   - display: thankyou

В messageОпция устанавливает сообщение, которое должно отображаться, когда пользователь нажимает кнопку отправки. Когда пользователь отправляет форму, он должен быть перенаправлен на другую страницу. Создайте одну подстраницу подthankyou подпапка, где ваш form.mdфайл сохраняется. После отправки формы она будет перенаправлена ​​на страницу и отобразит указанное выше сообщение.

Подстраница называется thankyou/formdata.md будет иметь следующий контент.

---
title: Email sent
cache_enable: false
process:
   twig: true
---

## Your email has been sent!

Когда вы отправляете форму, плагин отправляет пользователю электронное письмо, и данные сохраняются под data/folder.

Сохранить

Он используется для сохранения данных в файл, который сохраняется под user/data папка.

Например -

process:
   - save:
      fileprefix: contact-
      dateformat: Ymd-His-u
      extension: txt
      body: "{% include 'forms/data.txt.twig' %}"

Данные будут храниться в текстовом формате с расширением txt. Тело взято изtemplates/forms/data.html.twig файл темы.

На следующем экране показана простая форма -