1. 【フォーム】ポップアップバナー設定

【フォーム】ポップアップバナー設定

2021.11.22 更新
Text=kintsuba

■見本





下記フォームサンプルページを元に説明します。 
フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。
>フォームサンプルページフォームサンプルダウンロード

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。

windows:Ctrl + U
mac:option + command + U






質問2の解約を選択すると、ポップアップバナーが表示されます。
表示条件などは適宜変更してご使用ください。


■編集ファイル:index.html

(1)ポップアップを表示させたい回答に「onClick="showModal();"」を設定

(2)ポップアップバナーの表示部分のHTMLを設定します。
①背景をグレースケールにする
②バナー表示部分のHTML
③1つ目のバナー設置部分
④「style="display: none;"」で初期は非表示にしておく
⑤バナー画像の設定
⑥解約ボタンの設置
⑦申し込みボタンの設置
⑧複数パターンのバナーを設置するときは下に追加していく



(3)必要な変数を設定

(4) (1)で呼び出す「showModal()」の設定
①クリック時にタグを設置する場合に使用する
②申請種別の内容を取得
③選択商品の内容を取得
④ ②、③の条件を満たしたときの表示内容
⑤他のバナーが表示されていた場合に閉じる
⑥ ②、③の条件を満たしかつバナー表示が1回目の時の条件設定
⑦1回目の表示の記録
⑧タグを設定する
⑨1つ目のバナー表示
⑩バナー全体を表示

〈表示バナー例〉

(5)完了バナー(サンクスバナー)の設定

(6)完了バナー(サンクスバナー)の表示部分のHTMLを設定します。
①完了バナー画像設定
②閉じるボタンの設定、クリックでフォーム自体が閉じます。


(7)完了バナー(サンクスバナー)の挙動設定
① (2)-⑦の申し込みボタンをクリックしたときの設定
②「showModal()」で呼び出したバナーを非表示にする
③完了バナー(サンクスバナー)を表示させる
④フォームの内容が送信されないが、タグ付与情報を送信する


■編集ファイル:style.css
879~976行目を追記してください。
ご希望通りのセッティングができましたか?

0人中0人がセッティングができたと言っています。

このマニュアルの作成者は kintsuba です。

こちらのマニュアルで希望のセッティングが出来なかった
際は、下記のどちらかでお問い合わせください。

スタートプランの方はこちら
LINE公式アカウント機能拡張プラン、
オートコールセンタープランの方はこちら