「規約同意」のチェックをWordPressのContact Form 7で実現する方法を思いついた

WordPressでサイトを制作する際、閲覧者に利用規約などを提示し、同意が必要なコンテンツを作ることがあったとします。

その際、閲覧者にはチェックボックスにチェックをしてもらい、次に進む画面を作る方法。

考えた方法は、お問い合わせのメールフォームなどを設置できる有名プラグインContact Form 7を使う方法です。

機能としては、チェックをつけてボタンを押すと、指定したページに飛ぶというだけです。

やろうと思えばjsなどで実装できるし、わざわざこの方法を使うメリットは無いかもしれませんが、すでにContact Form 7を導入しているサイトなどでは、比較的容易に実装できると思うので参考までに書いてみます。(この方法を推奨するものではありません)

こんなのが作れます(次へをクリックするとトップページに飛びます)

同意する

作成手順
1.フォーム(チェックボックス)を作ります。

通常のメールフォームをつくるように、チェックボックスと送信ボタンだけのフォームを用意しても良いのですが、せっかくなので「同意する」にチェックをつけないと、送信ボタンがクリックできないようにします。

Contact Form 7 の設定画面で次のようにフォームを作成します。

<p>[acceptance accept-this]同意する</p>
<p>[submit "次へ"]</p>

送信ボタン名前を「次へ」などに変えておくと良いでしょう。

2.「メール」の設定

メールの宛先、差出人、本文などは空白でOKです。
(メール送信に関する機能は使いません)

3.「メッセージ」の項目は、デフォルトのままでもOKです。
ただし、「次へ」をクリックしたあと、一瞬だけ「#メッセージが正常に送信された」の内容が表示されることがありますので、このメッセージを「読み込み中…」などに変更しておくと
それっぽく見えて良いかもしれません。

4.「その他の設定」に次のように記述します。(←ココが重要!

demo_mode: on
on_sent_ok: "location = '次画面のURL';"

demo_mode: on→デモモードをONにすることで、メール送信機能を無効にします。
on_sent_ok: “location = ‘次画面のURL';” →送信ボタンをクリックしたあと、指定したURLに移動します。

5.固定ページなど任意の場所に、フォームのショートコードを記述します。

あとは、通常のフォームを挿入するのと同じ手順で、
作ったフォームのショートコードを挿入します。

 

今回のきっかけは、Twitterで@khoshinoさんの
「WordPressのプラグインで、「同意」にチェックを入れないと次のURLに進めない、という、ただそれだけの動作をしてくれる プラグインって、ありませんか?教えて、偉い人!」というツイートをみたことでした。
最初は送信先アドレスの設定を空欄にすると、エラーになってしまったことから、
送信機能を使わない「デモモード」があることを知るきっかけにもなりました。
実用性はともかくとして、Contact Form 7について良い勉強になりました。

なお、本来のContact Form 7の使い方とは異なりますので、くれぐれも自己責任でお願いしますね。
また、この記事の使い方に関してプラグイン作者様へのお問い合わせなどもご遠慮ください。

「規約同意」のチェックをWordPressのContact Form 7で実現する方法を思いついた” への5件のコメント

  1. contact form 7のその他の設定でデモモードの記述を設定すると正常に送信されません。
    原因お分かりになりましたらご教示頂けると幸いです。

    ■送信エラー
    demo_mode: on
    on_sent_ok: “location.replace(‘http://www.hoge.jp/order_compleat/’);”

    ■送信可
    on_sent_ok: “location.replace(‘http://www.hoge.jp/order_compleat/’);”

  2. demo_mode: on はメール送信を偽装する(送信をしないようにする)機能ですので、メールは送信されません。
    チェックをつけて、メールを送信する(通常のメールフォームとして使用する)場合でしたらdemo_mode: onの記述は不要かと思います。

  3. 初めまして。
    全くの素人ですが、初めてホームページを作成しています。
    確認ページの作成方法を検索したところ、こちらに辿り着きました。

    とてもわかりやすく書かれてあったため、すぐに設置することができたのですが、ガラケーからでは、読み込みちゅう・・・から先に進むことができません。
    Ktai Styleを使用しています。
    解決方法がありましたら、ご教授いただければ幸いです。

    • コメントありがとうございます。
      あいにく、私の手元でKtai Styleのテストができる環境がないので原因はわかりかねますが、PCで表示した場合は動作していますでしょうか?
      PCでもうまく動かない場合は、どこかの設定手順に誤りがないか確認してみてください。
      ガラケーのみでうまくいかない場合は、残念ながらKtai Styleではこの方法が使えないのかもしれません。

  4. お返事ありがとうございます。
    お礼が遅くなり申し訳ありません。

    Kati Styleでは使えないようでした。
    PCでは、こちらのHPで記載されたとおりのやり方で設置することができました。
    今回は、ガラケーからも見れるように作成しているので、またの機会にこちらの方法で設置したいと思います。
    ありがとうございました。

foom_in にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>