HTML5のiframeという機能を使います。 サンプルページをダウンロードし、ソースコードをご確認下さい。 サンプルページ＞ ダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U 実装にはオリジナルフォームの編集が必要になります。 編集方法につきましては下記ガイドをご確認下さい。 オリジナルフォームの編集方法はこちら＞ （1）対象のフォームのindex.htmlの挿入箇所に下記を記述 ※別ページのURLは変更する
<div class="iframe-wrapper">
<iframe src="別ページのURL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>（2）下記スタイルを追加 padding-bottomの値は、別ページのコンテンツの高さに合わせてご変更下さい。
<style>
.iframe-wrapper {
position: relative;
padding-bottom: 94.25%;
height: 0;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
質問の途中で、上記のような継続を促すバナーを表示させる方法についてのガイドです。 継続を促すタイミングにつきましては任意となりますが、サンプル例では解約理由の選択時にバナーが表示される仕様になります。 下記のサンプルページをご確認ください。 （※バナー表示条件：質問3 効果を実感できなかった or 価格が高い or 商品が余っている 選択） 下記フォームサンプルページを元に説明します。 ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード(11) ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U 1.バナー作成 ↓ 2.バナーの挿入部分に質問とバナーを設置【ファイル：index.html】 ①画像追加 ②③④申請種別に関する質問はname属性col_1に格納 ⇒ 参照）申請種別の質問をフォーム内に2回以上使用する場合
↓ 3.休止期間の設定 ①②③休止期間に関する質問はname属性col_2に格納【ファイル：index.html】 ⇒ 参照）申請種別の質問をフォーム内に2回以上使用する場合
↓ 4.申請種別(col_1)，休止期間(col_2)の送信設定【ファイル：index.html】
↓ 5. 2，3の呼び出し設定【ファイル：index.html】
↓ 6.質問3の解約理由によって出し分け【ファイル：display.js】 解約理由が「効果を実感できなかった」「価格が高い」「商品が余っている」の時にバナーを表示 ※バナーを複数設定する場合はこちらで条件分岐を追加
↓ 7.継続促進バナーの質問3-1の解約理由によって出し分け【ファイル：display.js】 ①以降の質問を非表示 ②休止選択時処理 ③スキップ選択時処理 ④解約選択時処理 ⑤ ②で休止選択時に休止期間選択時処理
↓ 8.name属性が変更になった場合は、重複しないように調整する（連続番号にする） ⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール新機能#07┃【高速PDCAを実現】お客様ご自身でフォームの編集、変更が可能になりました！！！
遂に！！！
お客様ご自身で、オリジナルフォームの作成、解約フォームの編集ができるようになりました！！！
今まで小さな修正でもわざわざ弊社にご連絡いただいていた手間がすべてなくなります！
(テキストを赤にするだけ、太字にするだけでお時間いただいてしまい大変失礼いたしました・・・。)
これにより、
・ポップアップバナーを変更したい。
・休止ではなくてスキップにしたい。
・休止にデフォルトチェックを付けたい。
・商品を追加したい。
など
全て自分たちのタイミングで変更が可能です。
オリジナルフォームの作成・編集は、「ホーム>コンテンツ>LIFF」から可能です。
各種設定は下記をご確認ください！
オリジナルフォーム（LIFF）の作成>
回答内容によって、次の表示内容を出し分けます。 下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■編集ファイル：index.html （1）全体の質問を非表示にして、初期表示させる部分を設定 ※今回は説明用にCSSを<head></head>内に書き込んでいますが、style.cssに書き込んでもOKです。
（2）Javascriptで出し分け処理を設定します。
①質問２のラジオボタンが変更されたら処理がスタートします。 ②のif文は休止が選択された時の処理を記入（225行目まで） ③質問2-1の休止期間選択を表示 ④質問3、エントリーボタンは非表示にする ⑤のif文はスキップが選択された時の処理を記入（231行目まで） ⑥質問2-1の休止期間、質問3は非表示にする ⑦エントリーボタンを表示 ⑧質問2-1の休止期間の選択を解除 ⑨のif文は解約が選択された時の処理を記入（236行目まで） ⑩質問3以降を表示 ⑪質問2-1の休止期間、エントリーボタンは非表示にする ⑫質問3を表示 ⑬次の質問にスクロールする処理、id="scrollAnchor"までスクロールする【オリジナルフォーム】商品選択の作成、追加
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
■目的 商品選択の設問作成、追加 ■セット所有時間 １０分 ■セットの流れ サンプルフォームの93～138行目が商品選択部分になります。
①解約休止フォームにおいて、商品選択に関する設問のname属性は「col_4_title」「col_4」の固定で指定 ②質問内容のテキストはこちらを編集 ③商品画像はこちらに画像パスを設定 ④商品名はこちらで設定 ⑤商品項目を増やしたい場合は<li>～</li>までを複製し、内容を適宜ご変更ください。【フォーム】セレクトボックスの作り方
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
フォームサンプルページの質問5が「セレクトボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする ②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「age」としてます。） ③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル ④質問ナンバーを指定 ⑤質問テキストを指定 ⑥class「select」を指定する ⑦selectタグを指定、name属性は前の質問から連番になるように指定 ※ data-prompt-position="topLeft"はバリデーションの表示位置を指定 ⑧初期表示、valueは空を指定 ⑨optionタグで選択内容を指定【フォーム】解約理由ごとにバナーを出し分ける
解約理由の内容によって、上記のような継続を促すバナーを出し分ける方法のガイドです。 継続を促すタイミングにつきましては任意となりますが、サンプル例では解約理由の選択時にバナーが表示される仕様になります。 下記のサンプルページをご確認ください。 （※バナー表示条件：質問3 効果を実感できなかった or 価格が高い or 商品が余っている 選択） 下記フォームサンプルページを元に説明します。 ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード(20) ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ※継続バナーの設置がない場合は、先に下記ガイドより設置してください。 ＞【フォーム】継続促進バナーの設置方法 ■対象ファイル：dispaly.js ①質問３の解約理由によって、imgタグのsrc属性を動的に変更する
②「効果を実感できなかった」選択時の表示画像を設定する ③「価格が高い」選択時の表示画像を設定する ④「商品が余っている」選択時の表示画像を設定する
フォームの申請内容がECAIに届かない。という事象の際は下記をご確認ください。
①実機（スマートフォン）で行う ②LINEアプリ内で申請する ③LINEアプリ内で申請する際は対象フォームの「LIFF呼び出しURL」を使用する （※表示確認URLとは異なります）
送信完了ページの編集が必要になります。 対象のフォームをダウンロードし、作業を進めて下さい。 既存のオリジナルフォーム（LIFF）のダウンロード方法はこちら＞ (1)complete.htmlのhead内に下記を追加 URL部分(https://www.sample.com)はリダイレクトさせたいものに変更して下さい。
<script>
document.location = "https://www.sample.com";
</script>
(2)コンテンツ部分をコメントアウト、もしくは削除して表示されないようにする
(3)編集が終わりましたらアップロードする オリジナルフォーム（LIFF）のアップロード方法はこちら＞【詳細版】フォームアップロード後のチェック項目
こちらは解約・休止・サイクル変更・スキップエントリーフォームについてのガイドとなります。 アップロード方法につきましては下記を参照ください。 ＞オリジナルフォーム（LIFF）のアップロード方法 アップロード後、テスト送信を行ってください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 下記３つのチェック項目を確認し、問題なく設定がされているかご確認ください。 【チェック項目】 ①フォーム内の質問と設定col(name属性)は正しく設定されているか ＞フォーム内質問と設定col(name属性)の確認方法 ※修正が必要な場合は下記ガイドの記載ルールに沿って設定されているかご確認ください。 ＞解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール ②フォーム送信後の申請項目、回答項目は正しく表示されているか ＞オリジナルフォームで取得した情報を受信BOXで確認する ※【解約・休止・サイクル変更・スキップ】エントリーフォームでの申請の場合はASSダッシュボードにも申請内容が表示されます。
③タグは想定通りついているか ＞付与したタグの動作確認方法【フォーム】商品選択ごとにバナーを出し分ける
■目的 商品選択ごとにバナーを出し分ける設定 ■セット所有時間 30分 下記フォームサンプルページを元に説明します。 サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■セットの流れ 編集ファイル：display.js サンプルページを例に説明をしていきます。 仕様は商品１を選択時はバナーを表示させ、商品２を選択時はバナーを表示させません。 質問３を選択時にどちらの商品が選ばれているかの分岐処理をいれて、バナーの表示を調整します。 66～116行目
if($('.item :radio:eq(0)').prop('checked')){
//商品1選択の処理
}
else {
//商品2選択の処理
}注意点としては、質問３でバナーを表示後に、質問１の商品選択に戻ったときにバナー以降を非表示にする処理を忘れずに入れてください。 これをしないとバナーの表示が残ってします場合があります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【フォーム】スムーズスクロール設定
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【編集ファイル】 index.html ①スクロールしたい場所にid属性でアンカーを設定する
②スムーズスクロールの処理をjavascriptで設定
③スクロールしたいタイミングで②で設定したスクロール処理を呼び出す 引数には①のid属性を設定する
短縮URL機能を使用して、オリジナルフォーム（LIFF）のPV（クリック数）を計測できます。 （１）LIFF呼び出しURLをコピーする
↓ （２）リッチメニューなどオリジナルフォームにリンクする部分で短縮URLを設定する ※今回は解約・休止フォームを例に挙げておりますが、その他のフォームでも設定可能です
↓ （３）短縮URLの作成 ①作成と編集のタブを選択 ②管理名 ③（１）でコピーしたLIFF呼び出しURLを張り付け ④必要がない場合はチェックを外す ※解約・休止フォームの場合は通常ログインしている状態となります。 ⑤チェックする ⑥挿入（保存） ※すでに作成済みの場合は作成履歴より挿入して下さい。
↓ （４）短縮URLが挿入されていることを確認し保存
↓ （５）計測結果を見る 分析 ＞ 短縮URL 設定した短縮URLのクリック数（＝PV）を確認できます
↓ （６）オリジナルフォームの離脱率を算出する 申請数 ÷ PV × 100 ＝ 離脱率 対応フォーム、計測期間を合わせて、対応完了した申請数を上記式に当てはめてください。
（1）サイドメニュー「会員」 ＞ 「会員リスト」 ＞ 対象会員「詳細」
↓ （2）LIFFコンテンツ内から、対象の送信内容の「詳細」
↓ （3）取得した内容を確認できます
■目的 各質問ごとにタグを付与する方法の説明です。 タグ付与したい質問が複数あるときに有効です。 タグ付与したい質問が1つのみの場合はこちら＞ ■セット所要時間 45分 ■サンプルコード フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U ■セットの流れ サンプルの例はチェックボックスとラジオボタンの２つの場合です。 3つ以上の設定も可能です。 各質問の回答時にタグを設定し、フォーム送信時にそれぞれのタグをまとめて付与します。 タグコードに本番用のタグコードをご設定ください。 送信時にデフォルトのタグを設定する場合は、240行目の[]にタグコードを記載してください。 例）['abababab']
<script>
$(function () {
//ラジオボタン選択
var periodTags
$('.period input').on('change', function () {
periodTags = [];//空の配列
var val = $(this).val();
if(val == '１ヶ月'){
periodTags.push('タグコード1');
}
else if(val == '2ヶ月'){
periodTags.push('タグコード2');
}
else if(val == '3ヶ月'){
periodTags.push('タグコード3');
}
else if(val == 'それ以上'){
periodTags.push('タグコード4');
}
});
//チェックボックス選択
var triggerTags
$('.trigger input').on('change', function () {
triggerTags = [];//空の配列
$('.trigger input:checkbox:checked').each(function() {
var val = $(this).val();
if(val == '自分にピッタリな商品だと思ったから'){
triggerTags.push('タグコード5');
}
else if(val == '有名人・雑誌・TVなどの影響を受けたから'){
triggerTags.push('タグコード6');
}
else if(val == '友人知人の紹介だから'){
triggerTags.push('タグコード7');
}
else if(val == '試してみたかったから'){
triggerTags.push('タグコード8');
}
});
//ボタン表示
if ($('.btn.entry').css('display') == 'none') {
$('.btn.entry').show();
scrollNext('#scrollAnchor');
}
});
//送信時にまとめてタグ付与
$('.btn-submit').on('click', function () {
if ($("#form-name").validationEngine('validate')) {
//連打防止ローディング
$('.btn').hide();
$('.loading').show();
var tags = [];//空の配列
var tags = tags.concat(periodTags,triggerTags);//タグをまとめる
//申請時タグに配列のtags追加
document.getElementById("add_tags").value = tags;
//return false;//コメントアウト外すと送信されません
}
});
});
</script>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【簡易版】フォームアップロード後のチェック項目
こちらは解約・休止・サイクル変更・スキップエントリーフォームについてのガイドとなります。 アップロード方法につきましては下記を参照ください。 ＞オリジナルフォーム（LIFF）のアップロード方法 アップロード後、テスト送信を行ってください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 下記3つのチェック項目を確認し、問題なく設定がされているかご確認ください。 【チェック項目】 ①フォーム内の質問と設定col(name属性)は正しく設定されているか ＞確認方法はこちら ②フォーム送信後の申請項目、回答項目は正しく表示されているか ＞確認方法はこちら ③タグは想定通りついているか ＞確認方法はこちら
フォームの内容を大幅に変更された場合は、下記「詳細版」をご確認ください。 ＞【詳細版】フォームアップロード後のチェック項目オリジナルフォーム(LIFF)送信時のメール通知設定
GoogleのGASという機能を使って実装します。 Googleアカウントが1つ必要となりますのでご用意ください。 1アカウントで1日100通まで通知が可能となります。（Google有料プランは1500通まで対応可） Googleアカウント作成はこちら＞ ①グーグルドライブ ＞ ＋新規 ＞ その他 ＞ Google Apps Script
②コード.jsに下記をコピペし、送り先メールアドレス、タイトル、本文を編集 その後 保存 ＞ デプロイ ＞ 新しいデプロイ
function doPost(){
GmailApp.sendEmail("送り先メールアドレス", "（タイトル）オリジナルフォーム送信通知", "（本文）オリジナルフォームが送信されました");
}
③バージョン１（任意のテキスト） ＞ 自分のGoogleアカウント ＞ 全員 ＞ デプロイ
※最初のデプロイはグーグルからアクセスの許可を求められます。 その場合は許可して、詳細をクリックしてください。
④下のURLをコピー ＞ 完了 ※URLは後で使います。
⑤オリジナルフォームの準備 下記サンプルをダウンロードして、通知設定に必要なコード（⑥）を対象フォームへ設置してください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ⑥index.htmlの122～158行目をコピペ const URLに④のURLを設置
<script>
//メール通知
function OnPost(){
const URL = "デプロイ時のURLを設置";
let postparam = {
"method" : "POST",
"mode" : "no-cors",
"Content-Type" : "application/x-www-form-urlencoded"
// "body" : JSON.stringify(SendDATA)
};
fetch(URL, postparam);
}
//送信時処理
$(function () {
$('.btn-submit').on('click', function () {
if ($("#form-name").validationEngine('validate')) {
//メール通知
OnPost();
//連打防止ローディング
$('.btn').hide();
$('.loading').show();
//フォーム送信
setTimeout(addSubimt, 2000);
}
});
});
var addSubimt = function(){
document.form.submit();
}
</script>⑦formタグにname属性"form"を設置 ※設置がある場合は既存のものでもOK
⑧buttonのtype属性はbuttonにする
問題なく設置できると、②で指定したメールアドレスに通知が飛ぶようになります。 連続で送信された場合、グーグルのサーバーの状況によりメール通知が行われないことがあります。フォーム送信後の申請項目、回答項目の確認方法（解約・休止・サイクル変更・スキップ）オリジナルフォーム(LIFF)送信時にメールにも送信内容を送る設定
GoogleのGASという機能を使って実装します。 Googleアカウントが1つ必要となりますのでご用意ください。 1アカウントで1日100通まで通知が可能となります。（Google有料プランは1500通まで対応可） Googleアカウント作成はこちら＞ ①オリジナルフォームの準備 下記サンプルをダウンロードして、通知設定に必要なコード（②）を対象フォームへ設置してください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ②index.htmlの136～181行目をコピペ const URLには後ほどGASで指定されたURLを設置（※ガイド後半の⑧） SendDATAには各質問のタイトルと回答のValueを格納
<script>
//メール通知
function OnPost(){
const URL = "デプロイ時のURLを設置";
let SendDATA = {
"col_1_title" : $('[name=col_1_title]').val(),
"col_1" : $('input[name=col_1]:checked').val(),
"col_2_title" : $('[name=col_2_title]').val(),
"col_2" : $('input[name=col_2]:checked').val(),
"col_3_title" : $('[name=col_3_title]').val(),
"col_3" : $('[name=col_3]').val(),
};
let postparam = {
"method" : "POST",
"mode" : "no-cors",
"Content-Type" : "application/x-www-form-urlencoded",
"body" : JSON.stringify(SendDATA)
};
fetch(URL, postparam);
}
//送信時処理
$(function () {
$('.btn-submit').on('click', function () {
if ($("#form-name").validationEngine('validate')) {
//メール通知
OnPost();
//連打防止ローディング
$('.btn').hide();
$('.loading').show();
//フォーム送信
setTimeout(addSubimt, 2000);
}
});
});
var addSubimt = function(){
document.form.submit();
}
</script>③formタグにname属性"form"を設置 ※設置がある場合は既存のものでもOK
④buttonのtype属性はbuttonにする
ここからはGoogleのGASの設定になります。 ⑤グーグルドライブ ＞ ＋新規 ＞ その他 ＞ Google Apps Script
⑥コード.jsの編集 下記をコードをコピペし、送り先メールアドレス、タイトルを任意のものに変更 mail_messageに本文が入るようになります その後 保存 ＞ デプロイ ＞ 新しいデプロイ
function doPost(e){
let JsonDATA = JSON.parse(e.postData.getDataAsString());
let mail_message = JsonDATA.col_1_title + "：" + JsonDATA.col_1 + "\n" + JsonDATA.col_2_title + "：" + JsonDATA.col_2 + "\n" + JsonDATA.col_3_title + "：" + JsonDATA.col_3 ;
GmailApp.sendEmail("送り先メールアドレス", "（タイトル）オリジナルフォーム送信通知", mail_message);
}
⑦バージョン１（任意のテキスト） ＞ 自分のGoogleアカウント ＞ 全員 ＞ デプロイ
※最初のデプロイはグーグルからアクセスの許可を求められます。 その場合は許可して、詳細をクリックしてください。
⑧下のURLをコピー ＞ 完了 ※URLは②のconst URLに設置
問題なく設置できると、⑥で指定したメールアドレスに通知が飛ぶようになります。 連続で送信された場合、グーグルのサーバーの状況によりメール通知が行われないことがあります。セレクトボックスの選択ごとに複数のタグを付与する方法
対象のセレクトボックスにイベントを設定し、switch文を回してタグ付与を行ってください。 サンプルコード フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U (1)対象のセレクトボックスに下記イベントを設定
onchange="selectboxChange()"
↓
(2)switch文で選択ごとにタグを付与し、送信用のvalueにタグを格納する
①空の配列を指定
※送信時にデフォルトでタグを埋め込む場合は['タグコード'];としてください。（タグコードは置き換える）
②対象のセレクトボックスの選択肢を取得
③それぞれタグコードを指定
<script>
function selectboxChange() {
tags = [];
selindex1 = document.getElementById("select1").selectedIndex;
selindex2 = document.getElementById("select2").selectedIndex;
switch (selindex1) {
case 1:
tags.push('タグコード1');//男性
break;
case 2:
tags.push('タグコード2');//女性
break;
case 3:
tags.push('タグコード3');//その他
break;
}
switch (selindex2) {
case 1:
tags.push('タグコード4');//A型
break;
case 2:
tags.push('タグコード5');//B型
break;
case 3:
tags.push('タグコード6');//O型
break;
case 4:
tags.push('タグコード7');//AB型
break;
case 5:
tags.push('タグコード8');//その他
break;
}
//送信用にタグを格納
document.getElementById("add_tags").value = tags;
}
</script>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。フォーム立ち上げ時ポップアップ設置方法
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
（１）index.html ①画像の設定 ②閉じるボタン ③離脱ボタン ④ポップアップ挙動
〈コピペ用コード〉
<!--フォーム立ち上げ時ポップアップ-->
<div id="modal-content">
<div class="pop">
<!--画像設置-->
<img src="images/bnr_popup2.png" alt="">
<!--ボタン設置-->
<ul>
<li><span id="modal-close">ダイエットをやめる</span></li>
<li><a href="">もう少しだけダイエット<br>を頑張ってみる！！</a></li>
</ul>
</div>
</div>
<script>
$(function () {
$("body").append('<div id="modal-overlay"></div>');
$("#modal-overlay,#modal-content").fadeIn("slow");
//モーダル閉じる
$("#modal-close").unbind().click(function () {
$("#modal-content,#modal-overlay").fadeOut("slow", function () {
$("#modal-overlay").remove();
});
});
});
</script>
<!--フォーム立ち上げ時ポップアップ-->（２）style.css 738～793行目、 1073～1088行目（@media only screen and (min-width: 640px) ）、
/*=======================================
modal
=======================================*/
#modal-content {
width: 90%;
max-width: 320px;
margin: 0;
padding: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 2; }
#modal-overlay {
z-index: 1;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-color: rgba(0, 0, 0, 0.75); }
.pop {
position: relative; }
.pop ul {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
height: 50px;
display: flex;
justify-content: center; }
.pop li {
width: 126px;
margin: 0 4px; }
.pop a,
.pop span {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
box-sizing: border-box;
border-radius: 25px;
font-size: 10px;
line-height: 1.4;
background: #006fe2;
color: #fff;
cursor: pointer; }
.pop span {
background: #fff;
color: #bbb;
border: 1px solid #bbb; }
@media only screen and (min-width: 640px) {
#modal-content {
max-width: 450px; }
.pop ul {
bottom: 20px;
height: 70px; }
.pop li {
width: 190px;
margin: 0 6px; }
.pop a,
.pop span {
border-radius: 35px;
font-size: 15px; }
}（３）ポップアップバナーの画像をimagesフォルダに格納
オリジナルフォームのHTML設定次第で回答ごと点数付けをし、さらに合計点数によってタグを出し分けすることが可能です。（回答後のメッセージ出し分けも可能）
HTMLの作成になりますのでお客様の方でお調べいただき作成をお願いします。
弊社にて有料で作成することが可能ですので、希望の際はサポート宛にお見積り依頼のご連絡をお願いします。
CV計測の設定方法につきましては下記ご確認ください。 CV計測の設定方法はこちら＞ （1）計測したいオリジナルフォームの表示URLをコピペします。
↓ （2）広告 ＞ 広告リスト ＞ 対象のコード編集 （1）のURLを設定し、保存
↓ （3）対象のオリジナルフォームにトラッキングコードを追加
※ＣＶ計測するページ（complete.html）にjqueryの本体が読み込まれていない場合は<head>内に下記も追加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>↓ （4）計測したいオリジナルフォームのLIFF呼び出しURLをコピペします。
↓
（5）広告 ＞ 広告リスト ＞ 対象のコード設定方法 ＞ LPからの計測 ＞ ③
（4）のLIFF呼び出しURLを使用して、キャンペーンURLを生成する。
計測にはこちらのキャンペーンURLを使用して下さい。
↓ （6）LPクリック、CVが計測できていれば完成です
オリジナルフォームのURLを短縮URLにすることで、表示期間設定が可能です。
▼手順
①短縮URLにする際に、オリジナルURLにLIFFの「呼び出しURL」を設定
↓
②リンクに有効期限を設定するにチェックし、有効期限（日時）を設定する
短縮URLの新規作成方法はこちら＞
指定のタグが付いているユーザーのオリジナルフォームを表示させない方法です。 フォームの回答に回数制限をつけたいときなどに有効です。 下記フォームサンプルページを元に説明します。 ファイルをダウンロードして内容をご確認ください。 フォームサンプルダウンロード＞ フォームサンプルページ＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ※PCのブラウザで開いても正常に動作しません。 ■処理の流れ ①ローディング表示 ↓ ②指定のタグがあるかチェック ↓ ③指定のタグがある場合はフォームを閉じます ■編集ファイル：index.html (1)ローディングの初期設定 フォームアクセス時に、指定タグの情報を問い合わせている間、ローディング画面を表示させる必要があります。 推奨のローディング設定をする場合は、既存のローディング設定を削除（コメントアウト）してください。 （※既存のローディング設定をそのまま使って組み込むことも可能です。） 例）
//loader
// $(window).on('load', function () {
// $("#loader").addClass('loaded');
// });
// $(function () {
// setTimeout(function () {
// $("#loader").fadeOut();
// }, 5000);
// });
<!-- <div id="loader">
<div class="line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div> -->（2）ローディング用のスタイル追加 backgroundのURLにローディング用の画像パスを設定
<style>
/* ローディング用 */
header,
.wrap,
footer{
display: none;
}
#nowLoading {
display: table;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
opacity: 0.8;
}
#innerMsg {
display: table-cell;
text-align: center;
vertical-align: middle;
padding-top: 140px;
z-index:100;
background: url("./images/loading_cl.svg") center center no-repeat;
}
</style>（3）ローディング画像の設定
<script>
//ローディング画像表示
function dispLoading(msg){
// 引数なしの場合、メッセージは非表示。
if(msg === undefined ) msg = "";
// 画面表示メッセージを埋め込み
var innerMsg = "<div id='innerMsg'>" + msg + "</div>";
// ローディング画像が非表示かどうかチェックし、非表示の場合のみ出力。
if($("#nowLoading").length == 0){
$("body").append("<div id='nowLoading'>" + innerMsg + "</div>");
}
}
//ローディング画像非表示
function removeLoading(){
$("#nowLoading").fadeOut();
$("header, .wrap, footer").show();
}
dispLoading();
</script>（4）タグチェックの非同期処理の設置 ※フォームアクセス時のテキストはこちらで変更可
//タグチェック
function CheckTagProc() {
var uid = $("#useridfield").val();
var fid = $("#fid").val();
var tag = $("#check_tags").val();
var botid = $("#bot_id").val();
$.ajax({
type: "POST",
url: "/api/tag/chk",
dataType: 'json',
data: {
"uid": uid,
"fid": fid,
"bot_id": botid,
"tag_code": tag
},
success: function(j_data) { if (j_data['result'] == 'Granted'){alert("こちらのフォームは回答済みです。");liffclose();} },
error: function(XMLHttpRequest, textStatus, errorThrown) {
},
complete: function() {removeLoading();}
});
}
//■Response
//error_code 正常な場合は「200」、指定されたタグが存在しない・会員情報が存在しない等の場合は「500」
//result error_codeが500の場合は「ParamMissing」、指定タグコードが付与済みの場合は「Granted」、指定タグコードが未付与の場合は「NotGranted」（5）非同期処理のコール処理を追加
（6）指定のタグを設置 valueにタグを指定、複数の場合は「,」で区切る
（7）指定のタグがあるユーザーがフォームを開くと、アラート表示後に閉じます。
■目的 オリジナルフォーム送信後、送信内容をメッセージでリマインド配信することができます。 ■セット所要時間 1分 ■セットの流れ （１）コンテンツ ＞ LIFF ＞ 設定 対象のオリジナルフォームの設定をひらく
↓ （２）「送信内容をメッセージで送る」にチェックを入れて保存
↓ （３）送信テスト LIFF-URLから送信テストを行い、メッセージで送信内容が送られてくれば設定完了です。 オリジナルフォームのテスト送信方法＞
回答内容がすべて配信されるため、設定する前に必ず配信される回答内容を確認してください。 質問で分岐がされている場合、ユーザーの操作によっては内容が重複して送信されることがあります。 そのような場合はオリジナルフォームを修正することで重複を防ぐことができます。
↓ （４）メッセージも同時に送りたい場合 フォーム送信時にタグ付与を行い、タグトリガーステップメッセージを設定してください。 オリジナルフォームで、送信ボタンを押したらタグを付与する方法＞ 「タグトリガーステップメッセージ」の作成方法＞オリジナルフォームをクリックしたユーザーにタグを付与する方法
■目的 オリジナルフォームをクリックしたユーザーにタグを付与することができます。 注意点として、すでに指定のタグが付与されている場合は、タグを上書きして再付与することはできません。 ■セット所要時間 １０分 ■セットの流れ 設定方法としては、オリジナルフォームの呼び出しURLを短縮URLに設定し、クリック時にタグが付与される設定を行います。 （１）オリジナルフォームの呼び出しURLを確認 クリックした時にタグ付与させたい、オリジナルフォームの呼び出しURLをコピペしてください。 コンテンツ ＞ LIFF
↓ （２）短縮URLの設定 短縮URLの新規作成方法はこちら＞ 使用したいメッセージや1：1トークで短縮URLを設定します。 ①短縮URLの管理名 ②オリジナルフォームの呼び出しURLを貼り付け ③ログイン認証にチェック ④クリック時に付与したいタグを追加 ⑤短縮URLを挿入
↓ （３）「友だち追加URL」を設定する オリジナルフォームの送信完了ページの「閉じる」ボタンに、「友だち追加URL」を設定します。 こちらの設定を行わないと、「閉じる」ボタンをクリックしても白紙のページが残ってしまいます。 オリジナルフォームの編集方法はこちら＞ 下記ソースはサンプルになります。 リンク先はオリジナルフォームが設定されているLINEの「友だち追加URL」を設定してください。 ※作成されたオリジナルフォームによっては、ソースが異なる場合があります。 ※編集ファイルはcomplete.html
<a href="https://lin.ee/●●●●●●●" class="blue">閉じる</a>
オリジナルフォームで入力された情報をECAIに送るために、LIFFの情報をソース上で取得しています。 オリジナルフォーム上で取得できる情報は以下５つとなります。 ###cancellationurl### ⇒ 解約休止フォームの完了ページURL ###formurl### ⇒ その他フォームの完了ページURL ###fid### ⇒ フォームID ###liffid### ⇒ LIFF ID ###botid### ⇒ BOT IDスケルトン状態からオリジナルフォームを作成する方法
■目的 テンプレートを使用せず、オリジナルフォームを作成する方法 ■セット所要時間 30分（※フォームのコンテンツ量によって変わります） ■セットの流れ オリジナルフォームの内容をECAIに送るために、HTML内に記載のルールがあります。 ルールのみを記載した、スケルトン状態のフォームをダウンロードし、 内容をご確認ください。 スケルトンフォーム＞ スケルトンフォームダウンロード＞ ■ファイル説明 ・index.html→入力ページ ・complete.html→送信完了ページ ・images→画像フォルダ ・liff-starter.js→LIFFを動かすプログラム（削除禁止） 編集にはindex.html、complete.html、imagesを使用します。 ■index.htmlについて ・入力フォームを設置するファイル ・<!-- 削除禁止 -->となっている部分はLIFFを動かすプログラムになるので削除しないでください。 ・質問の作り方 1つの質問に対して、inputのname属性「col_1_title」と「col_1」をセットでおきます。 数字は順番に読み込まれるので、連番にする必要があります。詳細はこちら＞
送信ボタンを押すと入力データが送信され、送信完了ページに遷移します。
■complete.htmlについて
・送信後の完了ページ
・送信後のメッセージを設定
・「閉じる」ボタンをクリックするとLIFFが閉じます。
■ファイルのアップロード
完成したファイルを圧縮し、ECAIにアップロードします。
フォームの圧縮方法について＞
オリジナルフォーム（LIFF）のアップロード方法＞
オリジナルフォームのテスト送信方法＞
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。LIFF設定で外部サイトの埋め込みを使うメリット
LIFF設定にて外部サイトの埋め込みを使うメリットは2つあります。
① 画面表示を3段階（全画面、8割、5割）に分けられる。 ② どんな外部サイトでもLINEブラウザで表示できる。 （端末によってsafari、Cromeなどブラウザを分けたくない場合に有効）