Contact Form 7で確認画面を出すには


関連


株式会社オルタのサイトでライブラリが公開されています。

これを参考に追加すれば確認画面はでるそうです。ん?分からない? はい、開発者でもある筆者も細かい点ですが、結構、悩んだところもありました。一方で、ウェブデザイナーの方がすんなりインストールできるなど、考えすぎるのがダメなのか・・・と打ちひしがれるところも・・・。本記事では、初心者でも簡単・・とはいかないまでも、設置の手助けになることと、備忘録を兼ねて、設置方法の説明をします。

  1. WordPressでパーマネント設定
  2. 問い合わせフォーム(Contact Form 7)の設定変更
  3. 問い合わせフォーム用固定ページのパーマリンク設定変更
  4. ライブラリをダウンロード(株式会社オルタがフリー提供)と設定変更
  5. WordPressヘッダ(header.php)へのライブラリ登録

1. WordPressでパーマネント設定

本スクリプトは、WordPressサイトが「パーマネント設定」されている必要があります。
サイトの末尾に ?p=hogehoge  などというURLになっているなら、パーマネントされていないことになります。パーマネント設定はSEO対策にもなり得るのですが、設定方法については「[WordPress – パーマリンク設定] 各ページのURLをカスタマイズする WordPress SEO」「mod_rewriteの設定(パーマリンク形式を変更した場合にエラー表示された場合)」などを参考にしてみてください。

2. 問い合わせフォーム(Contact Form 7)の設定変更

まず、各タイトル部分を「<span class=”title”>タイトル</span>」のようにタグで囲みます。
このtitleクラスによって、入力されていない項目があった場合のエラーメッセージの処理として使われます。たとえば、下図のような場合には、Contact Form 7の設定においては、

<span class=”title”>メールアドレス</span>(必須)<br/>
[email* your-email] </p>

のようになります。ここの「メールアドレス」が下図の赤文字に使われているということです。<span class=”title”>でくくっていないと、「■は必須です」という文言になります。

Contact Form 7 with 確認画面 JQuery

Contact Form 7 with 確認画面でのエラーメッセージ

それから、<p>[submit “送信”]</p>部分を、<p class=”submit-button”>[submit  “送信”]</p> に変更してください。

3. 問い合わせフォーム用固定ページのパーマリンク設定変更

WordPressでパーマネント設定をしていれば、固定ページにアクセスしたときに下図のように「パーマリンク」が編集できるようになています。問題をややこしくしないために「アルファベットや英数字」のみで構成される名前へ変更してみてください。ここでは「inquiry」にしました。

固定ページのパーマネント設定変更

固定ページのパーマネント設定変更

4. ライブラリをダウンロード(株式会社オルタがフリー提供)と設定変更

ライブラリをダウンロードして展開(解凍)します。すると下記の二つのファイルが出てくるはずです。

  • contact-form7-confirm.js
  • contact-form7-confirm.css

contact-form7-confirm.js をメモ帳などで開いて、「‘path’ : [‘/inquiry/’],」を探します。
通常はこの「/inquiry/」を変更するのみです。

サイトが、 http://www.example.com/hogehoge/ とし、問い合わせフォームが http://www.example.com/hogehoge/inquiery/ であるなら、
「’path’ : [‘/hogehoge/inquiry/‘],」 とします。

そのほかの確認項目は、「確認へ」「書き直す」の日本文を変更するだけです。

※複数のフォームがある場合には、wordpressのcontact form7で確認画面を出す手軽なライブラリ を見てください。それほど難しいことはないはずです。ですがとりあえず1つ成功させることが先決です。

  1. WordPressヘッダ(header.php)へのライブラリ登録

4までで準備は整いました。後は有効にするだけです。
細かいことは割愛しますが、

  • contact-form7-confirm.js   –> テーマ内の「js」フォルダにアップロード
  • contact-form7-confirm.css –> テーマ内の「css」フォルダにアップロード

「js」「css」いずれのフォルダもなければ作成してください。

その上で、テーマの「header.php」を編集します。wp-head(); が書かれている上に下記を記載してください。

<link rel=”stylesheet” type=”text/css” href=”<?php echo get_template_directory_uri() . “/css/contact-form7-confirm.css”; ?>”>

<?php
wp_enqueue_script(‘contact-form7-confirm’, get_template_directory_uri() . “/js/contact-form7-confirm.js” ,array(‘jquery’));
?>

前者はテーマフォルダ→cssフォルダ内にあるcontact-form7-confirm.cssを読み込みます。

後者は、テーマフォルダ→jsフォルダ内にあるcontact-form7-confirm.jsを読み込みますが、jQuery回りの重複読み込みや競合などに配慮をしたフィルタを挟むので、安全なJavaScript読み込み方法となります。

さぁ、これで完成したはずです。実際の問い合わせフォームを見ると、本来「送信」だったボタンが「確認へ」に変わっていませんか。変わっていたら、とりあえずは成功です。後は実際に試してみてください。うまくいけば下図のように確認画面が出てくるとおもいます。

Contact Form 7を拡張した確認画面

Contact Form 7を拡張した確認画面

2012年8月28日 木谷公哉(@kimipooh)

広告

Contact Form 7で確認画面を出すには」への9件のフィードバック

  1. ピンバック: 第11回WordBench京都に参加して(1/13) « Kimiya Kitaniの徒然なるブログ

  2. ピンバック: あずみ.net » [Bookmark]Contact Form 7で確認画面を出すには « Kimiya Kitaniの徒然なるブログ

  3. ピンバック: @caramu - [WordPress]Contact form7 に確認画面をはさむ その2

  4. ピンバック: Contact Form 7で確認画面を出すには(プラグイン編) | Kimiya Kitaniの徒然なるブログ

  5. コメントありがとうございます。
    早速確認しました〜、是非公式リポジトリに登録される日を心待ちにしています〜

  6. ピンバック: 超絶簡単にお問い合わせフォームを設置できるContact Form 7 はカスタマイズ性が何気に高い

  7. お世話になります。
    Contact Form 7への確認画面の追加の参考にさせていただきました。
    確認画面の表示までは出来るようになったのですが、その確認画面のレイアウトを変更する場合は
    どうされていますか?

  8. 確認画面はプラグインでも出来るようになっていますが、どのような方法を使っていますか。
    たとえばプラグインを利用した方法であれば、

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中