メニュー

具体例:コンタクトフォーム

シンプルなコンタクトフォーム

Grav の Form プラグイン は、サイトでフォームを使用する最も簡単な方法です。シンプルなお問い合わせフォームの作成方法を見ていきましょう。

試せる実例

Sora Article スケルトンには、このチュートリアルを読んでいる間に、すぐに分かるフォームページがあります。

ライブページ

ページのマークダウンファイル

ページのセットアップ

サイト内のどのページ内にも、フォームを配置できます。やるべきことはただ、ページのマークダウンファイル名を form.md にするか、template ヘッダーを、フロントマターに追加し、 form テンプレートを使えるようにするだけです。

[!Info]
Grav の Form プラグイン がページの input をレンダリングするために、ページのテンプレートか、ページの親テンプレートで、{% block content %} タグを実装する必要があります。

フォームの fields と process 手順は、ページの 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!
---

# Contact form

Some sample page content

[!Tip]
Email プラグインで、 “Email from” と “Email to” のメールアドレスを、あなたのメールアドレスに設定していることを確認してください。

[!Info]
この例では、 Google reCAPTCHA を captcha フィールド から使っています。これが機能するように、 form プラグインで site_keysecret_key を設定するようにしてください。 Google reCaptcha を使いたくない場合は、単に g-recaptcha-response フィールドと captcha: true プロセスを削除してください。

[!訳注]
上記リンク先のリファレンスによれば、google reCaptcha は recaptcha フィールドになっているので、captcha フィールドが今も有効なのか、分かりません。もし試された方がいらっしゃれば、教えてください。もし新規で作成するなら、cloudflare の turnstile の方が良さそうです。

次に、コンテンツページのフォルダに、 thankyou/ というフォルダ名のサブフォルダを作り、 formdata.md というファイル名の新しいファイルを作ってください。そして、そのファイルに以下のコードをペーストしてください:

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

## Email sent!

これだけです!

ライブデモ

ライブページ

ページのマークダウンファイル

[!Tip]
モジュラーページのフォームは、異なる動作をします。詳細については、 モジュラーページでフォームを使う をお読みください。

ユーザーがフォームを送信するとき、プラグインは( Grav の Email プラグインで form 設定をしているので)あなたにメールを送ります。また、入力されたデータを data/ フォルダに保存します。

[!Note]
メールの設定や構成の詳細については、 Email プラグインのドキュメント をお読みください。

Grav データマネージャー プラグインを有効化すると、 管理パネルプラグイン でデータを確認できます。

[!Tip]
将来的には、Grav が 管理パネルプラグインから動的にフォームを生成できるようにしたいと考えています。