Contact Form 7

長年、メールフォームは「MW WP Form」のお世話になって来ました。
ところが先日、『Mail delivery failed: returning message to sender(メール配信失敗:送信者にメッセージを返す)』になってしまいました。
どうやら「MW WP Form」は、共有SSLには対応して居られないそうなのです。
以前から使用していたフォームは無事なのですが、新規フォームはダメでした。
昔作成したものも変更を加えたらボツかもですよね。
そこで、、、確認画面が無いのは寂しいけど、思い切って「Contact Form 7」に切り替えました。そして使い方を検索してみると、「Contact Form 7 add confirm」という「Contact Form 7」プラグインに確認画面をつけるプラグインまで発見!
「MW WP Form」とほぼ同じ感じのメールフォームを設置出来ました。使い方は「MW WP Form」よりも数段簡単です。

「MW WP Form」を入れている場合は停止してから、
「Contact Form 7」と「Contact Form 7 add confirm」をプラグインに新規追加します。
「Contact Form 7 使い方」が日本語公式マニュアルです。ブックマークしておくと便利です。

「フォーム」編集

(1) 『お問い合わせ』

ダッシュボードに『お問い合わせ』という項目が出来るので、『コンタクトフォーム』をクリックします。


 

(2) 『コンタクトフォーム 1』

サンプルのような感じで『コンタクトフォーム 1』というのが最初から出るので、クリックして見ます。


 

(3) 『コンタクトフォームの編集』画面

タイトルを変更するとショートコードの『title=”タイトル”』が変化します。(緑下線)
赤枠『フォーム』が内容を作成する項目です。
ピンク枠の[確認ボタン]と[戻って編集ボタン]が「Contact Form 7 add confirm」で追加になったボタンです。


 

(4) 電話番号項目を追加

『コンタクトフォーム 1』のままでいいので本文末行の[submit “送信”]の下の行で『電話番号』ボタンを押してみます。
下図のようなダイアログ小窓が出ます。
項目タイプは必須の場合は[✓]します。
名前は勝手に生成されます。(数字は変更可能ですがそのままでもいいと思います。)
ピンク下線とピンク枠は、プレースホルダーとして使用できます。

プレースホルダーテキストとは入力されるまでの間フィールドの内側に表示される説明文のことです。そのフィールドに入力を始めると消えます。プレースホルダーテキストは現在のユーザーインターフェイスでは一般的に用いられているので、どこかで見たことがあるはずです。

図では入力項目と生成されたタグをわかりやすく色分けしました。
ピンク部分等がタグに反映されていない場合は、項目枠を選択中なので、枠外をクリックすれば反映されます。
最後に[タグを挿入]クリックです。


 

(5) 追加された電話番号項目

水色下線のように表示されます。
このままだと電話番号枠だけなので、ラベルを付けます。
『 お名前 (必須)』のラベルをコピペしてピンク枠のようにマーカー部分を書き換えました。
不要になった水色下線行は削除します。

わたしは他には『テキスト』しか使っていませんが『電話番号』とほぼ同じ要領です。
項目によっては「Akismet」の設定も出来るそうです。

(6) 複数選択項目

メールフォームと言えば、図のマーカーした3つですよね。
わたしは普段『チェックボックス』派なのでそちらで紹介します。


 

(7) 『チェックボックス』例

ダイアログ小窓に以下のように入力してみました。
〔オプション〕に選択肢を1行に1項目入れます。
チェックボックスなんだから[✓]は、ラベルを前に・・・ですよね。
完成したら[タグを挿入]。


 

(8) 複数選択項目ラベル

「(5) 追加された電話番号項目」同様、水色下線のように表示されます。
『 お電話番号 (必須)』のラベルをコピペして緑色マーカーのように書き換えました。
これは不正解× です。これだとエラーになります。
正解○は、ピンクの方。違いはラベルの位置です。

選択肢の無い単一項目の場合は全部をラベルで囲ってOKだけど、複数選択項目の場合は『見出し』部分だけをラベルで囲います。


 

