超メジャーなコメントフォームプラグインcontact-form7を使用してみた際の覚書。
以下のURLからプラグインをダウンロードし有効化する。
![57cc0e91-b3bf-4c39-8f72-f246c39b50ee](https://sleep-sheep.info//wp-content/uploads/2016/11/57CC0E91-B3BF-4C39-8F72-F246C39B50EE.png)
メニューに「お問い合わせ」という項目が出現する。![7c4bf379-46b3-4341-add8-59a10a2c4c2d](https://sleep-sheep.info//wp-content/uploads/2016/11/7C4BF379-46B3-4341-ADD8-59A10A2C4C2D.png)
![7c4bf379-46b3-4341-add8-59a10a2c4c2d](https://sleep-sheep.info//wp-content/uploads/2016/11/7C4BF379-46B3-4341-ADD8-59A10A2C4C2D.png)
ショートコードをゲットする。ここでは以下の様になっている。
[contact-form-7 id=”68″ title=”コンタクトフォーム 1”]
![2db1d745-8b3f-49e7-add5-94aa5961665d](https://sleep-sheep.info//wp-content/uploads/2016/11/2DB1D745-8B3F-49E7-ADD5-94AA5961665D.png)
固定ページに「お問い合わせ」の様なページを作成し、先程のコードを記載する。
作成した固定ページを表示し、テスト送信してみる。
![fb23b58c-a20c-4472-8b4d-e6eaae916ff6](https://sleep-sheep.info//wp-content/uploads/2016/11/FB23B58C-A20C-4472-8B4D-E6EAAE916FF6.png)
お見事。
もう少し項目を増やして見る。
例えば電話番号の項目を増やすとする。
![978ef7d0-e4f0-43db-9bcb-4e8ba28b2a02](https://sleep-sheep.info//wp-content/uploads/2016/11/978EF7D0-E4F0-43DB-9BCB-4E8BA28B2A02.png)
![8ea36ddc-5054-4c44-b305-b980bbce33a0](https://sleep-sheep.info//wp-content/uploads/2016/11/8EA36DDC-5054-4C44-B305-B980BBCE33A0.png)
1:送信先のメールアドレス
2.差出人のアドレス
3.メールの件名
4.追加ヘッダー 「Cc: test01@example.com」「Bcc: test01@example.com」また複数の場合は「Bcc: test01@example.com, test02@example.com」の用に記述する
5 本文 HTMLで<dl><dt><dd>で囲むとデザインがしやすくて良い。
サンクス画面の設置
固定ページに新たに確認ページを作成、これをthanksとスラッグをつけ、フォームページ(/contact)の小ページにする(/contact/thanks)。
![8d13d3df-0027-499a-9976-3b1573ff8823](https://sleep-sheep.info//wp-content/uploads/2016/11/8D13D3DF-0027-499A-9976-3B1573FF8823.png)
![9244cf95-e045-406f-814f-5fe81e48e6ad](https://sleep-sheep.info//wp-content/uploads/2016/11/9244CF95-E045-406F-814F-5FE81E48E6AD.png)
問い合わせに戻り、その他設定タブに以下を記述する 。
on_sent_ok: ‘location.replace(“/contact/thanks/”);’
これでメッセージ送信が行われると、thankページに移動することができる。
ContactForm7には確認画面が無い。確認画面を付属させる拡張プラグインも出ているが、初めから備え付けているフォームを使うほうがメンテの観点からおすすめ。
MW WP Form — WordPress Plugins – https://ja.wordpress.org/plugins/mw-wp-form/