WordPressのContactform7だけで作る簡易招待システム

goto_jp 47views 更新:2016年11月18日

下記仕様の「招待システム」をWordPressのContactform7とJavaScriptのみで実装する方法です。

  • フォームを送信すると自分の招待コードが発行される
  • 招待コードとフォームURLを友達に伝え入力してもらう
  • 招待コードを入力してもらうことで何らかのインセンティブを得られる

ネタばらしからすると、JavaScriptで乱数を生成してそれを招待コードに使うごく簡易なものです。

 

1. Contactform7の機能を拡張する

Contactform7で「hidden」を使えるようにするため「Contact Form 7 Modules」をインストールします。

また招待コードを後からメールで照合するのはツラいので、「Contact Form DB」のインストールも勧めます。

 

2. フォームに招待コードの入力欄を作る

Contactform7で招待フォームを作る際、名前やメアドのほか下記2つを加えます。

種別名前(id)概要
テキストfriendcode友達に教えてもらった招待コードの入力欄。任意入力。
hiddenmycode自分の招待コード。後述のJavaScriptで乱数を格納する。

 

3. 自分の招待コードをJavaScriptで生成・格納する

jQueryの利用前提ですが、下記のJavaScriptでmycodeに自分の招待コードを格納します。

Contactform7編集画面の「フォーム」に記入してください。

//乱数の生成と格納
$(function() {
  var val = Math.random().toString(36).slice(-4);
  var date_obj = new Date();
  var s = date_obj.getSeconds();
  s = ('0'+s).slice(-2);
  var m = date_obj.getMinutes();
  m = ('0'+m).slice(-2);
  var d = date_obj.getDate();
  d = ('0'+d).slice(-2);
  $("#mycode").val(val + s + m + d);
});

この例では「半角英数4桁+秒+月+日」の10桁の乱数を作っています。
JSだけの簡易な作りなので「絶対に重複しないコード」は作れませんが、桁を増やせば重複しにくくなります。
JSの乱数は偏りがあるので日時を絡めた方がより良いです。

上記までの作りで、フォームを送信してもらうことで「自分の招待コード」と「友達からの招待コード」を取得でき招待システムとして体を成しますが、さらに招待してもらいやすくします。

 

4. Contactform7の自動返信メールに自分の招待コードを載せる

フォームだけではhiddenなので送信者自身に伝わらないため、相手への自動返信メールに[mycode]を加えて招待を促しましょう。

 

5. ページ遷移させて自分の招待コードを表示する

送信直後に自分の招待コードを表示して、なおかつSNSにシェアしやすくします。

Contactform7編集画面の「フォーム」に記入してください。

function redirect() {
  location = 'http://送信完了画面のURL?mycode=' + $("#mycode").val();
}

加えてContactform7編集画面の「その他設定」に記入してください。

on_sent_ok: "redirect();"

以上でフォーム送信時に指定のURLにmycode付きで遷移することができます。

 

6. 送信完了画面を作る

固定ページで送信完了画面を作ります。

送信完了画面には http://example.com/finish?mycode=abcd123456 のようなURLでアクセスされるので、mycode=abcd123456を拾って加工します。

送信完了画面に下記のJavaScriptを記述することで、今開いているURLからmycodeを取得します。

var mycode = decodeURIComponent(location.search.match(/mycode=(.*?)(&|$)/)[1]);

URLから取得できたら下記のように利用して招待を促しましょう。

  • 画面に自分の招待コードを表示する。
  • mailtoリンクにURLと招待コードを埋め込む
  • ツイートにURLと招待コードを埋め込む。
  • Facebookに投稿しやすい定型文を作る。
  • LINEで送るにURLと招待コードを埋め込む。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません