Wordplessで「Contact Form 7」でのお問合せフォームの設置

[記事公開日]2013/09/03
[最終更新日]2013/09/20

Wordplessで「Contact Form 7」でのお問合せフォームの設置

Wordplessでお問合せフォームを設置したいときは、やはり「Contact Form 7」のプラグインを使うのが一番簡単かつ、操作性も快適です。設定メモとして残しておきます。詳しいことは、参考にしたサイトを見てください。

Contact Form 7でできること

Contact Form 7でデフォルトではできないけど、簡単に機能を付け加えられたもの

Contact Form 7でデフォルトでは、できないこと

Wordplessで「Contact Form 7」でのお問合せフォームの設置

「Contact Form 7」というプラグインをダウンロードし、それを利用したフォームの設置。とりあえず今回行った作業をメモしておきます。

やり方

  1. Wordplessのプラグインページで、「Contact Form 7」のファイルをダウンロードする
  2. ダウンロードしたファイルを解凍。
    ローカルにあるWordplessフォルダの以下の場所にそのまま移動する。

    wp-content/plugins

  3. pluginsフォルダに、解凍したフォルダをそのままコピー。そして、サーバ上の同じ場所にアップロード
  4. Wordplessの管理画面にログインし、

    管理画面>プラグイン

    で、「Contact Form 7」があると思うので、それを[有効化]する

  5. そうすると、管理メニューに「お問合せ」というのが増えるので、それを選ぶと、お問合せフォームの作成画面に移る。

お問合せフォーム作成

  1. 管理画面>お問合せで、問合せフォームを作成し、フォームのコードをコピーしておく。
  2. 管理画面>固定ページで、お問合せフォームページを新規で作成し、内容部分にさきほどのコードを張り付ける。
  3. 管理画面>固定ページで、サンキューページを作成
  4. 管理画面>お問合せで、先ほど作った問合せフォームの[その他]の部分に以下の一文を追加

    on_sent_ok: "location.replace(‘http://xxx’);"

サンキューページを作ったら、アナリティクス上でぜひ、CV(コンバージョン)設定もあわせてください

※「Contact Form 7」の場合、サンキューページへ飛ばすことはこのように簡単にできますが、なぜか送信内容の確認ページがありません。^^; デフォルトで用意してくれたら使いやすいのにな。

お問合せフォーム設置の情報源

有益な情報、ありがとうございます。とてもわかりやすくて助かりました!

Contact Form 7で郵便番号からの住所の自動変換機能を付け加える

株式会社人気組様が公開している、郵便番号検索ライブラリ「AjaxZip3」を使うことによって簡単に実装可能でした。^^v

やり方
  1. テンプレートファイルの[header.php]に、以下の文を追記する。その際、必ずwp_head()の下に挿入すること!

    <?php wp_head(); ?>
    <script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js"
    charset="UTF-8"></script>
    <script type="text/javascript">
    //<![CDATA[
    jQuery(function(){
    AjaxZip3.JSONDATA="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/zipdata";
    jQuery(‘#postcode’).keyup(function(event){
    AjaxZip3.zip2addr(this,”,’your-pref’,’your-address’);
    })
    })
    //]]>
    </script>
    上記ソースを追記したら、FTPでサーバにアップロード。」

  2. 管理メニュー>お問い合わせ お問合せ作成画面の[フォーム部分]を以下のように指定

    <p>ご住所 (必須) ※郵便番号を入力すると、都道府県、市区町村までは自動で入力されます。</p>
    郵便番号 [text* your-postcode id:postcode 10/]
    都道府県 [text* your-pref 10/]
    市区町村 [text* your-address]
    番地以下 [text* your-address2]

    ※ここは、お問合せフォームとして、表示される画面です。

  3. 管理メニュー>お問い合わせ お問合せ作成画面の[メール部分]を以下のように指定

    住所 : 〒[your-postcode][your-pref][your-address][your-address2]

    ※ここは、管理者宛てに送られるメールの内容を編集する画面です。

郵便番号変換機能の情報源

有益な情報、ありがとうございます。とてもわかりやすくて助かりました! 私はこちらのサイトで紹介されているソースを利用しただけになります。本当はこのまま掲載しちゃいけないのかもしれないんですが、忘れないメモとして残させてください。もし問題があれば削除します。



Copyright © 2000-2018 Makiko HOSOKAWA. All rights reserved.