今回はClickFunnelsで住所の入力フォームを作っていきます。
今回お届けするノウハウはこちら
ClickFunnelsにおける住所の入力フォームの特徴
今開いているのはオーダーフォームのページなのですが、「Step #2」の所に住所を入力するフォームが作ってあります。これは1つのエレメントで構成されているのですが、ClickFunnelsは英語圏にカスタマイズされているところがあるので、住所の番地が先にきていたりして英語表記になっています。
ここの「Full Address」や「City Name」は変更できません。入力フォームの中に表示される文字は日本語にできますが、「Select Country」の所も全部英語で出てしまうので、日本のお客さんにリーチする際に驚かれるかもしれません。そういうことを気にしないという人はデジタルプロダクト以外で配送先が必要であればClickFunnelsでこういうものが作れるので、このやり方を説明していきます。
Step1. 「SHIPPING ADD.」を挿入する
「ADD NEW ELEMENT」をクリックします。「BILLING ADD.」というものもあるのですが、今回は配送先のほうなので「SHIPPING ADD.」を選択します。そうすると先ほどと同じような画面が出てくるので設定していきます。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。
- フォームの中の日本語化：例えば「ADORESS TEXT」を「番地」、「CITY TEXT」を「市町村」というふうにそれぞれ変えていきます。
- 「ADORESS TEXT」：番地
- 「CITY TEXT」：都市名
- 「STATE TEXT」：都道府県
- 「ZIP TEXT」：郵便番号
- FONT SIZE：フォームの中のフォントサイズを変更できます。外側のフォントサイズは変わりません。
Step3. THEMESタブを設定する
だいたいはTHEMESタブでプリセットされたデザインが選べるのですが、残念ながらこのエレメントでは選べません。このようにデザインがあまり調整できないエレメントもあります。
Step4. ADVANCEDタブを設定する
STYLESタブから見ていきましょう。
- REQUIRED：「Not Required」にしておけばこのフォームを記入せずに先へ進めます。デフォルトでは「Not Required」になっていますが、これも選んでみてください。
- TOGGLE EXTRA INFO：「Full Address」を入力してもらうか「Country」だけを入力してもらうかが選択できます。デフォルトだと「Show Full Address」になっているのですが、場合によっては「Only Country」を選択するのもありだと思います。
- TEXT ALIGN：「TOGGLE EXTRA INFO」を「Show Full Address」にしたときのフォーム内のテキストの左右の位置を変更できます。これは左側が一番いいと思います。
- CORNERS：入力フォームの角丸の半径を変更できます。ピクセル数を大きくするほど角が丸くなり、デフォルトの「5px」に戻すと四角い感じになります。
- BG COLOR：背景色を変更すると入力欄が認識しやすくなるので、「BG COLOR」でカラーを選択してもいいと思います。「White」「Gray」「Black」があるので、色味を確認しながら選択してみてください。
次はADVANCEDタブです。これは他のエレメントでも説明したのですが、ページを読み込んだりしたときにエレメントを表示する際のディレイを選択できます。上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイを入れることができ、下のほうはJavaScriptでいうLazy Loadingのような感じで時間の短いディレイを入れることができます。
上のほうから見ていきます。「TIMED DELAY」ではエフェクトを選択できます。「Fade In」と「Fade In With Scale」があり、これも実際のエフェクトを確認してみてください。
「MINUTES」と「SECONDS」で時間を指定できます。「HOURS」はないのですが、例えば1時間半であれば90分で指定できるので、その辺は安心してください。これは例えば60分のウェビナーのときに30分のところでオーダーフォームなどを出したいという場合によく使います。「MINUTES」を「30」、「SECONDS」を「15」と入力すれば30分15秒たったときにセールスページでこういうフォームを出したりすることができます。
「ANIMATION」のほうは短い期間のディレイでしたね。「On Page Load」と「On Page Scroll (becomes visible)」の2つがあります。
「On Page Load」はページが表示されたときから起算して指定したミリセカンドでディレイを表示できます。「STYLE」は種類がたくさんあるのでいろいろ試してみてください。「DELAY (MS)」はデフォルトでは500ミリセカンドですが、これも変更できます。
「On Page Scroll (becomes visible)」は例えば長いセールスレターなどでページをスクロールしていってエレメントの場所に来た時点から起算するようにできます。こちらも「STYLE」と「DELAY (MS)」を変更できます。
今回はオーダーフォームで入れましたが、他のページでも「SHIPPING ADDRESS」のエレメントを使えるので、例えばオプトインの際に「Country」だけ選択してもらうということもできると思います。いろいろできるので使ってみてください。今回は以上です。