Grav-フォーム

このhttps://getgrav.org/downloads/plugins[link]で利用可能な 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/datal.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フィールドを持つ単純なフォームページを示しています。フォームに記入した後に情報を送信すると、コードに示されているように、YAMLフロントマテリアルに process フィールドを追加してフォームが処理されます。

プロセス*フィールドは次の情報を使用します-

email オプションは、 from フィールドが電子メールの送信者を指定し、 to フィールドがメールの受信者を指定するなど、2つのフィールドを使用します。
subject は、入力された電子メールに電子メールが送信される [feedback] [entered mail] オプションを使用します。
メールの本文は、themeフォルダーにある forms/datal.twig ファイルで指定されます。
フォーム入力データは user/data フォルダーに保存されます。テンプレートは、テーマフォルダーにある forms/data.txt.twig ファイルで定義されます。
thankyou/ サブフォルダーの下に、ユーザーがフォームを送信したときにそのページにリダイレクトされるサブページを作成します。

次の表に示すように、フォームプラグインでいくつかのフィールドを使用できます-

Sr.No.	Field & Description
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.	Parameter & Description
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 フィールドIDを定義します。
11	style フィールドのスタイルを指定します。
12	title フィールドのタイトルを定義します。
13	disabled フィールドが無効な状態かどうかを判断します。
14	placeholder これは、ユーザーが値を入力する前に入力フィールドに表示される短いヒントです。
15	autofocus これは、ページがロードされるときに入力要素が自動的にフォーカスを取得することを指定します。
16	novalidate 送信時にフォームデータを検証しないことを指定します。
17	readonly フィールドを読み取り専用状態として決定します。
18	autocomplete ユーザーがフィールドへの入力を開始すると、フィールドにオプションが表示され、以前に入力した値に基づいて値が表示されます。

一部のフィールドには、次のような特定のパラメーターが含まれています-

Sr.No.	Parameter & Description
1	date and datetime これらのフィールドは、 validate.min および validate.max を使用して最小値と最大値を設定します。
2	spacer *アンダーラインを使用して <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 というフィールドにcaptcha情報のコードがあります-

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

reCaptchaは、スパムや悪用からWebサイトを保護するために使用されます。 recatpcha_site_key オプションを使用して、サイトにウィジェットを表示します。 reCaptchaを使用するには、https://developers.google.com/recaptcha/docs/start [reCaptcha docs]を参照してください。 reCaptchaが正しくない場合、 recaptcha_not_validated オプションを使用してメッセージを表示します。

フォームアクション

Eメール

以下に示すように、 process フィールドの下に特定のオプションを含む電子メールを送信できます-

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

2つのフィールドを含む電子メールオプションを使用します。 from フィールドは電子メールアドレスの送信者を指定し、 to フィールドは電子メールプラグイン構成を使用して電子メールアドレスの受信者を指定します。電子メールフィールドでは、 subject オプションも使用されます。このオプションでは、件名が[Contact by] [name入り]で入力された電子メールに電子メールが送信され、電子メールの本文は、テーマ。

他のページへのリダイレクト

*process* フィールドで定義された *message* および *display* オプションを使用して、別のページにリダイレクトできます。

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

*message* オプションは、ユーザーが送信ボタンをクリックしたときに表示されるメッセージを設定します。 ユーザーがフォームを送信すると、別のページにリダイレクトされます。 *form.md* ファイルが保存されている *thankyou* サブフォルダーの下に1つのサブページを作成します。 フォームを送信すると、ページにリダイレクトされ、上記のメッセージが表示されます。

*thankyou/formdata.md* というサブページには、次のコンテンツが含まれます。

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

## Your email has been sent!

フォームを送信すると、プラグインはユーザーにメールを送信し、データは data/folder の下に保存されます。

Save

*user/data* フォルダーの下に保存されるファイルにデータを保存するために使用されます。

例えば-

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

データは、拡張子がtxtのテキスト形式で保存されます。本文はテーマの templates/forms/datal.twig ファイルから取得されます。

次の画面は、単純なフォームを示しています-

Grav Forms

Grav-forms

目次