(9) 「フォーム」追加項目完成

複数選択項目の他のものもほぼ同じだと思います。
こんな感じで追加の項目を完成させましょう。
わたしは追加部分を点線で印を付けました。(水色枠)
このページから一旦離れるので、[保存]します。
※次の作業のために、水色枠部分をコピーしておきましょう。


 

(10) 「新規追加」

ではいよいよ本番のメールフォームを作成して行きます。
どちらかの赤枠で「新規追加」します。


 

(11) コピペ

「(9) 「フォーム」追加項目完成」でコピーしていたものを図のようにペーストします。
あ、、、新規作成ではデフォルトで『コンタクトフォーム 1』の最初と同じものが出ます。


 

(12) タイトル

タイトルを入力。
「(10)(11)(12)」は順番が前後しても全然OKです。


 

(13) コピペでフォームを完成

赤破線枠を赤枠にコピペしたりで、フォームを完成させます。


 

(14) 『確認ボタン』と『戻って編集ボタン』追加

本文の[submit “送信”]の前にカーソルを移動して『確認ボタン』クリックでダイアログ小窓が出るのでラベルに「確認」等を入力して[タグを挿入]。
同様に[confirm “確認”]の前にカーソルを移動して『戻って編集ボタン』クリックでダイアログ小窓が出るのでラベルに「戻って編集」等を入力して[タグを挿入]。
水色下線のように表示されればOKです。
これで「フォーム」は完成です。


 

メール

(15) 『メール』画面

このプラグインでは、管理者宛てや自動送信のことを 『メール』と呼んでいます。
送信先:自分のメールアドレス です。
送信元:送信してくれる相手の情報です。このままでOKです。
題名:○○へのお問い合わせフォーム 等の題名です。
追加ヘッダー:このままでOKです。
メッセージ本文:デフォルトではこの表示です。


 

(16) 〔メッセージ本文〕設定

『メール』では以下のように水色下線の「メールタグを利用できます」となっています。

下は『フォーム』の本文です。フォームタグとメールタグは少し違いますね。

項目が少しだったらそんなに困りませんが、テキストやチェックボックス等が複数だったらどれがどれか混乱しますよね。
そこで、『フォーム』の本文をまんまエディターにコピペして、見比べながら『メール』のメッセージ本文を作成します。


 

(17) エディターで加工

『メールタグ』をエディターの最上段にコピペして、タグ部分を入れ替えました。
次にラベルを削除します。

ラベルを削除して、項目タイトルの後ろに[:]を入れました。

管理者(自分)宛てのメールなので以下のようにしました。
これをコピペで『メール』メッセージ本文へ入れます。


 

(18) 「メール (2)」を使用

「メール (2)」で自動返信用のメールを作成します。
『[✓]空のメールタグを含む行を出力から除外する』はお好みでどうぞ。
[✓]メール (2) を使用 にチェックを入れます。


 

(19) 「メール (2)」を作成

『送信先』そのままでOK。
『送信元』そのままでOK。
『題名』自動返信:サイト名等
『追加ヘッダー』Reply-To: 自分のメアド
『メッセージ本文』次の(20) で紹介します。
ピンク枠[✓]はお好みで。
完成したら[保存]です。


 

(20) 「メール (2)」メッセージ本文例

管理者(自分)宛てのメッセージ本文の冒頭部分を以下のようにしてみました。
それ以外の部分は同じです。


以上が大まかな流れです。
『メッセージ』や『その他の設定』も必要に応じて設定してください。

あとはメールフォーム用の固定または投稿ページを作成して、ページの本文にショートコードをコピペするだけです。

記事の始めの方に、
「Contact Form 7 使い方」が日本語公式マニュアルです。ブックマークしておくと便利です。
と書きましたが、「詳しくは〜〜〜〜を参照。」と出ているリンクをクリックすると英語です。
日本語公式マニュアルの方も「〜〜〜〜」の部分が同じ文字列なのでこちらの方がわかりやすいと思います。