ポップアップフォームの編集方法は？

登録フォーム 更新日 4月 6, 2021

目次

• サイト訪問者に一度だけ表示する方法
• CSSを使って編集する方法
• 表示時間を変更する方法
• 幅を変更する方法

 

サイト訪問者に一度だけ表示する方法

以下の手順で、ページ訪問者に対し初回のみポップアップを表示することが可能です。

＊表示はブラウザのクッキー情報をもとに行います。そのため同じユーザーでもクッキー情報を削除した場合や、閲覧履歴が残らないシークレットモードや別のブラウザを利用した場合は、再度表示されます。

1.  登録フォーム作成からポップアップフォームを作成
2. ステップ２デザインで、画面左上の「標準設定」をクリック
3.  「表示」>「ページ訪問者に対し初回のみポップアップを表示する」を選択

HTMLコードを編集する場合：

1.  ポップアップフォームのRawHTMLをコピー＆ペースト
2.  出力されるHTMLコードから次のコードを検索し、コードの追加行を赤でマークします。削除または変更はせず、コードの追加のみを行ってください。 A、B、C、Dのコードを適用すると、ユーザーがフォームに登録または閉じた場合フォームが再表示されることはなくなります。ユーザーが登録するまでフォームが表示される様に設定する場合は、コードAとDのみを利用してください。

A) document.getElementById(‘formbox_screen_subscribe’).style.display = ‘none’; verticalCenter(successScreen); localStorage.setItem(“bmePopupFormViewed”, “true”);

B) signupFormVeil.addEventListener(“click”, function() { signupFormContainer.style.display = ‘none’; localStorage.setItem(“bmePopupFormViewed”, “true”); });

C) signupFormCloseButton.addEventListener(“click”, function() { signupFormContainer.style.display = ‘none’; localStorage.setItem(“bmePopupFormViewed”, “true”); });

D) var bmePopupFormViewed = localStorage.getItem(“bmePopupFormViewed”); if (bmePopupFormViewed != “true”) { setTimeout(function() { verticalCenter(signupFormContainer); }, 3 * 1000);

CSSを使って編集する方法

• “#formbox_screen_subscribe”は登録フォーム画面のcontainer IDです。
• “#formbox_screen_success”は登録完了画面のcontainer IDです。
• “#closebtn”は登録フォームの閉じるボタンのIDです。
• “#btnSubmit” は登録ボタンのIDです。

*既存のフォームスタイリングを無効とするため”!important” というCSSコードの追加を推奨します。

表示時間を変更する方法

訪問者がウェブサイトやフォームが設置されたページを訪れた際、ポップアップフォームが少し遅れて表示されるように時間の指定をすることが可能です。登録フォームを作成する際に設定ができます。以下の指示に従って、ポップアップフォームの表示時間を変更してください。

1. Benchmark Emailアカウントへログイン

2. ダッシュボードメニューから「コンタクトリスト」>「登録フォーム」をクリック

3. 「登録フォーム作成」ボタンをクリックし「ポップアップフォーム」を選択した状態で「次へ」をクリック

4. 登録フォーム名、顧客リストを選択し「保存＆次へ」をクリック

5.  画面左上の「標準設定」をクリックし、「ボックス設定」メニューをクリック

6. 一番下の「配信間隔」からご希望の設定時間を選択。最大で60秒間、表示までに時間をかけることができます。

幅を変更する方法

ポップアップフォームはデフォルト設定で横幅400px、サイドの空白枠40pxの仕様となっております。また、最大画像領域は320pxです。フォームの横幅を320px以下に変更すると、画像サイズは自動的にフォームに合うように調整されます。

なお、変更が適用されない場合は、ブラウザのキャッシュが削除されているかご確認ください。

幅を変更する方法については、以下の手順に従ってください。

1. ダッシュボードメニューから「コンタクトリスト」>「登録フォーム」をクリック

2. ステップ２デザインで、画面左上の「標準設定」をクリック

3. 「ボックス設定」をクリック

4. 「横幅」の下のボックス内に任意のピクセル数を入力

5. 調整完了後、「保存＆出力」をクリック

なお、Benchmark EmailではEU一般データ保護規則（GDPR）に準拠した登録フォームを作成することが可能です。

詳しくは以下のFAQをご確認ください。

FAQ：EU一般データ保護規則（GDPR）に準拠した登録フォームにチェックボックスを追加することはできますか？

ご不明な点がございましたらこちらよりサポートへご連絡下さいませ。

 

 

＞＞「登録フォーム」のまとめページに戻る