■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
フォームサンプルページの質問６が「2カラム・チェックボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする
②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「trigger」としてます。）
③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル
④質問ナンバーを指定
⑤質問テキストを指定
⑥class「col2」で2カラムを指定（※name属性のcolとは別物です）
⑦選択支を増やすときは<li></li>までをコピペで追加して増やす
⑧選択支内容を指定、type属性は「checkbox」設定、value属性は送信内容を指定
※name属性は前の質問から連番になるようにし、複数回答を取得できるように[]指定
※ data-prompt-position="topLeft"はバリデーションの表示位置を指定
⑨選択支の表示テキストを指定
【オリジナルフォーム】各質問ごとにタグを付与する方法
■目的 各質問ごとにタグを付与する方法の説明です。 タグ付与したい質問が複数あるときに有効です。 タグ付与したい質問が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を別途ご登録頂いてテスト送信を行ってください。
（1）コンテンツ>LIFF ページに移動
↓ （2） 「作成」ボタンをクリック
↓
（3）テスト用のLIFFを作成する
LIFF管理名には「テスト」などわかりやすくする
※解約・休止・サイクル変更に関わるフォームの場合は、「解約」「休止」「サイクル変更」の文字列をLIFF管理名に必ず入れて登録してください。
※解約・休止・サイクル変更に関わるフォーム以外の場合は、「解約」「休止」「サイクル変更」の文字列を含まないよう設定してください。
画面サイズを選択（特に指定のない場合は「Full」を選択）
オリジナルフォームにチェック、「保存する」をクリック
↓ （4） 作成したフォームの右側「フォーム編集」をクリック
↓ （5）「参照」ボタンをクリックしてテスト送信したいフォームデータを選択、「保存する」をクリック
フォームデータのダウンロード方法は下記を参照ください。 ＞既存のオリジナルフォーム（LIFF）のダウンロード方法
↓ （6） ⑪プレビュー、⑫設問内容をご確認できます。
※【解約・休止・サイクル変更・スキップ】申請フォームの場合、ASSダッシュボードに「お客様申請」と「テスト申請」が混在する形となる為、「名前○○の申請は処理しない」など社内ルールの周知をしていただけたらと思います。 テスト送信につきましては下記を参照ください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 フォームアップロード後のチェック項目につきましては下記を参照ください。 ＞【簡易版】フォームアップロード後のチェック項目オリジナルフォームの回答ごとに点数を付けする機能はありますか？
オリジナルフォームのHTML設定次第で回答ごと点数付けをし、さらに合計点数によってタグを出し分けすることが可能です。（回答後のメッセージ出し分けも可能）
HTMLの作成になりますのでお客様の方でお調べいただき作成をお願いします。
弊社にて有料で作成することが可能ですので、希望の際はサポート宛にお見積り依頼のご連絡をお願いします。
送信完了ページの編集が必要になります。 対象のフォームをダウンロードし、作業を進めて下さい。 既存のオリジナルフォーム（LIFF）のダウンロード方法はこちら＞ (1)complete.htmlのhead内に下記を追加 URL部分(https://www.sample.com)はリダイレクトさせたいものに変更して下さい。
<script>
document.location = "https://www.sample.com";
</script>
(2)コンテンツ部分をコメントアウト、もしくは削除して表示されないようにする
(3)編集が終わりましたらアップロードする オリジナルフォーム（LIFF）のアップロード方法はこちら＞オリジナルフォーム（LIFF）の最大数
オリジナルフォーム（LIFF）の発行最大数は1LINEログインチャネルで30件までとなります。
30件を超えた場合はLIFFの登録ができなくなります。（使用しなくなったLIFFを削除することで追加できるようになります）
短縮URL機能を使用して、オリジナルフォーム（LIFF）のPV（クリック数）を計測できます。 （１）LIFF呼び出しURLをコピーする
↓ （２）リッチメニューなどオリジナルフォームにリンクする部分で短縮URLを設定する ※今回は解約・休止フォームを例に挙げておりますが、その他のフォームでも設定可能です
↓ （３）短縮URLの作成 ①作成と編集のタブを選択 ②管理名 ③（１）でコピーしたLIFF呼び出しURLを張り付け ④必要がない場合はチェックを外す ※解約・休止フォームの場合は通常ログインしている状態となります。 ⑤チェックする ⑥挿入（保存） ※すでに作成済みの場合は作成履歴より挿入して下さい。
↓ （４）短縮URLが挿入されていることを確認し保存
↓ （５）計測結果を見る 分析 ＞ 短縮URL 設定した短縮URLのクリック数（＝PV）を確認できます
↓ （６）オリジナルフォームの離脱率を算出する 申請数 ÷ PV × 100 ＝ 離脱率 対応フォーム、計測期間を合わせて、対応完了した申請数を上記式に当てはめてください。
■目的 オリジナルフォームの入力チェックの設定についての説明 ■セット所要時間 10分 ■セットの流れ 下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
(1)必要ファイルは４つ 下記４ファイルを<head>内で読み込んでください。 （※ECAIのテンプレートを使用している場合、すでに設置されています。） ・jquery本体 ・validationEngine.css ・validationEngine.js ・日本語化ファイル
（２）回答のclassに”validate[required]”を指定
※data-prompt-positionでアラート表示の位置を調整できます。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。申請種別の質問をフォーム内に2回以上使用する場合
申請種別（col_1）はフォーム内に１つのみ設定できるというルールがあります。 そのため申請種別の質問を複数設置する場合は、最終回答が「col_1」に格納される必要があります。 col(name属性)の記載ルールは下記参照 ⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール 下記フォームサンプルページを元に説明します。 ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード(16) ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （1）申請種別にあたる「col_1_title」,「col_1」をtype="hidden"にて設置
↓ （2）col_1に格納するための呼び出し関数をJavascriptで設定
↓ （3）１つ目の申請種別に関する質問 ①col_6以降の任意の順番で設定 ②SetAppType();を呼び出して、選択内容をcol_1に格納する
↓ （4）2つ目の申請種別に関する質問 ①col_6以降の任意の順番で設定 ②SetAppType();を呼び出して、選択内容をcol_1に格納する（上書きされます）
画面操作途中におけるタグ付与設定が必要になります。 オリジナルフォームのHTMLファイル編集が必要となりますので、対象ファイルをダウンロードします。 HTMLファイルのダウンロード方法につきましては下記をご参照ください。 > 既存のオリジナルフォーム（LIFF）のダウンロード方法 下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。 > フォームサンプルページ DL：フォームサンプルページ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U ダウンロードが終わりましたらファイルを解凍し、index.htmlをご使用のテキストエディターで開きます。 設定方法としては、 Javascriptのコードにおいて予め「AddTag」をcallしてタグをセットした上で、「AddTagProc」をcallしてください。 例：AddTag("drGCNjCUEg0"); 例：AddTagProc(); 【設定方法の詳細】 （1）付与されるタグは「id="addtag"」に格納します。 ※サンプルフォームに関しては表示バナー部分のHTMLに記述しています。
↓
（2）バナー表示の際に、付与したいタグを記述した「AddTag("タグコード")」をcallする。
（バナー表示例）
↓ （3）サンクスバナー表示の際に「AddTagProc」をcallする。 ※サンプルフォームに関しては「1000円割引」を押下するとサンクスバナーが表示されます。
（サンクスバナー表示例）
↓ （4）LIFFを閉じる場合、Javascriptのコードにおいて「liffclose」をcallしてください。
↓ （5）「AddTag()」「AddTagProc()」「liffclose()」関数についてはbody終了タグ上部にまとめて記述しておく 記述後ファイルの上書きを忘れずにしてください。
記述が終わりましたら、「オリジナルフォーム（LIFF）のアップロード方法」の手順に沿ってファイルをアップロードする。 付与したタグの動作確認方法は下記をご参照ください。 > 付与したタグの動作確認方法フォーム立ち上げ時ポップアップ設置方法
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページを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フォルダに格納
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に設置
問題なく設置できると、⑥で指定したメールアドレスに通知が飛ぶようになります。 連続で送信された場合、グーグルのサーバーの状況によりメール通知が行われないことがあります。【オリジナルフォーム】チェックボックスの作り方
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
フォームサンプルページの質問３が「チェックボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①ECAI側で表示されるタイトルを「value」に設定（フォームには表示されません） ②質問番号を指定 ③質問テキストを指定 ④name属性は前の質問から連番になるようにし、複数回答を取得できるように[]指定 ⑤value属性は送信内容を指定（⑤⑥は同じだとわかりやすい） ⑥選択支の表示テキストを指定 選択支を増やすときは<li></li>までをコピペで追加して増やす
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。新機能#60┃オリジナルフォームに回答があったことをメールに通知させることが可能になりました！
—メール通知—
■目的
オリジナルフォームの回答をメールに通知させることで、オリジナルフォームの回答をしたことをいち早く知ることができるので、お客様対応の品質向上に繋げることが可能です。
■セット所要時間
5分
■セットの流れ
①オペレーター設定でメールアドレスを設定
┗設定したメールアドレスにメール送信をします
┗オペレーター設定方法はこちら＞
↓
②オペレーター設定で「オリジナルフォーム送信の通知」を有効にする
↓
➂オリジナルフォームにチェックが入っていることを確認する。
※「オリジナルフォーム」を選択されている場合のみLINE・メール通知が利用可能
↓
④「コンテンツ>LIFF>設定」で申込み通知「あり」を選択し、「メール」にチェックを入れ保存。
↓
⑤通知設定したLIFFの呼び出しURLからオリジナルフォーム回答をして、設定したメールアドレスに通知が届くかテストしてからご使用ください。
回答内容によって、次の表示内容を出し分けます。 下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページを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
フォームサンプルページの質問5が「セレクトボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする ②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「age」としてます。） ③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル ④質問ナンバーを指定 ⑤質問テキストを指定 ⑥class「select」を指定する ⑦selectタグを指定、name属性は前の質問から連番になるように指定 ※ data-prompt-position="topLeft"はバリデーションの表示位置を指定 ⑧初期表示、valueは空を指定 ⑨optionタグで選択内容を指定新機能#07┃【高速PDCAを実現】お客様ご自身でフォームの編集、変更が可能になりました！！！
遂に！！！
お客様ご自身で、オリジナルフォームの作成、解約フォームの編集ができるようになりました！！！
今まで小さな修正でもわざわざ弊社にご連絡いただいていた手間がすべてなくなります！
(テキストを赤にするだけ、太字にするだけでお時間いただいてしまい大変失礼いたしました・・・。)
これにより、
・ポップアップバナーを変更したい。
・休止ではなくてスキップにしたい。
・休止にデフォルトチェックを付けたい。
・商品を追加したい。
など
全て自分たちのタイミングで変更が可能です。
オリジナルフォームの作成・編集は、「ホーム>コンテンツ>LIFF」から可能です。
各種設定は下記をご確認ください！
オリジナルフォーム（LIFF）の作成>
解約理由の内容によって、上記のような継続を促すバナーを出し分ける方法のガイドです。 継続を促すタイミングにつきましては任意となりますが、サンプル例では解約理由の選択時にバナーが表示される仕様になります。 下記のサンプルページをご確認ください。 （※バナー表示条件：質問3 効果を実感できなかった or 価格が高い or 商品が余っている 選択） 下記フォームサンプルページを元に説明します。 ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード(20) ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ※継続バナーの設置がない場合は、先に下記ガイドより設置してください。 ＞【フォーム】継続促進バナーの設置方法 ■対象ファイル：dispaly.js ①質問３の解約理由によって、imgタグのsrc属性を動的に変更する
②「効果を実感できなかった」選択時の表示画像を設定する ③「価格が高い」選択時の表示画像を設定する ④「商品が余っている」選択時の表示画像を設定する
オリジナルフォームのURLを短縮URLにすることで、表示期間設定が可能です。
▼手順
①短縮URLにする際に、オリジナルURLにLIFFの「呼び出しURL」を設定
↓
②リンクに有効期限を設定するにチェックし、有効期限（日時）を設定する
短縮URLの新規作成方法はこちら＞
■目的 商品選択ごとにバナーを出し分ける設定 ■セット所有時間 30分 下記フォームサンプルページを元に説明します。 サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■セットの流れ 編集ファイル：display.js サンプルページを例に説明をしていきます。 仕様は商品１を選択時はバナーを表示させ、商品２を選択時はバナーを表示させません。 質問３を選択時にどちらの商品が選ばれているかの分岐処理をいれて、バナーの表示を調整します。 66～116行目
if($('.item :radio:eq(0)').prop('checked')){
//商品1選択の処理
}
else {
//商品2選択の処理
}注意点としては、質問３でバナーを表示後に、質問１の商品選択に戻ったときにバナー以降を非表示にする処理を忘れずに入れてください。 これをしないとバナーの表示が残ってします場合があります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。オリジナルフォーム(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にする
問題なく設置できると、②で指定したメールアドレスに通知が飛ぶようになります。 連続で送信された場合、グーグルのサーバーの状況によりメール通知が行われないことがあります。【オリジナルフォーム】商品選択の作成、追加
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページを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
【編集ファイル】 index.html ①スクロールしたい場所にid属性でアンカーを設定する
②スムーズスクロールの処理をjavascriptで設定
③スクロールしたいタイミングで②で設定したスクロール処理を呼び出す 引数には①のid属性を設定する
フォームの申請内容がECAIに届かない。という事象の際は下記をご確認ください。
①実機（スマートフォン）で行う ②LINEアプリ内で申請する ③LINEアプリ内で申請する際は対象フォームの「LIFF呼び出しURL」を使用する （※表示確認URLとは異なります）
（1）サイドメニュー「会員」 ＞ 「会員リスト」 ＞ 対象会員「詳細」
↓ （2）LIFFコンテンツ内から、対象の送信内容の「詳細」
↓ （3）取得した内容を確認できます
こちらは解約・休止・サイクル変更・スキップエントリーフォームについてのガイドとなります。 アップロード方法につきましては下記を参照ください。 ＞オリジナルフォーム（LIFF）のアップロード方法 アップロード後、テスト送信を行ってください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 下記３つのチェック項目を確認し、問題なく設定がされているかご確認ください。 【チェック項目】 ①フォーム内の質問と設定col(name属性)は正しく設定されているか ＞フォーム内質問と設定col(name属性)の確認方法 ※修正が必要な場合は下記ガイドの記載ルールに沿って設定されているかご確認ください。 ＞解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール ②フォーム送信後の申請項目、回答項目は正しく表示されているか ＞オリジナルフォームで取得した情報を受信BOXで確認する ※【解約・休止・サイクル変更・スキップ】エントリーフォームでの申請の場合はASSダッシュボードにも申請内容が表示されます。
③タグは想定通りついているか ＞付与したタグの動作確認方法オリジナルフォーム送信後、送信内容をメッセージでリマインド配信したい
■目的 オリジナルフォーム送信後、送信内容をメッセージでリマインド配信することができます。 ■セット所要時間 1分 ■セットの流れ （１）コンテンツ ＞ LIFF ＞ 設定 対象のオリジナルフォームの設定をひらく
↓ （２）「送信内容をメッセージで送る」にチェックを入れて保存
↓ （３）送信テスト LIFF-URLから送信テストを行い、メッセージで送信内容が送られてくれば設定完了です。 オリジナルフォームのテスト送信方法＞
回答内容がすべて配信されるため、設定する前に必ず配信される回答内容を確認してください。 質問で分岐がされている場合、ユーザーの操作によっては内容が重複して送信されることがあります。 そのような場合はオリジナルフォームを修正することで重複を防ぐことができます。
↓ （４）メッセージも同時に送りたい場合 フォーム送信時にタグ付与を行い、タグトリガーステップメッセージを設定してください。 オリジナルフォームで、送信ボタンを押したらタグを付与する方法＞ 「タグトリガーステップメッセージ」の作成方法＞スケルトン状態からオリジナルフォームを作成する方法
■目的 テンプレートを使用せず、オリジナルフォームを作成する方法 ■セット所要時間 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）のアップロード方法 アップロード後、テスト送信を行ってください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 下記3つのチェック項目を確認し、問題なく設定がされているかご確認ください。 【チェック項目】 ①フォーム内の質問と設定col(name属性)は正しく設定されているか ＞確認方法はこちら ②フォーム送信後の申請項目、回答項目は正しく表示されているか ＞確認方法はこちら ③タグは想定通りついているか ＞確認方法はこちら
フォームの内容を大幅に変更された場合は、下記「詳細版」をご確認ください。 ＞【詳細版】フォームアップロード後のチェック項目広告のCV計測をオリジナルフォーム（LIFF）に使用する方法
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が計測できていれば完成です
