今回はClickFunnelsで入力フォームを作っていきます。
今回お届けするノウハウはこちら
Step1. 入力フォームを追加する
- 「ADD NEW ELEMENT」で追加する
まずはオプトインページに入っていきます。すでに名前とEメールアドレスの入力フォームがあるので、この下に「ADD NEW ELEMENT」で追加していきます。入力フォームは「FORM」の「INPUT」を選択すると追加されるので、これを設定していきます。
Step2. 入力フォームで設定できること
- TOP MARGIN：フォームの上の余白を調節することができます。これは大体のエレメントに付いている機能です。
- INPUT TYPE：どういうタイプの情報を入力するかということで、だいたいの方は他のMailchimpやConvertKitのEメールのプラットフォームと連携していると思います。そのEメールのプラットフォームの欄に例えば住所などを入れた場合は、プラットフォーム側の住所の顧客情報のところにそれが入っていくようになっています。そこをカスタムにしたいという場合は「Custom Type」があります。これは他の動画で説明しているので、それを見てください。今回は名前にするので「Full Name」を選択します。
- PLACEHOLDER TEXT：例えば「例）」という感じでこのフォームの中にあらかじめ表示される薄い文字を入れていきます。
- REQUIRED：「Not Required」であれば何も入力せずに送信できますが、「Required」だと入力しなければ送信ボタンが押せないようになっています。
- FONT FAMILY：フォントの種類を選択できます。
- FONT SIZE：フォームの中のフォントサイズを変更することができます。
- MOBILE SIZE：モバイルのフォントサイズのことです。通常はデスクトップ用のフォントサイズにひもづいているのですが、ここをクリックするとそのリンクを解除することができ、デスクトップ用とモバイル用に分けてサイズを変更することができます。プレビューの際はモバイル用のプレビューページを見ながら調整していくのですが、デスクトップと一緒に元に戻したい場合は「Remove mobile font size」のボタンをクリックすることで元に戻すことができます。
Step3. THEMESタブ
「THEMES」はすごく使い勝手が良く、あらかじめプリセットされたデザインを選べるようになっています。自らデザインしなくてもテーマを選ぶだけでいい感じのものが作れます。
Step4. ADVANCEDタブ
ADVANCEDタブは内容がけっこう複雑になります。
- FONT WEIGHT：フォームの中のフォントの太さを変えることができます。
- TEXT ALIGN：フォームの中のテキストのアラインメントを真ん中にしたり右側にしたりできます。
- CORNERS：角の丸みを強調したりなくしたりできます。
- SUBMIT ON ENTER：「ON」にすることでこのフィールドに何かを入力してEnterキーを押したときに下にあるボタンの代わりにサブミットしてくれる機能です。たまにそういうサイトがありますね。
- BG COLOR：何種類か用意されていて、この中から選ぶことができます。
- ICON：「ICON」はけっこうな頻度で使います。例えば「Name Icon」であれば人型のマーク、「Email Icon」であればEメールのマークが表示されます。これも「ICON STYLE」を「Color」にしたり「ICON POSITION」で「Left」にしたりできます。アイコンのスタイルやポジションを変えるのがこのメニューです。
Step5. ANIMATIONタブ
ANIMATIONタブはエレメントで共通しているのですが、「TIMED DELAY」はページがロードされてからどれくらいの時間差で表示するかを設定できます。
- 「None」：そのままページのロードとともに表示される
- 「Fade In」：1分に設定すると1分後にフェードインする
- 「Fade In With Scale」：拡大しながら設定した時間にフェードインする
「ANIMATION」の「TYPE」で「On Page Load」を選択してページのロードから何ミリセカンドで表示するかが設定できたり、そのスタイルを選ぶことができるので、いろいろと試してみてください。「On Page Scroll (becomes visible)」ではスクロールしていってこのエレメントが見えてからどれくらいの時間でフェードインするように表示されるかということまで細かく設定することができます。これを使うとけっこうおしゃれに見えるかもしれません。今回は以上です。
