Contact Form7の設定や使い方!カスタマイズのやり方も!
こんにちは、すずみです。
今回はワードプレスのプラグインである「Contact Form7」の
設定や使い方とカスタマイズのやり方についてです。
「Contact Form7」はワードプレスで
簡単にメールフォームを設置することができます。
サイトやブログにはメールフォーム設置は必須であり、
トラブルや何かあった際に連絡先があれば事前に防ぐこともできます。
また有料での広告の設置依頼だったり、
有益なオファーとかも受けることができます。
まずは以下の動画にてお話しているのでご覧ください。
Contact Form7の設定とカスタマイズ方法!
まず「Contact Form7」のプラグインを
新規追加でインストールしていきます。
![con2](https://szumilabo.com/wp-content/uploads/2016/03/con2-e1458848831693.png)
ここでインストールすると管理画面の左のメニューに
「お問い合わせ」が追加されます。
そこで「お問い合わせ」をクリックしてから、
以下の赤枠の新規追加をクリックします。
![con3](https://szumilabo.com/wp-content/uploads/2016/03/con3-e1458850385425.png)
次に言語の選択画面になるので、
デフォルトの日本語を選べば大丈夫です。
![con4](https://szumilabo.com/wp-content/uploads/2016/03/con4.png)
その後に以下の画面になるので、
まずは赤枠のタイトルを決めていきます。
タイトルは「お問い合わせ」としておくといいかなと思います。
![con8](https://szumilabo.com/wp-content/uploads/2016/03/con8-e1458856736353.png)
その後に保存をすると以下の赤枠のように、
名前とショートコードが表示されます。
![con7](https://szumilabo.com/wp-content/uploads/2016/03/con7-e1458856497891.png)
ここからフォームの設定やカスタマイズをしていきます。
まずは以下の画面の赤枠の「タグの作成」をクリックします。
すると、その下にメニューがずらっと並びます。
![con9](https://szumilabo.com/wp-content/uploads/2016/03/con9-e1458858742226.png)
メニューには11項目ありそれぞれフォームに加えることができます。
それぞれのメニューはショートコードがあるので、
各メニューで設定で細かい設定した後にショートコードを
フォームに加えることで自由にカスタマイズできます。
例えば「テキスト項目」とフォームに加える場合は
まずタグ作成のテキスト項目をクリックします。
すると、以下のような画面になるので、
それぞれの項目を埋めていきます。
![con10](https://szumilabo.com/wp-content/uploads/2016/03/con10-e1458922436415.png)
このように様々な設定が可能であり、
組み合わせでカスタマイズは自由です。
それぞれ必要なものをフォームに足していきましょう。
基本的に普通のブログやサイトでよく使うメニューは
「メールアドレス」と「送信ボタン」ぐらいですね。
メールアドレスの設定と使い方!
まずはメールアドレスの設定のやり方ですね。
![con11](https://szumilabo.com/wp-content/uploads/2016/03/con11-e1458966318968.png)
1.「必須入力の項目ですか?」にチェックを入れていきます。
これはメールアドレスを入力する際に空白があると、
お問い合わせができないようにするためのものです。
2.Akismet(オプション)にチェックを入れていきます。
この項目にチェックを入れるとスパムメールを減らすことができます。
3.デフォルト値(オプション)に「contact@example.com」と入力してから、
「このテキストをプレースホルダ―として使いますか?」にチェックを入れます。
これをすることにより、メールアドレスの空白の欄に、
仮で「contact@example.com」と表示されるようになります。
![con14](https://szumilabo.com/wp-content/uploads/2016/03/con14.png)
これはメニューの「お名前」でも「山田 太郎」と
入れたりなど活用することが出来ます。
これによりコンバージョン率が上がります。
4.コードを左のフォームの[email* your-email]と差し替える。
次に右下の赤枠のコードを左のフォームにある
[email* your-email]と差し替えます。
5.右下のコードを下のメッセージ本文に追加する
次に以下の画像の赤枠のコードをすぐ下にある
メッセージ本文に付け加えていきます。
![con12](https://szumilabo.com/wp-content/uploads/2016/03/con12-e1458968107767.png)
6.最後に上部のコードをコピーして保存する
ここまでの作業が終わったら、
最後にメニューの上部に戻ります。
そこでコードが表示されているので、
それをコピーして保存ボタンを押します。
![con13](https://szumilabo.com/wp-content/uploads/2016/03/con13-e1458969987434.png)
お問い合わせページ作成する
ここまでの作業が終わったら、
固定ページでお問い合わせページを作成します。
管理画面の左のメニューで固定ページの
新規追加のボタンを押します。
![con16](https://szumilabo.com/wp-content/uploads/2016/03/con16.png)
次に固定ページのタイトルを「お問い合わせ」など、
わかりやすい名前にします。
その後に先ほどのコードをテキスト形式で貼り付けていきます。
![con17](https://szumilabo.com/wp-content/uploads/2016/03/con17-e1458972970487.png)
これでそのまま固定ページを公開します。
すると、以下の画像のような固定ページになります。
![con15](https://szumilabo.com/wp-content/uploads/2016/03/con15-e1458973127985.png)
ここまでは基本的なお問い合わせページの設定や使い方や
カスタマイズの方法などを解説していきました。
他にも様々な項目を追加したり編集することが出来るので、
もっと必要だと思ったときはカスタマイズしていってください。
またその他のオススメのプラグインの解説をした
記事が以下にもあるので合わせてご覧ください。
(関連:ワードプレスのプラグインで初心者にもおすすめ13選と使い方!)
ではでは、今日はこの辺で終わりにしたいと思います。
またこのブログでお会いしましょう。
【無料プレゼント】ブログで稼ぐ新スタイル講座
![](https://szumilabo.com/wp-content/uploads/2017/07/245.png)