CONTACT FORM 7のカスタマイズと注意点!Ver.5.4.1

コンタクトフォーム 7のトップブログ・デザイン
スポンサーリンク
こだわり君
こだわり君

こんにちは、「こだわりスタイル」のこだわり君です!

@KodawariStyle

ワードプレスでブログをされている方でお問い合わせフォームがないサイトはあまり見かけませんよね。

やはり、問い合わせできることで信頼感につながることもありますし、アドセンスの審査も問い合わせフォーム無しでは不合格だと思います。

発信源がわからなければ、情報の信憑性に欠けますよね。

それ以外にも、設置が非常に簡単という理由も多分にあると思います。

ワードプレスを使用していればプラグインを使って、本当に10分くらいで完了します!

簡単過ぎてびっくりします。

こだわり君
こだわり君

いや本当に簡単なんです!

「お問い合わせはこちら」のテキストにリンクでメーラーを立ち上げる仕様にするのは、せっかくのワードプレスなのに宝の持ち腐れです。

今日は、超カンタン設置の「コンタクトフォーム7」の設置の仕方と、ちょっとしたカスタムをご紹介しますので、まだ設置してない方は是非今日設置しちゃいましょう!

スポンサーリンク

CONTACT FORM 7について

ワードプレスでブログ等を公開されている方は、かなりの割合でワードプレスのプラグイン「COTACT FORM 7」を使用されているのではないでしょうか?

このマーク見たことありますよね!?これと日本画風のイメージのプラグイン。

あまりにも有名過ぎます!

設置が非常に簡単なので、これからワードプレスでお問い合わせフォームを設置する方にはオススメです!プラグイン無しでフォームをHTMLで組むのは結構面倒なので、初心者の方にも是非使用していただきたいです。

初期設定のまま使用されている方が多いので、ちょっとしたカスタマイズで、ユーザビリティーも上げられるので併せてご紹介いたします。

そもそもお問い合わせフォームは必要なのか?

上でも言いましたが、必要と思っていた方がいいと思います。

理由をまとめますね!

・連絡先の無い記事内容では信憑性や、安心感低くなります。
・何かあったときの緊急連絡先は必要です。
アドセンス、アフィリエイトなど広告を使用予定の場合、審査に通らない。
・クライアントが仕事依頼なり、記事作成なりのオファーが送れない。
・フォームをつけることで、自分のメールアドレスを公開しないで済みますので、迷惑メール、スパムメールが減らせます。

こだわり君
こだわり君

結構、全部重要ですよね!

スポンサーリンク

CONTACT FORM 7をインストール

というわけで、「CONTACT FORM 7」をインストールしていきます。

ワードプレス管理画面左メニューの「プラグイン」「新規追加」→検索ボックスに「CONTACT FORM 7」「今すぐインストール」「有効化」クリックして、インストール完了です。

人気のあるプラグインなので、頻繁に更新もされていますので全く問題ありません!

コンタクトフォーム 7のインストール
スポンサーリンク

CONTACT FORM 7の初期設定

普通に使う場合は初期設定はほぼ無いです!

お問い合わせフォームページは10分でできますよ。

初期設定画面→「保存」をクリック

「有効化」が完了すると、管理画面メニューに「お問い合わせ」という項目が追加されていますので、クリックすると下の画像のような設定画面になります。

コンタクトフォーム 7のカスタム5保存

上の画面が初期設定(何も調整していない状態です)

初期設定では最初から下記項目が表示されています。

・氏名
・メールアドレス
・題名
・メッセージ本文
・送信ボタン

「ここにタイトルを入力」だけは好きな名前をつけましょう!(何も入れなかったので画像は「無題」になってます)

「ショートコード」をコピー

コンタクトフォーム 7の初期設定2

「保存」をクリックすると、オレンジの帯で「ショートコード」が表示されますので、「ショートコード」(このテキスト)をコピーして下さい。

「ショートコード」を新規追加で固定ページにコピー

このショートコードをお問い合わせフォームを表示したいページにコピーします。(今回は新規固定ページにペーストしました)

コンタクトフォーム 7の初期設定1

するとこんな感じですね!

ちなみに、この画面はブロックエディターですのですが、クラシックエディターも新規追加で固定ページを作り同じようにペーストします。

エディターの幅が狭くてお困りの方はこちらの記事をご参考に!

完成!(初期設定)バージョン

タイトルを入れて、ショートコードをペースト→「下書きを保存」または「公開」で完成!

これだけで、下のようなお問い合わせフォーム完成です!

超カンタンでしょ、本当に10分です!

これ単純に見た目だけじゃなくて、上から入力していき、送信ボタンをクリックすると、ワードプレスに設定してあるメールアドレスに、メールが届きますので、テストで送信してみましょう!

「CONTACT FORM 7」はレスポンシブですので、スマホで見てもキレイですよ!

コンタクトフォーム 7の初期設定
スポンサーリンク

少しカスタマイズしてみましょう!

これでも十分機能しますが、もう少しユーザビリティーを意識して少しだけカスタマイズしてみましょう!

変更点はこれだけですが、だいぶユーザビリティーが上がりますね!

・必須項目の「*」を赤で表示する
・入力ボックスに何を入力したいのか「例):○○○太郎」などグレーで表示する
・チェックボックスを表示する
・「送信」ボタンをクリックする前の確認チェックボックスを表示する

設定画面を調整します

上記変更点は設定画面から変更を加えますので、再度設定画面へ!

コンタクトフォーム 7のカスタム2

何やら、先ほどよりテキストが増えています!

拡大しますね

コンタクトフォーム 7のカスタム3

必須項目の「*」を赤で表示する

初期設定で出来上がったフォームも各項目は必須になっているのですが、表示はされていませんので、必須マークの「*」を表示させて、カラーを赤にします。

上の画像の一番上の赤枠をご覧ください!

<span style="color:red;">*</span>

必須項目で「*」を表示したいところに、上のコード(CSS)をコピペします。

入力ボックスにグレーで「例)○○○○」などを表示する

初期設定のままでは、入力ボックスには、入力をアシストするテキストは表示されませんので、よりユーザーが入力しやすいように、薄いグレーでサンプルテキストを表示してあげます。

こだわり君
こだわり君

迷わず、新設!

placeholder "例)××××@×××.com"

Contact Form 7のバージョン3.4からは、このサンプルテキストを表示させるには上のように「placeholder」という文字列を記述することになりました。

Contact Form 7のバージョン3.4以前は、「placeholder」の代わりに「watermark」という文字列を記述していました。

Contact Form 7のバージョンによって使い分けましょう!

ちなみに私のContact Form 7のバージョン5.4.1 ですが、「watermark」では反応しないので「placeholder」を使用しています。

送信する前に確認のチェックボックスを追加する

Contact Form 7「送信」ボタンをクリックしても「確認画面」に遷移しません。

というより、「確認画面」Contact Form 7には最初からありません。

この「確認画面」を表示するのは日本でよく見かけるページ遷移ですが、海外ではほとんど「確認画面」の概念がないようです。

「確認画面」を出せるプラグインがないのか調べましたが、ありました!

コンタクトフォーム 7のカスタム4

「Contact Form 7 add confirm」というプラグインなのですが、上の写真でもわかるように既に3年間も更新されていませんので、今後も更新されないでしょう。

私が試しみて分かったのですが、「Contact Form 7 Ver.5.4.1」でこの「Contact Form 7 add confirm」を有効化してみましたが、正常に動きませんでした。

調べても、「Contact Form 7 Ver.5.4.1」ではやはり動かないという結論です。方法はContact Form 7のバージョンを下げるしか方法はなさそうです。

バージョンを下げる方法はあるみたいなので、どうしてもという方は調べてみて下さい。

私は、正常に動かない「Contact Form 7 add confirm」をインストールするより、「上記内容でよろしければ「チェック」をつけて送信ボタンを押してください。」のチェックボックスを追加することにしました。

こだわり君
こだわり君

こちらの方がなんかスマートな気がする!

ということで、初期設定画面の画像の赤枠ように、

[checkbox* checkbox "上記内容でよろしければ「チェック」をつけて送信ボタンを押してください。"]

というような注釈を表示することにしました。(和文はご自分の好きな文字列に変更すれば良いです)

チェックボックスの項目を表示する

これは必要のない方も多いと思いましたので、順番が前後しましたが、チェックボックスの項目を作りたい方は下記のようにすれば、チェックボックスが表示されます。

[checkbox* menu use_label_element "チラシ" "パンフレット" "名刺・DM" "WEBサイト" "ランディングページ" "バナー" "その他"]

私は別サイトで、このような項目が必要だったので追加しましたが、必要な場合は追加してみて下さい。

スポンサーリンク

カスタマイズ完成!

たったこれだけで、だいぶ親切な問い合わせフォームになりました!

コンタクトフォーム 7のカスタム1

Contact Form 7の設定画面に少し追加するだけですのでカンタンですよ!

万一追記に失敗しても、もう一度作ればいいだけなので安心です!

今度はセキュリティーについても記事にしますね!

テーマ「Cocoon」を使っている方のセキュリティー、初期設定のままで使っている方はこちらを要チェック!

ブログ・デザイン
スポンサーリンク
スポンサーリンク
この記事を書いた人
こだわりスタイル

現役Webデザイナーの、モノにこだわった情報やレビューのブログを開設。趣味やガジェットのこだわり情報を発信していきます。こだわり情報は体験談やファッションなど4つのカテゴリーでご紹介。是非フォローよろしくお願いします。

「こだわりスタイル」をフォローする
こだわり記事をシェアする
こだわりスタイル