今回はClickFunnelsで複数行の入力フォームを作っていきます。だいたいこういう名前やEメールアドレスのフィールドは1行ですが、これを複数行入れるようなフォームがClickFunnelsに用意されているので説明していきます。
今回お届けするノウハウはこちら
Step1. 「TEXT AREA」を挿入する
「ADD NEW ELEMENT」をクリックします。こういう場合は検索するとすごく楽です。今回は「TEXT AREA」というエレメントなので、「area」で検索します。「TEXT AREA」を選択して設定していきます。
Step2. SETTINGSタブの「INPUT TYPE」を設定する
今回一番大事なのが「INPUT TYPE」です。入力フォームを見ると名前の所は「NAME」、メールの所は「EMAIL」というふうに「INPUT TYPE」が設定されていますが、この項目は何を入力してもらうのかをClickFunnelsに教えることができます。「Not Set」のままでもいいのですが、これは何の項目かを入力していきます。
「INPUT TYPE」で「Custom Type」を選択すると「CUSTOM TYPE」が出てきて入力することができます。今回はお客さんのビジネスの状況などを入力してもらうフォームにしてみます。例えば「STATUS」という名前を付けてみます。
これは他の「CUSTOM TYPE」の入力フォームの動画でも出しているので見てほしいのですが、ここで入力した「CUSTOM TYPE」に関しては、後でオプトインした人についてClickFunnelsからコンタクトインフォをさかのぼっていって、名前やEメールやオプトインの日付などがある所と同列で「STATUS」という項目が新しくできます。その中にここで入力してもらった内容が入っているという感じです。
このオプトインページをConvertKitやMailChimpと連携させると思いますが、MailChimpであればMailChimpにも名前やEメールと同列に全く同じ「STATUS」というフィールドを作っておくと、そちらにもClickFunnelsが情報を渡してくれます。MailChimpの「STATUS」というフィールドに追加してくれて、中身が何かも教えてくれます。
Step3. SETTINGSタブのその他の項目を設定する
- TOP MARGIN：エレメントの上の余白を調整することができます。
- PLACEHOLDER TEXT：「Enter Your Info Here…」と書いてありますが、今回はここに「あなたのビジネスの状況を教えてください。収益、労働時間、現在の課題など。」という文言を入力しておきます。そうするとお客さんがオプトインするときにここに入力してくれると思います。
- REQUIRED：この入力フォームの記入を必須にするかどうかを設定できます。デフォルトだと「Not Required」になっているので「Required」にしておきます。
- FONT FAMILY：フォントを選択できます。日本語のフォントがあまりないので、日本語を入力してもあまり変わらなかったりします。
- FONT SIZE：フォーム内のフォントの大きさを設定できます。
Step4. THEMESタブを設定する
ClickFunnelsがプリセットのデザインをたくさん用意してくれているので、これを使うといいと思います。入力カーソルを合わせたりすると文字が変わったりするかもしれません。こういうふうに自分でデザインせずにプリセットの中から選ぶという方法もあります。
Step5. ADVANCEDタブを設定する
最初にSTYLEタブです。
- TEXT ALIGN：左に寄っているテキストを中央揃えや右揃えにできます。
- FONT WEIGHT：文字の太さです。「Bold」で太くなります。
- CORNERS：入力フィールドの角の丸みです。数値が大きいほど丸くなります。
- HEIGHT：入力フィールドの長さです。これを調整しておくとお客さんがだいたいどのくらいの量を書けばいいのかをあなたが思うとおりにやってくれるので、これもいろいろ設定してみてください。
- BG COLOR：入力フォームの背景の色です。あまり暗いと見にくいので「White」でいいと思います。
次はANIMATIONタブです。これは他のエレメントでも共通して話していることですが、このエレメントをページの読み込みからどのくらい遅らせて表示するかというディレイを入れることができます。大きく上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイ、下のほうは1秒未満、ミリセカンド単位の比較的小さなディレイを入れることができます。
上のほうから見ていきます。「TIMED DELAY」はディレイで表示されるときの効果を選択できます。「MINUTES」と「SECONDS」はディレイの時間を「分」と「秒」で指定できます。よく使うのは例えば60分のウェビナーに対して30分のところからセールスが始まったら決済カートなどを出すような場合で、30分15秒というふうに指定したりします。オプトインページではあまり使わないという感じがします。
「ANIMATION」は上と何が違うかというと、こちらはJavaScriptでいうLazy Loadingに近い考え方だと思います。「TYPE」は2種類あります。「On Page Load」はページの読み込みがどのくらいディレイするかの起算点になっています。「STYLE」で他のものも選択できます。「DELAY (MS)」はデフォルトで500ミリセカンドが指定されています。
「On Page Scroll (becomes visible)」は長いページなどでスクロールしてきてこのエレメントが表示されるであろう場所に来たときから起算してディレイを出すという機能です。これが「On Page Load」との違いです。これに関しても「STYLE」を選択することができ、「DELAY (MS)」の時間も指定できます。今回は以上です。ぜひ活用してみてください。
