WordPressは数え切れないほどのプラグインが存在していて、初めたばかりの頃は一体全体何を使っていいか分からず、まさに迷える羊状態だと思います。

私もそうでした。

おそらく大半の人が、「Wordpress 必須プラグイン」などのキーワードで検索したことが１度はあるのではないでしょうか？

今回ご紹介する【Contact Form 7】は、おそらく上記のようなキーワードで検索すると絶対にリストに入ってくる、超マストなプラグインです。

Contact Formを使うメリットとは

①　ユーザーとの距離が縮まる。

コンタクトフォームを設置することによって、ユーザーが簡単に運営者に連絡が取れるようになります。
例えばこのサイトの場合ですと、ユーザーの皆さんからのチュートリアルに関する質問やリクエストをいただくことができるようになります。
また自分では気づかなかったミスを指摘していただけたりなど、コンタクトフォームを設置することによって、ユーザーとのコミュニケーションがスムーズになり、ユーザーと運営者の距離が近づきます。
ユーザーとの距離が近づくと、ユーザーのリターン率が上がり、またファン数の獲得にも非常に効果があります。

また運営側にコンタクトが取れることによって、ユーザーからの信頼性の向上にもつながります。

②　大量にくるスパムメールの軽減になる。

また他のメリットとして、コンタクトフォームを設置することによって、スパムメールを軽減することもできます。
もちろんコンタクトフォームを設置したとしても、毎日大量に届くスパムメールを完全に防ぐことはできませんが、Webサイトに直接自分のメールアドレスを貼り付けるよりは、断然ましだと思います^^;

Contact Form 7の使い方

プラグインをインストールしよう

では早速プラグインをインストールするところから始めていきたいと思います。

まずはダッシュボードから、プラグイン>>新規追加をクリックし、Contact Form 7を検索します。

検索すると一番最初に出てくる富士山のサムネイルのプラグインが出てきますので、今すぐインストールをクリックしプラグインをインストールします。

プラグインがインストールされたら、有効化をクリックし、プラグインを有効化します。

コンタクトフォームを新規作成する

プラグインをインストールすると、インストール済みプラグインの一覧に先ほどインストールした、Contac Form 7が追加されているので、設定をクリックして設定画面に進みます。

設定を開くと、コンタクトフォームを新規作成・編集することができます。

編集をクリックして、コンタクトフォーム１を編集してみます。

フォームタブから、コンタクトフォームの項目を追加したり、削除したりすることができます。

フォーム下にあるボタンをクリックして、項目を新規追加することができます。

例えばURLの項目を追加したい場合、URLボタンをクリックします。

URLボタンをクリックすると、下のようにフォームタグ生成という画面が表示されます。

項目タイプ：　必須項目にチェックを入れると、その項目は必須項目になります。

名前：　特にこだわりがないなら、デフォルトのままで大丈夫です。

デフォルト値：　デフォルト値を入力して、このテキストを項目のプレースホルダーとして使用するにチェックを入れると、フォーム内にデフォルト値が表示されるようになります。

例えば、例）http://と入力した場合、以下の画像のように表示されます。

タグを挿入ボタンをクリックします。

タグを挿入すると、以下のように先ほど作成したURLのショートコードが追加されています。

しかしながらショートコードしか追加されないため、他の項目のように表示するには<label>タグや項目のタイトルを手動で入力する必要があります^^;

ちなみに<h1>タグや<p>タグを利用して、タイトルやメッセージを付け加えることもできます。

<h1>タイトルはここに入力</h1>
<p>メッセージはここに入力</p>

次にメールタブをクリックして、受信メッセージの表示設定を行います。

送信先：コンタクトフォームの送り先（自分のメールアドレス）を設定します。

他の設定に関しては、特に必要がなければ変更する必要ありませんが、もし先ほどのフォーム設定画面で項目を追加した場合は、メッセージ本文内にメールタグを追加することによって、追加項目の情報を受信することができます。

例えば、先ほどURLを新しく項目に加えたので、[url-527]というショートコードをメッセージ本文内に、

ユーザーURL: [url-527]

という風にアレンジして追加したりすることができます。

上の画像の設定内容で、誰かがコンタクトフォームを送信すると、以下の画像のようなメッセージが自分の設定した送信先に届きます。

メッセージタブをクリックすると、シチュエーション毎に表示されるメッセージを編集することができます。

Contact Form 7は日本語対応なので、デフォルトの設定も十分だと思いますが（私は特に設定は変えていません）、変更したい方は自由にカスタマイズしてみてください。

これでコンタクトフォームの基本設定は完了です。

コンタクトフォームのデザインを変更します

ここからが、Contact Form 7の問題点です。。

先ほど作成したコンタクトフォームを実際に表示させると画像のように、かなり味気ないコンタクトフォームが出来上がります。

残念ながらこのデザインを変更するには、CSSを加えるしか今のところありません。

“Contact Form 7　デザイン”等でググっていただくと、他の方達が作ったデザインのCSSを見つけられると思いますが、ここでは私が作ったコンタクトフォームのCSSコードを載せておきます。

もしこのデザインが気に入った方は、コピーアンドペーストしてお使いください^^

まずはCSSを使用するために、先ほど設定したコンタクトフォームを変更します。

ダッシュボードのお問い合わせ>>コンタクトフォームの順にクリックして、先ほど作ったコンタクトフォームを開き、フォームタブに以下のコードをコピーアンドペーストします。

※項目を追加した人は、追加した部分を付け加えるのを忘れないでください。

<div id="contact7">
<h1>Contact Us</h1>
<p>チュートリアルに関するご質問や、テーマ・プラグインのリクエスト等、お気軽にお問い合わせください。</p>
<label class="contact7"><span class="label-name">名前</span><span class="asterisk">*</span>
    [text* your-name] </label>

<label class="contact7">メールアドレス<span class="asterisk">*</span>
    [email* your-email] </label>

<label class="contact7">タイトル
    [text your-subject] </label>

<label class="contact7">本文
    [textarea your-message] </label>

[submit "送信"]
</div>

設定を保存をしたら、次はCSSの編集を行います。

Diviを使用している人は、ダッシュボードのDivi>>テーマカスタマイザーの順にクリックし、左サイドバーの一番下にある追加CSSをクリックします。

他のテーマを使用している人も同じように、各テーマのテーマカスタマイザーから追加CSSの項目に行ってください。

下のコードをコピーアンドペーストします。

/* Contact Form*/

div#contact7
{
	margin: 15px;
	padding: 40px 50px;
	background-color: #FFCC00;　/*コンタクトフォームの背景色*/
}
.asterisk
{
	color: #FD0060;　/*アスタリスクの色*/
}
div#contact7 h1
{
	color: black;　/*タイトルの文字色*/	
	font-weight: 800;
	font-size: 50px;　/*タイトルの文字の大きさ*/	
	padding-bottom: 15px;
}
div#contact7 label{
	font-weight: bold;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	width: 100%;
	border: 1px solid lightgray;
	padding: 0.5em;
	border-radius: 4px;
}
.wpcf7 input[type="submit"] {
	color: white;　/*送信ボタンの文字色*/
	border: none;
	background-color: black;　/*送信ボタンの背景色*/
	border-radius: 25px;
	font-size: 14px;
	font-weight: bold;
	padding: 5px 30px;
	float: Right;
}

初心者の方でも変えられそうなところには、コメント（/**/で囲まれている部分がコメント）を挿入しておきました。

例えば色を変更したい場合は、#以下の文字を変更します。

色のコードはW3Schoolなどを使って見つけます。Colorzillaなどのウィジェットを使うと、いろんなウェブサイトで使われている色を検出してコードを取得することができます。

文字の大きさを変更したい場合は、pxの前の数字を変更します。

サンプルコードをそのまま使うと、下画像のようにコンタクトフォームが変更されます。

最後にショートコードをテキスト内に埋め込んで、好きなところにコンタクトフォームを設置してください。

まとめ

Contact Form 7は世界中で使われている人気のプラグインですが、開発者が日本人なので、日本での設定が可能なところがポイントが高いですね。日本語に対応しているプラグインはあまり多くないので。。

しかしながら、デザインのカスタマイズがCSSでしかできないところが、かなり不便。

できればデフォルトのテンプレートを追加してほしいものです。

ただ冒頭でも述べた通り、おそらくWordpressを使っている人には必須アイテムと言っては過言ではないプラグインなので、検索するとたくさんのリソースが見つかると思います。

ぜひ気に入ったデザインのCSSを探してみてください^^

また何かオススメのコンタクトフォーム作成プラグインがあったら、紹介していきたいと思います。

今回のチュートリアルで何かわからなかったことや質問がございましたら、コメント欄やコンタクトフォームにてお気軽にご連絡ください。またプラグインやテーマに関するチュートリアルのリクエストもお待ちしております。

それではまた次回のチュートリアルでお会いしましょう!  See you later<3