Грав - Формы - CoderLessons.com

Вы можете создать форму, используя плагин формы, доступный по этой ссылке . Найдите плагин формы и установите его в папке 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
---

Приведенный выше код показывает простую страницу формы с полями name, email, message и Captcha. Когда вы отправляете информацию после заполнения формы, форма будет обрабатываться путем добавления поля процесса в frontmatter YAML, как показано в коде.

Поле процесса использует следующую информацию —

Опция электронной почты использует два поля, таких как поле from, указывающее отправителя электронного письма, и поле, указывающее получателя электронного письма.
В теме используется опция [обратная связь] [введенная почта], в которой электронная почта отправляется на введенную электронную почту.
Тело электронного письма указывается в файле forms / data.html.twig, который находится в папке темы.
Входные данные формы хранятся в папке user / data . Шаблон определяется в файле forms / data.txt.twig, который находится в папке темы.
Создайте подстраницу в папке thankyou / sub, которая будет перенаправлена на эту страницу, когда пользователь отправит форму.

Опция электронной почты использует два поля, таких как поле from, указывающее отправителя электронного письма, и поле, указывающее получателя электронного письма.

В теме используется опция [обратная связь] [введенная почта], в которой электронная почта отправляется на введенную электронную почту.

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

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

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

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

Sr.No.	Поле и описание
1	Защитный код Это поле защиты от спама, которое используется в вычислениях, чтобы определить, является ли пользователь человеком.
2	флажок Он отображает простой флажок.
3	Флажки Он отображает несколько флажков.
4	Дата и дата и время Оба поля используются для отображения даты и даты вместе со временем соответственно.
5	Эл. адрес Это поле электронной почты с проверкой.
6	скрытый Указывает скрытое поле.
7	пароль Он определяет поле пароля.
8	Радио Он отображает простые радиокнопки.
9	Выбрать Это обеспечивает выбор поля.
10	распорка Позволяет добавить заголовок, текст или горизонтальную линию в форму.
11	Текст Он отображает простое текстовое поле.
12	Textarea Он отображает простое текстовое поле.
13	дисплей Он отображает текст или поле инструкции, а не поле ввода.

Защитный код

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

флажок

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

Флажки

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

Дата и дата и время

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

Эл. адрес

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

скрытый

Указывает скрытое поле.

пароль

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

Радио

Он отображает простые радиокнопки.

Выбрать

Это обеспечивает выбор поля.

распорка

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

Текст

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

Textarea

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

дисплей

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

Параметр Поля

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

Sr.No.	Параметр и описание
1	этикетка Он определяет поле метки.
2	validate.required Это делает элемент обязательным.
3	validate.pattern Указывает шаблон проверки.
4	validate.message Он отображает сообщение, когда проверка не проходит.
5	тип Он определяет тип поля.
6	дефолт Он определяет тип поля по умолчанию.
7	размер Он отображает размер поля, такой как большой, х-маленький, средний, длинный, маленький.
8	название Он определяет имя поля.
9	классы Он использует строку с классами CSS.
10	Я бы Он определяет идентификатор поля.
11	стиль Он определяет стиль поля.
12	заглавие Он определяет заголовок поля.
13	отключен Определяет, находится ли поле в отключенном состоянии.
14	заполнитель Это короткая подсказка, которая отображается в поле ввода перед тем, как пользователь вводит значение.
15	автофокусировка Он указывает, что элемент ввода должен автоматически получать фокус при загрузке страницы.
16	NOVALIDATE Он указывает, что данные формы не должны проверяться при отправке.
17	только для чтения Он определяет поле как состояние только для чтения.
18	автозаполнения Он отображает параметры в поле, когда пользователь начинает вводить данные в поле, и отображает значения, основанные на ранее введенных значениях.

этикетка

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

validate.required

Это делает элемент обязательным.

validate.pattern

Указывает шаблон проверки.

validate.message

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

тип

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

дефолт

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

размер

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

название

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

классы

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

Я бы

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

стиль

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

заглавие

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

отключен

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

заполнитель

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

автофокусировка

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

NOVALIDATE

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

только для чтения

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

автозаполнения

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

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

Sr.No.	Параметр и описание
1	дата и время Эти поля используют validate.min и validate.max для установки минимальных и максимальных значений.
2	распорка Он использует подчеркивание для добавления тега <hr> , добавляет текстовые значения с использованием текста и использует заголовок как тег <h3>.
3	Выбрать Он использует несколько параметров для добавления нескольких значений.
4	выберите и флажки Он использует поле параметров, чтобы установить доступные параметры.
5	дисплей Он использует параметр содержимого для отображения содержимого. Устанавливает уценку в true, чтобы показать содержимое.
6	CAPTCHA , Он использует параметры recatpcha_site_key и recaptcha_not_validated .

дата и время

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

распорка

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

Выбрать

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

выберите и флажки

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

дисплей

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

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 .

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

Эл. адрес

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

- 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 указывает получателя адреса электронной почты с помощью конфигурации плагина Email. В поле электронной почты также используется параметр темы, в котором электронное письмо отправляется на адрес электронной почты, введенный с темой [Контакт по адресу ] [имя введено], а текст сообщения электронной почты определяется в файле forms / data.html.twig темы.

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

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

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

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

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

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

## Your email has been sent!

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

Сохранить

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

Например —

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

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

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

Грав — Формы

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

Параметр Поля

Обратите внимание на капчу

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

Эл. адрес

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

Сохранить

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности