Koba Log

Read Article

【まとめ】Contact Form 7の設定いろいろ

【まとめ】Contact Form 7の設定いろいろ

今回タイトルは当初【Contact Form 7に郵便番後から住所記入】としたのですが、他にも色々とContactForm7で利用している設定があるので【まとめ】に変更しました


WordPressのプラグインでWebフォームをつくる際、色々と便利なフォームプラグインがありますが、数々のプラグインやFormサービス(WebFormなどを作成しリンクを張った方法)を試した結果、私がやりたいことをほぼほぼコンプリートできたのは、多機能で色々と使い回しの聞くContact Form 7でした。

普段、予約受け付けや問い合わせなどで作り込む場合求める機能は、

  1. カレンダーを表示して日付を記入したい
  2. 郵便番号を入れたら、番地入力するだけで良いように自動入力してほしい
  3. メールアドレスの間違いを確認してほしい
  4. 送信前に確認してほしい

です

今回やりたいこと

上記に上げた内容を以下の感じでさらっと実装したいと思っています。

まず、予約や来店希望を聞きたい場合は、【1】の日時をもらうのは必須ですね。手入力ではなくカレンダーを表示したいですよね。

また、【2】の郵便番号入れた際、住所がでて以下番地だけ入力すればいいのって楽すよね。フォーム入力で住所を都道府県から記入しなくて良くなるので手間が減る魅力的な機能だと思っていました。

それほど多くもないですが【3】の返信先のメールアドレスも間違っていては困るので再度記入をして頂き確認をしてもらいます。

【4】の送信前には確認をしてほしい。確認ページを表示するプラグインもあるのですが設定が複雑になり、手直しもハードルが上がるので今回は確認のポッチと欄をつける方にしました。

このほか、スパム対策やバックアップに必要なプラグインも一緒にご紹介します

注意事項

ここで一つだけ注意があります。今回ご紹介する中にはfunctions.phpへコードをコピー&ペースト(当サイトよりコピーして貼り付け。以後、コピペ)する作業があります。

コピペの際にもともと書かれているコードを端っこでも消してしまったり、余計な部分までコピーしてしまったりすると、最悪サイトが表示されなくなってしまったりします

復旧するためにはまず、コピーする前のfunctions.phpが必要ですので、メモ帳などにバックアップしておきましょう。最悪それを忘れてしまった場合は、現在使用中のテーマを再ダウンロードし解凍するとfunctions.phpがあります。

復旧はFTPソフトなどでfunctions.phpファイルを¥ドメイン¥wp-content¥使用中のテーマにアップロードして上書きすると、書き換え前に戻るので今回の編集で表示されなくなったサイトも復活します。

なお、今回以前にfunctions.phpを書き換えている場合は、それもまっさらに戻ってしまうのでご注意下さい。そうしないための編集前のメモ帳コピペ保存ですので~

【1】カレンダーを表示させて日付を入力してもらう

この機能ではjQueryのDatepickerをContactForm7用にプラグイン化したContact Form 7 Datepickerをいれます。

Contact Form 7 Datepickerをインストールする

インストールは上記リンクよりダウンロードしてプラグインから新規アップロードしても良いのですが、プラグイン→新規追加の右上にある検索窓にContact Form 7 Datepickerと入れて検索→インストール→有効化の方が手軽でおすすめです。

設定方法

設定はお問い合わせ(ContactForm7)のForm作成画面にDatepickerTeemaというタブがあるのでそこでデザインを変えることが出来ます

使用方法

フォーム編集画面にて【日付】を選択すると設定&使用することが出来ます

※詳細は後ほど

【2】郵便場号⇒住所入力の機能を追加

これらの機能をContactForm7に追加するにはAjaxZip3を使用します。

昔はhead内にコードを差し込み “神奈川県“ “東京都“ ”千葉県”などデーターベースを用意したりと色々大変でしたがajaxzip3により、function.phpへの追記のみで郵便番号入力から住所変換が可能になる画期的なものが今はあります。すごく助かりますね!

AjaxZip3って?

以下、作者様のサイトより引用させて頂きます

世界一、簡単に設置できる郵便番号検索を目指して!

もう郵便番号データをサーバにインストールする必要はありません。

株式会社人気組(本社:東京都千代田区、代表取締役:小林照幸)が中心となって ajaxzip2 を JSONP に対応させ、ajaxzip3 として新たに公開いたしました。

郵便番号検索と言えば、かつては、Webサイトのフォームで郵便番号を入力した後、検索ボタンを押すことにより住所が表示される形態が一般的でしたが、 最近はAjax技術の浸透により、郵便番号を入力すると自動的に住所が表示されるWebフォームも増えてきました。 ところがこれまで公開されていた郵便番号検索プログラムは、設置するためにサーバ側の設定が必要となるものや、郵便番号データを設置者自身でメンテナンスする必要があるものなど、設置者にとっては手間のかかるものでした。 ajaxzip3は、既存のHTMLにたった2行のコードを追加するだけで誰でも簡単に設置し使用できるライブラリです。プログラミングやサーバの設定は必要ありません。

引用元:ajaxzip3

そこでWordpressプラグインのcontactForm7でAjaxZip3を使えるように設定します。といっても、希望の機能のコードを【外観】→【テーマの編集】→テーマのための関数(functions.php)内にコピペするだけです。

AjaxZip3をWordPressへ組み込む

郵便番号+住所記入欄のタイプ

contactfoam7のフォーム作成画面にて、住所入力の項目欄を作成します

続いてこのコードが郵便番号から住所を表示できるように【外観】→【テーマの編集】→テーマのための関数(functions.php)に以下のコードをコピペします

テーマによって色々なかかれ方をしていますが、上記のコードをfunctions.phpの最下へコピペして保存すればOKです

郵便番号+都道府県+市区町村+大字・丁目番地のタイプ

郵便番号を●●●-●●●●とはじめ3桁後ろ4桁に分けて入力し、都道府県・市区町村・以下が分かれて入力されるタイプ

contactfoam7のフォーム作成画面にて、住所入力の項目欄を作成します

続いてこのコードが郵便番号から住所を表示できるように【外観】→【テーマの編集】→テーマのための関数(functions.php)に以下のコードをコピペします

郵便番号など入力欄の調整(スタイルの調整)
  • 【外観】→【テーマの編集】→スタイルシート(style.css)
  • 入力欄が100%になるので、大きさを調整する

【3】メールアドレス入力欄に確認用アドレス記入欄を追加

 

contactfoam7のフォーム作成画面にて、住所入力の項目欄を作成します

続いてこのコードが郵便番号から住所を表示できるように【外観】→【テーマの編集】→テーマのための関数(functions.php)に以下のコードをコピペします

【4】送信前に確認をしてもらう

冒頭でも書きましたが確認の方法は幾つかあり、プラグインにより確認画面を表示することも出来ます。しかしプラグインの導入から入力画面と確認画面の見栄えなどを加味すると納得のいく確認画面を作り上げるのは少し大変です。

そもそも確認画面はいるのか?

確かに、手間をかけて作る必要があるのか?と思いますよね。

申し込みや登録サイトで半角入力なのにEnterキーを押してしまったり、不意にEnterキーを押してしまい間違って送信したり、全て消えてしまい入力し直しになった経験はありませんか?最後の最後でそんなことになると登録するのも問い合わせするのも面倒になってしまいますよね。

また、送信前に内容の確認を促すことも出来ますしスパム対策にもつながります。

確認機能をつけることでそれらに対処でき、ユーザビリティーも高くなります。

さて、実装しましょう

この機能は標準機能を利用します。

フォームの編集画面に

を加えるだけです。

使用例としては

こんな感じで最後のsubmit(送信)ボタンの前に一行追加するだけです。

これをつけると

submitボタンの前に上記の一行を追加すると、チェックを入れないと送信ボタンを押すことができなくなります。

その他、確認の項目が多い場合はチェックを外さないと送信できないと言った使い方もできるようです。

詳しくはこちらより

スパム対策

 

前記の確認をつけるだけでも、スパム予防の効果は絶大なのですが、念のため対策はしておきたい方へはこちら。

少し前まではReally Simple CAPTCHAのプラグインを入れて設定していました。

しかし、Really Simple CAPTCHAの開発者様が新たにもっと簡単なreCAPTCHAを開発してくださいました。

reCAPTCHAはコンタクトフォームの標準機能になっていますので、登録をして設定すれば、すぐにフォームへ反映できます。

reCAPTCHAの登録方法

詳しい説明はこちらを御覧ください

このreCAPTCHAの登録するためにグーグルのアカウントが必要になります

1,Googleアカウントがない場合は先に取得する

登録はこちらより

もしお持ちでない方は先にGmailのアカウントを取得して下さい

2,reCAPTCHAの登録

Googleアカウントにログインした状態で、Google の reCAPTCHA 管理ページに移動します。

3,管理ページで登録します

ページに移動すると

  • Your reCAPTCHA sites
  • Register a new site

とあるので下のRegister a new site方に記入していきます

Labelの欄にサイト名などを入れます

Domainsの欄へは、登録したサイトのドメインを入れます

  • http://や語尾の.com/の/(スラッシュ)は省きます
  • このサイトの場合は koba-log.com となります

入力後、右下のRegisterを押すと登録が完了し一番上にSite keyとSecret keyが表示されます。

4,ContactFormへ設定します

お問い合わせ(ContactForm)メニューのインテグレーションのページへ移動し上記で獲得したSite keyとSecret keyをコピペして登録します

5,これで使えます

フォーム設定画面でページ下のsubmitキーの前にreCAPTCHAを配置します

おぼえがき(Really Simple CAPTCHA編)

Really Simple CAPTCHAについてはこちら

プラグインのReally Simple CAPTCHAを使用する場合は、Really Simple CAPTCHAをインストール後フォーム編集画面submit(送信)の上に

と書き入れると簡単な英数字の羅列が表示され、それを半角で記入してもらうというスパム対策が実装できます

お問い合わせ内容のバックアップ

ContactForm7で受けたお問い合わせ内容をサーバー側にバックアップしてくれるプラグインです。

これにより、普段は自分宛てに送信した確認メールでしか内容を見ることができなかったお問合わせも、ブラウザーで確認することが出来るようになります。

ContactFormのバックアップにはContact Form DBというプラグインを利用します。

プラグインをインストールする詳しい方法は割愛しますが、プラグイン→新規追加でContact Form DBを検索しインストールして有効化する流れです。

サイト内に複数のお問い合わせを設定していても、はじめにどのフォームを見るか選択できますので便利です。

まとめのまとめ

自分がどうやって設定していたかの覚書でまとめたのですが、だいぶボリュームがありましたね^^;

最後に今回の記事をまとめたいと思います。

以下は私が普段使っているフォームを作るための内容なので、もしご利用される場合は内容を変えてご利用下さい。

まずはプラグインをいれます

以下のプラグインを順番にインストールします。

  1. ContactForm7
    ※本体です
  2. Contact Form 7 Datepicker
    ※予約受付などカレンダーを表示したい場合
  3. Contact Form DB
    ※お問い合わせのバックアップ&リスト表示確認用

reCAPTCHAの登録をします

reCAPTCHAの登録と設定をします

functions.phpに追記

郵便番号→住所入力

メールアドレス確認項目追加

フォーム編集画面でレイアウトする

住所→郵便号入力欄

メール確認欄

確認のチェックをつける

最後にレイアウトをCSSで整える

各テーマによりCSSの編集環境は様々ですが、外観→テーマの編集→スタイルシート(style.css)のものもあれば、外観の中にCSS編集という項目があるものもあります。

チェックボックスを改行して表示したい

入力欄の幅が100%になってしまうのを調整したい

付録

現在私が使用しているサイトの構造です

サロンゆう 美容室 予約フォーム

プラグイン・functions.php & スタイルシートへの記述は本記事の内容を書き込んでいます

フォーム編集

確認メール

お客様宛て

 

 

随時追加します

 

 

Return Top