WordPress問い合わせフォームの最適解Contact Form 7のカスタマイズ。日付選択・ラジオボタン・必須ラベル・入力例・送信ボタン・データベース・メッセージ・自動返信メール。

WordPressに問い合わせフォームをつくるなら、現状はContact Form 7がおすすめです。
その設定方法を解説します。

※自宅にて α7

問い合わせフォームが必要な理由

ブログにはフォームを設置しましょう。
フォームとは、こういった項目を入力してボタンをクリック(タップ)すれば、問い合わせ・申し込み・依頼ができるものです。

フォームがなければ、
・メールアドレスをブログに書いて、メールを送っていただく
・クリックするとメールソフトが開くよう設定し、メールを送っていただく
・電話していただく
などと手間がかかってしまいます。
めんどくさいからいいやと申し込みや問い合わせを失う可能性もあるのです。
メールアドレスを直接書くと、迷惑メールロボットのえさになるので、「infoAtime.co.jpのAを@に変えてください」とすることも多いでしょうが、これはこれでめんどうに感じます。
メールソフトが開くと、Gmailと使っていると逆に手間です。

電話も……。

気軽に登録できるフォームを使いましょう。
ほとんどの場合、無料で使えます。

WordPressフォームの選択肢

WordPressブログでフォームを使うには複数の選択肢があります。
・プラグインContact Form 7
・プラグインJetpackの問い合わせフォーム
そして、

GoogleのGoogleフォーム

です。


■スポンサードリンク

これらを含めいろんなフォームを試した結果、現状の最適解は、プラグインContact Form 7だと考えています。
いろいろ試しつつ、ここに戻ってきたという感じです。

Googleフォームの欠点

Googleフォームは、デザインにやや難はありますが、設定しやすくわかりやすいのが特徴です。
ただ、欠点もあります。

スマホで見たときに見た目は普通なのですが、ラジオボタン(いずれかの〇をクリックまたはタップ)がうまく押せません。

この状態で押すと、

IMG_4872

画面下へスクロールしてしまうようになってしまいました。
端末による可能性もありますが、iPhoneだとかなりの確率でなってしまうのです。

IMG_4873

さらに、日付の入力に手間がかかります。
数字キーに切り替えて・・直接入力して・・としなければいけません。
以前のGoogleフォームは、カレンダーが表示されていた時期もあるのですが、今は出てこなくなっています。

IMG_4874

今後のアップデートで改善される可能性もありますがContact Form 7に変えてみましょう。

WordPress問い合わせフォームの最適解Contact Form 7

今のフォーム(個別コンサルティング)はこうなっています。

EX-IT_22

フォームのポイントは、次の3つです。

入口・項目は絞る

入口は絞りましょう。
「お気軽にお問い合わせください」だと、お気軽に営業が来ます。
来てほしくない営業、しない仕事はあらかじめフォームの上部に入れておきましょう。

先日、友人から「また自費出版の依頼が来た・・・(T_T)」と。
商業出版(印税を受け取る出版)を目指す友人としては、なんで?という感じでしたが、その問い合わせフォームを見ると、こんな感じでした。
Contact Form 7の初期設定のままです。

EX-IT_18

「わきが甘い。このフォームだと営業も来るがな」と一言返しました。
自費出版が嫌だとか営業しないでなんて書いていません。
そりゃ営業も来ます。
入口は厳しくしましょう。

そして、項目も絞るべきです。
住所、FAX、電話番号、従業員規模、部署などが必要なければ入れるべきではありません。

大企業ほど、こういった項目を入れたがります。
社内規定で決まっているのかどうかわかりませんが。
従業員規模きかれても1人だし、FAXないし、部署もないし・・。という感じです。

こちらがフォームに入力していただくときは、必要最低限の項目にしましょう。

 メニューごとにフォームをつくる

可能であれば、おおまかにでもメニューごとにフォームをつくりましょう。
私は、個別コンサルティング、執筆、講演と別にフォームをつくっています。
セミナーも同様です。

すべて同じフォームにし、「セミナーの場合は、そのセミナー名と日付を入れてください」なんてめんどくさすぎます。

初期設定の状態で使わない

プラグインContact Form 7は、次の手順で導入します。

①WordPressのダッシュボードの[プラグイン]の[新規追加]で、「Contact Form 7」と検索して、インストールし有効化する

②ダッシュボード左のメニューから[お問い合わせ]の[新規追加]をクリックする
(表示されない場合は、ダッシュボードを再読み込み(Ctrl+R or F5。MacはCommand+R)

③下記の画面でひとまず、保存し、オレンジ色の部分にあるコード([contact form~])をコピーする

EX-IT_41

④問い合わせ、依頼フォーム用に固定ページを新規追加し、先ほどのコードを貼り付け。
(ビジュアル、テキストタブのうちビジュアルタブに貼り付け)

EX-IT_17

⑤固定ページを表示して確認。
以降は[お問い合わせ]→[コンタクトフォーム]で該当のフォームを編集すれば、固定ページ上のフォームにも反映されます。

EX-IT_18

ここまでの手順で初期設定のフォームはできあがりです。
試しに自分で入力して申し込んでみましょう。

ただ、この初期設定だと、こんな感じです。
「題名」が必要かどうか、「メッセージ本文」という名称が適当かどうか。

EX-IT_18

[コンタクトフォームの編集]でそれぞれの項目を設定できます。
「題名」が必要なければ、下記の画面の「<label>題名~<label>」を削除しましょう。
「メッセージ本文」を「お問い合わせ内容」に変えたかったら、下記の画面の「メッセージ本文」を変更すれば反映されます。

EX-IT_41

このように初期設定のフォームを多少カスタマイズして使うのがおすすめです。

プラグインContact Form 7のカスタマイズ

カスタマイズ事例

たとえば、私は、次のようにカスタマイズしています。
このコードをコピーして、、Contact Form 7の[フォーム]タブで上書きで貼り付けていただければ、そのまま使えますが、ご自身の設定にあわせてカスタマイズしていただければ。


基本的には、ダッシュボート[お問い合わせ]→[新規追加]の[フォーム]タブで、テキスト、メールアドレスといったボタンをクリックすれば、対応したコードが挿入されます。

EX-IT_32

・お名前→「テキスト」をクリック
・メールアドレス→「テキスト」をクリック
「テキスト」は1行で終わるもの、「テキストエリア」は複数行にわたるものです。
それぞれ必須項目かどうかを設定できます。
前述したように項目は必要最低限にしたいので、必須以外は入れる必要はないでしょう。

「必須」というラベル、入力例はカスタマイズしているもので、後述します。

・お申込みプラン→「ラジオボタン」をクリック
いずれか1つを選択していただくときは「ラジオボタン」、複数を選択するときは「チェックボックス」です。
なお、ラジオボタンに必須項目という考え方はありません。
いずれの選択されていないという状態はありえないからです。

選択肢をリストで表示する「ドロップダウンメニュー」もありますが、私は使いません。
選択肢が見えていたほうがわかりやすいと思うからです。

EX-IT_31

・ご希望の形式→「ラジオボタン」
・ご希望のお支払方法→「ラジオボタン」
・ご希望の日時は、別のプラグインでカスタマイズしています(後述)。

EX-IT_30

・ご相談内容→「テキストエリア」

最後の送信ボタンもカスタマイズしています(後述)。


■スポンサードリンク
■井ノ上陽一のプロフィール

日付・時間を選択できるようにする

日付や時刻を入力するときに、カレンダーから選べると楽で、特にスマホの場合、便利です。
スマホからの申し込みや問い合わせも増えている以上、スマホでの見た目、操作性にもこだわりましょう。
スマホで表示すると表示が小さくなる(スマホ対応していない)のはもってのほかです。
(レスポンシブといいます。これで数十万請求されることがありますが、WordPressを普通に使っていれば自動的にスマホ対応、レスポンシブですので気をつけましょう)

プラグインContact Form 7 Datepickerをインストールし、有効化すればContact Form 7の設定画面に[Datepicker theme]というタブが表示され、デザインを変えることができます。

EX-IT_09

また、[フォーム]タブに、「datetime」というアイコンができますので、それを使ってカレンダー表示にできます。
「日付」だと日付のみ、「time」だと時刻のみです。
日付と時刻を設定するなら、「dateime」でいいでしょう。

「datetime」をクリックすると、次のようなボックスで設定できます。
これは一度設定すると変更ができず、再度このボックスから設定しなければいけません。
(私のやり方がよくないのかもしれませんが)

ここでは、
・name→この項目の名称で後の設定に使います。
わかりやすい名前にしましょう。ここではdatetime-1に
・date-format→日付の形式です。初期設定だとdd/mm/yyなので、日本人はなじみのあるyyyy/mm/ddにしておきましょう。

EX-IT_11

・min-hour→何時から受け付けるかの設定です。
・max-hour→何時まで受け付けるかの設定です。
・step-hour→カレンダーで設定するときに何時間単位で指定できるかの設定です。通常は1時間でいいでしょう。

・min-minute→何分にスタートするかの最小値です。通常0でいいでしょう。
・max-hour→何分にスタートするかの最大値の設定です。30分単位なら30になります。
・step-minute→カレンダーで設定するときに何分単位で指定できるかの設定です。30分単位なら30になります。

EX-IT_12

設定が終わったら[タグを挿入]で挿入できます。
設定結果が、このようにコードで表示されるのでここを変更しても大丈夫です。
ただ、スペースやハイフンが1つでも抜けると反映されません。
プログラムとはそういうものなので。
ex-it127

必須ラベルを付ける

項目に「必須」というラベルとつける設定です。
EX-IT_32

まずContact Form 7の編集画面[フォーム]タブで、次のコードを入れます。

ex-it102

さらには、そのデザインの設定をCSSに入れます。
デザイン、色や線はCSSで設定すると考えておきましょう。
WordPressのダッシュボードの[外観]→[カスタマイズ]の[追加CSS]に次のコードを貼り付けます。
background(背景)とcolor(文字の色)は、「HTML 色」と検索すれば色のコードが出てきますので変更してください。

EX-IT_36

他の設定と合わせてこちらを貼り付けていただければ。

/*ラジオボタンを縦に*/
span.wpcf7-list-item {
display: block;
}

/*必須ラベル*/
.required{
font-size: 16px;
padding: 1px;
background: #b94047;
color: #fff;
margin-left: 5px;
}

/*送信ボタン*/
.wpcf7 input[type=”submit”] {
background: #088A29;
border-radius: 5px;
color: #fff;
width:100%;
margin-top:50px;
}

入力例を入れる

入力例としてプレースホルダーといわれるものを入れます。
例)井ノ上陽一といったふうに表示されるものです。
EX-IT_32
編集画面で次のようにコードを入れましょう。

ex-it103

ラジオボタンを縦に並べる

ラジオボタンを設定すると、初期設定だとこのように横に並んでしまいます。
まあ、いいといえばいいのですが、縦に並べたいところです。

EX-IT_21

これは、追加CSSに次のコードを入れれば設定できます。

EX-IT_33

このように縦になりました。

EX-IT_38

送信ボタンを目立たせる・ボタン名を変える

送信ボタンは初期設定だと「送信」です。
変えたい場合は、編集画面で、「送信」を好きなフレーズに変えましょう。
さらに、送信ボタンを目立たせる場合は、

EX-IT_30

CSSで設定します。
色は変更していただければ。

EX-IT_37

問い合わせをデータベース化する

contact Form 7は、申し込みや問い合わせ内容がメールで届きます。
しかし、それを保存して一覧で見ることはできません。

プラグインのFlamingoをインストールし有効化すれば、このようにダッシュボードの[Flamingo]→[アドレス帳]で一覧できます。

EX-IT_40

問い合わせ、申し込み後のメッセージを変える

問い合わせ、申し込み後は、初期設定だと次のようなメッセージです。
ちょっと味気ないので変えたい場合は、

EX-IT_04

Contact Form 7の編集画面の[メッセージ]タブで変更できます。
「メッセージが正常に送信された」の部分だけでも変えておくといいでしょう。

EX-IT_08

こんなふうに変えることができます。

ex-it101

自分への通知メールを設定する

問い合わせ、申し込み後、自分へ通知されるメールの設定を変更できます。
[メール]タブ]で、設定しましょう。
メールにはフォームの内容を表示できます。
逆に言うと、ここで設定しないとメールが来てもどんな問い合わせ内容なのかわかりません。
必ずテストしましょう。

初期設定では、[your-message](問い合わせ内容、相談内容)しか表示されていません。
その項目は、フォームによって、[plan][type]…と表示が変わります。

EX-IT_05

項目をコピーして、「メッセージ本文」に貼り付けましょう。

EX-IT_06

適宜改行しておくと見やすいです。

EX-IT_07

自動返信メールを設定する

Contact Form 7は、自動返信メールも設定できます。
設定するのは、編集画面の[メール]タブで、[メール(2)]です。
ここでも先ほどと同じように、項目を入れていきます。

差出人メールアドレスをWordPressの設定アドレスと違うものにすると、警告が出ますが使用上は問題ありません。

ex-it128

このように自動返信メールが届きます。
個別コンサルティングの場合は、内容を確認して日程を決め別途メールを送るという流れです。
InkedEX-IT_20_LI

その他、フォーム入力後の確認画面の設定にはプラグインContact Form 7 add confirm を入れればできます。
流れ的にいまいちなので私は入れていませんが。

Contact Form 7、設定や内容はやや難解な部分もありますが、この記事を見つつ入れてみていただければ。


【編集後記】
昨日は健康診断。
はじめて行く病院でした。
最も気になったのは身長。
170.4㎝でした。

171.1㎝だったはずが……。

【昨日の1日1新】
※詳細は→「1日1新」

大崎の病院で健康診断

【昨日の娘日記】
昨日からひさびさの保育園。
と思いきや熱が出て休みでした。
午前中は私がみて、午後は交代。

寝かしつけては起き、起きては寝かしつけでなんとか。
ブログはスマホを使って片手で更新しました。


■スポンサードリンク ■井ノ上陽一のプロフィール
■スポンサードリンク



井ノ上陽一のVALU
■著書
【監修】十人十色の「ひとり税理士」という生き方
ひとり税理士のIT仕事術―ITに強くなれば、ひとり税理士の真価を発揮できる!!
フリーランスとひとり社長のための 経理をエクセルでトコトン楽にする本
新版 ひとり社長の経理の基本
毎日定時で帰っても給料が上がる時間のつかい方をお金のプロに聞いてみた!
『ひとり税理士の仕事術』
『フリーランスのための一生仕事に困らない本』
『社長!「経理」がわからないと、あなたの会社潰れますよ』
『そのまま使える経理&会計のためのExcel入門』