メールフォームを完成させましょう。
「Contact Form 7」というプラグインを使います。
プラグインはWordPressと連動している補助ソフト(アプリ)といった感じのものです。
ここでは同時にプラグインの入れ方も紹介します。
〈1〉プラグインをクリック
ダッシュボードから「プラグイン＞インストール済みプラグイン」をクリック。(プラグインだけでも同じ画面です。)
〈2〉新規追加
新規追加をクリックします。
〈3〉プラグインを追加
キーワードに『Contact Form 7』という文字列をコピペで入れて下さい。
瞬時に『Contact Form 7』が表示されるので、今すぐインストールをクリックして、有効化をクリックします。
〈4〉追加されたプラグイン画面
『Contact Form 7』が追加されています。
〈5〉お問い合わせ
ダッシュボードに「お問い合わせ」という項目が追加になりました。
これが『Contact Form 7』の事です。
お問い合わせ をクリックすると下図のように表示されます。
コンタクトフォーム1をクリックしてみて下さい。
〈6〉コンタクトフォーム1
この『コンタクトフォーム1』というのはフォームのデモページのようなものです。
新規追加 をクリックしても同じものからスタートします。
最初は『フォーム』(ピンク下線)という項目が表示されます。
ピンク枠のメールフォームのパーツを作成する項目です。
メールフォームが完成したら、赤枠内の文字列をコピーして、固定ページで作成しておいた『お問い合わせメールフォーム(contact)』の本文エリアにペーストします。
下が加工前の『コンタクトフォーム1』です。
必要最低限は揃ってますね。
でも、お客様のお電話番号やご住所等も入れていただきたい場合も有りますよね。
〈7〉再度、コンタクトフォーム1
もう一度『コンタクトフォーム1』を出して下さい。
基本のパーツはそのまま改行で少し下に移動してもらって、カーソルを本文エリアのトップに持って来て下さい。
お電話番号を追加してみます。電話番号 ボタンをクリックです。
〈8〉フォームタグ生成
下のような画面が表示されます。
必須項目にするなら✓ します。
名前は自動生成されます。
タグを挿入
をクリックします。
〈9〉フォームタグ挿入
赤枠が挿入されたフォームタグです。
下の『お名前 (必須)』と比べれば黄色部分の『<label>』『</label>』が無いですね。
あとで加工するので、他のタグも追加しましょう。
〈10〉追加タグ生成・挿入
テキスト ボタンで住所タグを生成します。
チェックボックス ボタンでお問い合わせ種別を生成します。(ラジオボタン、メニューも同じ方法です。)
ピンク枠のように選択項目を１行に１つずつ入力します。
色分けしてみましたが、以下のようになりました。
※テキストやチェックボックス等、もっと追加したい場合も同様の手順ですが、生成ボタンを押すと『text-748』という風に同じ数字が出る場合があります。その場合は、名前：『text-749』という風に変えましょう。
〈11〉ラベルを設定
『お名前 (必須)』から黄色部分の『<label>』『</label>』をコピペして『ご住所 (必須)』と『お電話番号 (必須)』を設定しました。
『お問い合わせ種別 (必須)』だけ『<label>』『</label>』の位置が違います。チェックボックス、ラジオボタン、メニュー等の選択項目の有るものは、タイトルだけをラベルで囲みます。
〈12〉フォームを調整
このまま、この『コンタクトフォーム1』で作業を続行しても全然OKです。
わたしは、『コンタクトフォーム1』を下書き用のたたき台として使っているので、下図のように追加項目をエディターに一旦コピペして、新規追加 のメールフォームを使用しています。
『コンタクトフォーム1』でも『新規追加』でもどちらでも同じですが、下図のように赤下線のタイトルを変更/入力して、ピンク枠の内容を調整します。
承諾確認ボタン
以前わたしは追加のプラグイン：Contact Form 7 add confirm で、確認と戻って編集ボタンも入れていましたが、reCAPTCHA v3 と相性が悪いため外しました。
その代用として承諾確認ボタンを利用しています。
上図の赤丸の位置に承諾確認を入れます。
フォーム生成窓は以下のような感じです。
同意条件にコメントを入れて、オプションのチェックを外しておくと、メールフォームページではチェックしないと送信ボタンが押せない設定になります。
この段階で一旦、保存しましょう。
〈13〉「フォーム」完成
「フォーム」が完成しました。ここで一度保存しておきましょう。
次は「メール」という項目の作成です。メールをクリックして下さい。
〈14〉「メール」画面
初期設定では下図のようになっています。
この「メール」は管理者(あなた)宛てのメールです。
○送信先： あなたのメールアドレス
→このままでいいですよね。別のメアドに変更もOKです。
○送信元： [your-name] <wordpress@example.com>
→ [your-●●] となっているのは送信者(お客様等)のことです。
<wordpress@example.com>は「Contact Form 7」で自動生成されるメアドです。このまま放置してもいいですし、削除してもOKです。<あなたのメールアドレス>のように< >を付けて別のメアドに変更はできません。(わたしはサーバーでこのメアドを作成しました。)
○題名： サイト名 “[your-subject]”
→「フォーム」で『題名』をそのまま使用する場合はこのままでOKです。
わたしは『お問い合わせ種別』に変更したので、『サイト名 お問い合わせ』に変えました。
○追加ヘッダー： Reply-To: [your-email]
→ 『Reply-To: あなたのメールアドレス』に変えました。
○メッセージ本文：
→ 『このメールは サイト名 (https://example.com) のお問い合わせフォームから送信されました』の部分だけ使います。
「フォーム」に戻って下図のように本文の水色部分だけをコピーします。(ボタンは不要)
「メール」に戻って下図のように本文の『このメールは サイト名 (https://example.com) のお問い合わせフォームから送信されました』の上の行にペースト(貼り付け)します。
ペーストしたのが下図ですが、このままでは使えません。
水色マーカーの「メールタグ」に加工します。
黄色マーカー部分のラベルを削除して、水色タグの形になるようにタグの不要部分を削除します。
完成したのがこちらです。
「メールタグ」の配置を整えて、緑マーカーのように［：］等を追加して、ピンクマーカーのような自分宛の言葉を追加します。
※次に送信者(お客様)宛の『自動返信メール』を作成します。上のメッセージ本文を全文コピーしておきます。
〈15〉「メール (2)」へ
✓ 空のメールタグを含む行を出力から除外する にします。
✓ メール (2) を使用 にチェックを入れると「メール (2)」画面が表示されます。
〈16〉「メール (2)」メッセージ本文
(画像は一部省略加工しています。)
先に「メール」からコピーしておいたメッセージ本文を「メール (2)」メッセージ本文へ ペーストしてしまいましょう。
そして、黄色マーカー部分のように 送信者(お客様)宛の自動返信の挨拶文に書き換えます。
〈17〉「メール (2)」他の項目
こんな感じでどうでしょうか。
送信先： [your-email] ← お客様のメールアドレス
送信元： サイト名 <wordpress@example.com>
題名： 自動返信：サイト名
追加ヘッダー： Reply-To: wordpress@example.com ← お客様へ表示されるメールアドレスです。自動返信なので、メインのメアドでは無いものが無難な気がします。
〈18〉メールフォーム完成
これで完成です。
保存 をクリックします。
そして、赤下線のショートコードをコピーします。
固定ページで作成しておいた『お問い合わせメールフォーム(contact)』の本文エリアにペーストします。コードエディターの方が簡単だと思います。(画像のコードは少し違っています。ごめんなさい。)
更新 をクリックします。
あとは『お問い合わせメールフォーム(contact)』を表示して、動作確認してみて下さい。