Example: Contact Form

シンプルな問い合わせフォーム

Grav Form Plugin は、あなたのサイトでフォームを使うための最も簡単な方法です。簡単なお問い合わせフォームを作成する方法を見てみましょう。

動作するサンプルの一例

Sora Article スケルトンには、このチュートリアルを読みながら見ることができるフォームページが用意されています。

ページを設定する

あなたのサイトのどのページにもフォームを設置することができます。必要なことは、ページのマークダウンファイルの名前を form.md に変更するか、ページのフロント・マターにテンプレートヘッダーを追加して、form テンプレートを使用するようにすることだけです。

Grav Form Plugin がページ上で入力内容を表示するためには、ページのテンプレートまたはページの親テンプレートが {% block content %} タグが記述されている必要があります。

The form fields and processing instructions are defined in the YAML frontmatter of the page, so just open the page markdown file with your favorite editor, and put the following code in it:
フォームフィールドと処理命令はページの YAML で定義されるので、ページのファイルをお気に入りのエディターで開き、次のコードをそこに書き込むだけです。

---
title: Contact Form

form:
    name: contact

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

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

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

        g-recaptcha-response:
          label: Captcha
          type: captcha
          recaptcha_not_validated: 'Captcha not valid!'

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

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

# Contact form

Some sample page content

Email Plugin の Email from と Email to のメールアドレスが、あなたのメールアドレスに設定されていることを確認してください。

この例では、captcha field を指定して、Google reCAPTCHA を使用しています。これを動作させるには、Form Plugin で site_key と secret_key を設定する必要があります。Google reCaptcha を使いたくない場合は、g-recaptcha-response フィールドと captcha: true の処理を削除するだけです。

問い合わせページのフォルダ内に thankyou/ というサブフォルダを作成し、formdata.md というファイルを新規に作成します。そして、そのファイルに以下のコードを貼り付けてください。

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

## Email sent!

以上で終了です。

ライブ・デモ

Live page

Page markdown file

モジュール・ページでのフォームの動作は異なります。詳しくは、モジュールページでフォームを使うを参照してください。

ユーザーがフォームからデータを送信すると、プラグインからメールが送信され（Grav Email Plugin のフォーム設定で設定）、入力されたデータは data/ フォルダに保存されます。

メールの設定と詳細については、Email plugin のドキュメントをお読みください。

Grav Data Manager Plugin を有効化すると、Admin Plugin でそのデータを確認することができます。

将来的には、Admin Plugin から動的にフォームを生成できるようにしたいと考えています。

元ソース : https://learn.getgrav.org/17/forms/forms/example-form