今回はClickFunnelsでSMSのオプトインフォームを作っていきます。通常は名前とEメールアドレスを入れたりするのですが、今回は電話番号のSMSのオプトインフォームを作っていきます。
今回お届けするノウハウはこちら
Step1. 「SMS SIGN UP」を挿入する
「ADD NEW ELEMENT」をクリックして「SMS SIGN UP」を選択します。これは1つのエレメントになっています。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。この辺は文言を入れることができます。「SMS CHECKBOX」は例えば「イベント直前にSMSに通知する」というふうにチェックボックスの所の文言を変更できます。
- PHONE FIELD：「電話番号（例: 090-XXXX-XXXX）」と入力してみます。
- SMS NOTICE：文言が長かったので用意していないのですが、注意事項の所を日本語に直すといいと思います。
- FONT FAMILY：フォントを変更できます。
- 「INPUTS」「CHECKBOX TEXT」「NOTICE TEXT」はそれぞれ文字の大きさを変えることができます。このチェックボックスの所も文字が小さいので大きくしてあげるといいと思います。注意事項などはあまり大きくせずに、目立つものだけ大きくするほうがいいと思います。
- 「SMS CHECKBOX」と「SMS NOTICE」は色を変更できます。「SMS CHECKBOX」の色を緑にして、「SMS NOTICE」を薄めのグレーにしてみます。あまり薄いと見えなくなるので調整してみてください。
Step3. THEMESタブを設定する
次はTHEMESタブです。THEMESタブはだいたいデザインなどが出たりするのですが、こういうエレメントに関してはテーマが用意されていないことがあるので、ここは飛ばしていきます。
Step4. ADVANCEDタブを設定する
まずはSTYLESタブです。
- CHECKBOX TEXT STYLE：チェックボックスのテキストのスタイルを選択できます。「Bold」にしているのですが、文字の太さがあまり変わっていません。もしかすると日本語が多いからあまり見た目が変わらないのかもしれません。
- TEXT ALIGN：電話番号のボックスの所のテキストの左右の位置を変更できます。
- CORNERS：テキストのボックスの角を丸めることができます。なぜか「Country Code For Mobile」のほうは角を丸めることができません。本当はここも日本語化したいのですが、こういうところはClickFunnelsが対応していないことがあるので、徐々に修正されていくのではないかと思います。
- BG COLOR：電話番号のボックス内の背景の色を設定できます。「Black」は見にくいので「Grey」がいいかもしれません。
- ICON：電話のアイコンのことです。これは右側に入るため「TEXT ALIGN」が右だとかぶってしまうので、左に寄せておきます。こうすると電話だということが一目でわかるのでけっこういいです。
- ICON STYLE：色を選択することができ、「Color」というものもあります。「Black」か「White」が無難でいいと思います。
- ICON POSITION：ここも変更できます。右だとちゃんとテキストをよけてくれなかったのですが、左だとちゃんとテキストをよけてくれます。
次は「ANIMATION」です。他のエレメントでもお話ししている内容なのですが、これはページを読み込んでからのディレイのことで、遅れてエレメントを表示させることができます。上と下で分かれていて、上のほうは1秒以上の比較的長めの「TIMED DELAY」を設定することができ、下のほうはミリセカンド単位の短めの「TIMED DELAY」を設定することができます。
上のほうの「TIMED DELAY」は例えば60分のウェビナーで30分たってからピッチが入ったりしたときに、登録ボタンや購入のフォームを時間差で出す場合に使います。「TIMED DELAY」でスタイルを選びます。「Fade In」と「Fade In With Scale」があるので、この辺もテストしてみてください。
「MINUTES」と「SECONDS」はページが読み込まれてからどのくらいたってから表示するかを設定するものです。例えば「MINUTES」を「30」、「SECONDS」を「15」にするとページがロードされてから30分15秒後にエレメントが出てくるという感じになるのですが、このエレメントだとこの機能はあまり使わないかもしれません。
「ANIMATION」のほうは1秒、つまり1000ミリセカンド未満の「TIMED DELAY」です。JavaScriptでいうLazy Loadingの考え方に近いです。「TYPE」で2種類から選べます。
「On Page Load」はページの表示から起算してどのくらいのディレイを出すかという秒数を数えます。「STYLE」を選択することができ、「Fade In」は先ほど説明したとおりです。他にもあるのでいろいろ試してみてください。「DELAY (MS)」はミリセカンド単位で、500ミリセカンドが0.5秒です。これも調整することができます。「On Page Scroll (becomes visible)」はページをスクロールしていってこのエレメントの場所が見え始めたときから起算する秒数を指定するという、若干の違いがあります。
このような感じで完成です。今回は以上です。