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

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

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

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

1. ContactForm7の機能を拡張する

以下2点のプラグインをインストールしてください。

Contact Form 7 Modules
ContactForm7で<input type="hidden">を使えるようにします。

Contact Form DB
ContactForm7で送られたデータをDB化。招待コードを後から照合しやすくなります。

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

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

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

ContactForm7編集画面時の入力例は以下のような形です。

<p>[text* your-name placeholder "お名前" ]</p>
<p>[email* your-email placeholder "メールアドレス" ]</p>
<p>[text friendcode placeholder "お友達の招待コードがあればご記入ください。" ]</p>
[hidden mycode id:mycode]

mycodeには必ずIDを設定してください。次の手順で生成した招待コードを格納するために必要です。

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

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

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

＜script＞ //スクリプトが動いてしまうためscriptタグのみ全角でタグを書いているため直してください。
//乱数の生成と格納
$(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);
});
＜/script＞

この例では「半角英数4桁＋秒＋月＋日」の10桁の乱数を作っています。

JSだけの簡易な作りなので「絶対に重複しないコード」は作れませんが、桁を増やせば重複しにくくなります。JSの乱数は偏りがあるので日時を絡めると良いです。

以上の作りで、フォームを送信してもらうことで「自分の招待コード（mycode）」と「友達からの招待コード（friendcode）」を取得できるようになりました。

この送信者は誰から招待されたのか照合できるようになるので招待システムとして体を成しますが、さらに招待してもらいやすくします。　

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

送信者への自動返信メールにmycodeを加えて招待を促しましょう。

返信メールの例

[your-name]様

キャンペーンご参加ありがとうございます。
[your-name]様の招待コードは以下になります。

[mycode]

お友達に招待コードを伝えて参加してもらいましょう！
https://example.com

5. 送信完了画面に自分の招待コードを表示する

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

5-1. 送信完了画面を作る

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

送信完了画面には以下のようなパラメータ付きURLでアクセスする仕組みにします。

http://example.com/sended?mycode=abcd123456

末尾のmycode=abcd123456を拾って加工します。

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

＜script＞ //スクリプトが動いてしまうためscriptタグのみ全角でタグを書いているため直してください。
var mycode = decodeURIComponent(location.search.match(/mycode=(.*?)(&|$)/)[1]);
＜/script＞

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

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

5-2. フォーム送信時にパラメータ付きURLに遷移する

作成した完了画面にパラメータ付きURLで遷移するよう、フォーム側を調整します。

ContactForm7編集画面の「フォーム」の<script>内に追記してください。

document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'http://example.com/sended?mycode=' + $("#mycode").val();
}, false );

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