こんにちは、下坂栄里子です。
この記事では、ボタンを押すと登録フォームがポップアップで表示される仕組みの作り方を解説します。フォーム項目の細かい設定から、ボタンとポップアップを連携させる方法まで、順を追って説明します。
「ポップアップを表示」から作成する
「カスタマイズ」メニューの中に「ポップアップを表示」という項目があります。ここにまだ何もフォームがない状態なので、これから作っていきます。
セクションを追加し、1列のレイアウトの中に「段落」「フォーム」「ボタン」を配置していきます。
フォームの入力項目を設定する
今回はお名前（姓・名）とメールアドレスを入力してもらう形にします。入力タイプを「姓」「名」に設定すると、自動でラベルテキストが入りますが、そのままだと分かりにくいこともあるため、「お名前（姓）」「お名前（名）」のように自分で丁寧に書き換えると親切です。メールの項目は「メール」のままで問題ありません。
ここで重要なのが送信ボタンの設定です。「注文フォームを送信」になっていることを確認してください。これになっていないと、入力された情報が正しく送信されません。
あわせて、プライバシーに関する文言も忘れずに入れておきましょう。少し小さめの文字サイズにするとバランスが良くなります。
背景色と文字装飾を整える
セクションの設定から「背景」をONにし、クリーム色っぽい色を選ぶと、フォーム全体が柔らかい印象になります。見出しのテキストを太字にすると、さらに目を引きやすくなります。
コンバージョンを高めるフォーム設計の考え方についてはこちらの記事でも解説しています。
ボタンを押したらポップアップが開くように設定する
最後に、ページ上の該当ボタンを選択し、「LINK TO」の設定から「ポップアップを開く」を選びます。今回はページの上部と下部の2箇所にボタンがあったので、両方とも同じように設定しました。これでボタンを押すと、先ほど作成したフォームがポップアップで表示されるようになります。
まとめ
ポップアップは「カスタマイズ」→「ポップアップを表示」から作成できる
フォームの入力タイプごとにラベルテキストを書き換えると分かりやすくなる
送信ボタンは「注文フォームを送信」になっているか必ず確認する
背景色や文字の太さを調整すると、フォーム全体の見た目が整う
ボタンの「LINK TO」設定で「ポップアップを開く」を選ぶと、クリックでフォームが表示される
ファネルデザイナー® 下坂栄里子でした。
SNSをやめても、あなたの知識は売れ続けます。
眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。
▶︎ 無料動画を視聴する