Contact Form 7
プログラムの知識がないと設置が難しい、コメントフォームを簡単に設置することを可能にしてくれるプラグインがContact Form 7です。
コメントフォームはサイト訪問者とサイト運営をつなぐ上でとても重要なものになりますから、プラグインを活用して設置できるのはとても助かると思います。
コメントフォームで収集したい内容は運営するサイトの内容に変わってくると思いますが、ここでは東池袋カレーマップで使用した内容を元に設置方法を紹介したいと思います。
Contact Form 7設定 目次
Contact Form 7のインストール
１、WordPressのダッシュボードにログインし［プラグイン］→［新規追加］をクリック
２、検索窓に「Contact Form 7」を入力して［プラグインの検索］をクリック
３、Contact Form 7の下にある［いますぐインストール］をクリック
４、「本当にこのプラグンをインストールしていいですか？」と聞かれるので［OK］をクリック
５、インストールしているプラグイン: Contact Form 7 3.0.1と表示されるので、［プラグンを有効化］をクリック（バージョンは変更になる可能があります）
６、プラグンのラインナップにWP Social Bookmarking Lightが表示されていればインストール完了です
Contact Form 7の設定
１、メニューの［お問い合わせ］をクリック
すると、コンタクトフォーム１が表示されます。
Contact Form 7では複数の設置も可能になっていますが、今回は１つでいいので（一般的なサイトなら１つで十分ですよね）、これを編集していきます。。。
といっても、、、
必要項目はすべてはいっていますから「題名」を「タイトル」に変更するだけで終了です（お手軽ですね）。
修正が終わったら［保存］をクリックします。
また、コンタクトフォームの下にあるコードはページを作成する時に必要になりますから、テキストエディタなどにコピペしておいてください。
［contact-form-7 id="39" title="コンタクトフォーム 1"］
※「id」は制作するタイミングで変わります。
＜参考＞
「*（アスタリスク）」が付いている項目が必須項目になります。したがって初期設定では名前とメールアドレスが必須項目になっています。
＜見落としがちですが…＞
上記設定で、コメントフォーム自体の設定は完了ですが、実はその下に「送信されるメールについて」の設定があります。
ここになります
宛先にはWordPressを登録した時のメールアドレスが入っているはずです。メールフォームからのメールを別のアドレスで受け取りたい場合はここを変更してください。
また「メッセージ本文」を修正することで、メッセージ本文に文言を追加することもできます。
メールフォームの見た目と、送信されるメッセージの修正が終わればContact Form 7の設定は完了です。
固定ページへの設置
コメントフォームをどこに配置するかは、そのサイトのデザインやレイアウト、ポリシーによって変わると思いますが東池袋カレーマップでは、固定ページに「お問い合わせページ」を作成し、そこにコメントフォームを設置しています。
これがもっとも一般的な設置場所になると思います。
１、メニューの［固定ページ］→［新規追加］をクリック
WordPressをインストールしたあとに「サンプルページ」というのが作られているので、それを編集する方法でもかまいません。
２、タイトルに「お問い合わせ」と入力
３、記事本文に軽い文言とContact Form 7で表示された「コード」をペースト
４、パーマリンクを「お問い合わせ」から「inquiry」に変更
すべて入力が終わった状態がこちらです。
タイトルや文言、ディレクトリ名については特に制限はないので、好きなものでOKです。
５、内容に間違えがなければ、［更新］をクリック
固定ページをみて、コンタクトフォームが表示されていれば設置完了です。
＜参考＞
WordPressのテーマにもよりますが、固定ページを作成すると自動的にヘッダー下のメニューにリンクが登場します。この固定ページの並び替えは「My Page Order」で説明しています。
Contact Form 7のデザイン変更
Contact Form 7で作ったコンタクトフォームはそのままでもいいですが、ちょっと野暮ったいためサイトに合わせて少しデザインに変更するために、次のCSSをCSSファイルに追加します。
div.wpcf7 input{
padding: 2px 0 0 2px;
border: 1px solid #bc6733;
width: 230px;
}
div.wpcf7 input.wpcf7-submit{
padding: 8px 2px;
text-align: center;
width:80px;
}
div.wpcf7 textarea{
padding: 2px;
border: 1px solid #bc6733;
width: 400px;
height: 10em;
}
これでデザインがこのように変化します。
※ソーシャルブックマークが出てきたのは、あまり気にしないでください^^
罫線の色や、フォームのボックスのサイズなどは各サイトに合わせて変更させれば、使えると思います。
最後に、設置したコンタクトフォームからテスト投稿をして問題なく届けは設置は完了になります。
