フォームを設置する

mkdir -p user/pages/06.contact/thankyou

user/pages/06.contact/form.ja.md

---
title: お問い合わせ
form:
    name: contact-form
    fields:
        - name: name
          label: お名前
          placeholder: お名前を入力してください
          autofocus: on
          type: text
          validate:
            required: true

        - name: email
          label: メールアドレス
          placeholder: 
          type: email
          validate:
            required: true

        - name: message
          label: お問い合わせ内容
          type: textarea
          validate:
            required: true

        # reCAPTCHAフィールドを追加(ボタンの直前が良いです)
        - name: captcha
          type: captcha
          label: 認証
          validate:
            required: true

    buttons:
        - type: submit
          value: 送信

    process:
        # processの最初(emailの前)にcaptchaの検証を入れる
        - captcha: true
        - email:
            from: "{{ config.plugins.email.from }}"
            to: "{{ config.plugins.email.to }}"
            subject: "[お問い合わせ] {{ form.value.name|e }}"
            body: "{% include 'forms/data.html.twig' %}"
        - save:
            fileprefix: contact-
            dateformat: Ymd-His
            extension: txt
        - message: お問い合わせありがとうございました!
        - display: /contact/thankyou
---
# お問い合わせ
ご意見・ご感想など、お気軽にお送りください。

user/pages/06.contact/thankyou/default.ja.md

---
title: お問い合わせ
autoseo:
    enabled: true
---

お問い合わせありがとうございました。

SMTP認証設定

OP25Bで外部へのSMTPへつながらないためgmail経由でメール送信するようにする。

user/config/plugins/email.yaml

from: 自分のメールアドレス@gmail.com
to: 自分のメールアドレス@gmail.com
mailer:
  engine: smtp
  smtp:
    server: smtp.gmail.com    # サーバー名
    port: 587                 # 25ではなく587を使用
    encryption: tls           # STARTTLS
    user: '自分のメールアドレス@gmail.com'
    password: '通常のgoogleアカウントのパスワードではなく、右のURLから取得する' # https://myaccount.google.com/apppasswords 4桁ごとのspaceは削除する
    auth_mode: LOGIN

recapcha設定

Google reCAPTCHA Admin Console にアクセス。

  • ラベル: 「自分用ブログ」など適当な名前。
  • reCAPTCHA タイプ: v2(「私はロボットではありません」チェックボックス)
  • ドメイン: あなたのサイトのドメイン(IPアドレスでも登録可能です)を入力。
  • 作成後、「サイトキー」 と 「シークレットキー」 をコピーして控えておきます。

user/config/plugins/form.yaml

recaptcha:
  version: 2
  site_key: '************'
  secret_key: '*****************'
  ui:
    display: bottomright # 右下に表示(隠す設定になっていないか)

前の記事