オリジナルフォームのHTML設定次第で回答ごと点数付けをし、さらに合計点数によってタグを出し分けすることが可能です。（回答後のメッセージ出し分けも可能）
HTMLの作成になりますのでお客様の方でお調べいただき作成をお願いします。
弊社にて有料で作成することが可能ですので、希望の際はサポート宛にお見積り依頼のご連絡をお願いします。
短縮URL機能を使用して、オリジナルフォーム（LIFF）のPV（クリック数）を計測できます。 （１）LIFF呼び出しURLをコピーする
↓ （２）リッチメニューなどオリジナルフォームにリンクする部分で短縮URLを設定する ※今回は解約・休止フォームを例に挙げておりますが、その他のフォームでも設定可能です
↓ （３）短縮URLの作成 ①作成と編集のタブを選択 ②管理名 ③（１）でコピーしたLIFF呼び出しURLを張り付け ④必要がない場合はチェックを外す ※解約・休止フォームの場合は通常ログインしている状態となります。 ⑤チェックする ⑥挿入（保存） ※すでに作成済みの場合は作成履歴より挿入して下さい。
↓ （４）短縮URLが挿入されていることを確認し保存
↓ （５）計測結果を見る 分析 ＞ 短縮URL 設定した短縮URLのクリック数（＝PV）を確認できます
↓ （６）オリジナルフォームの離脱率を算出する 申請数 ÷ PV × 100 ＝ 離脱率 対応フォーム、計測期間を合わせて、対応完了した申請数を上記式に当てはめてください。
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページを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.テスト申請（送信）は「対応不要」にて処理
↓ 2.3BO ＞ 完了したASS申請
↓ 3.条件で絞り込み
↓ 4.ステータスで「対応不要」以外にチェックを入れて絞り込み
■目的 各質問ごとにタグを付与する方法の説明です。 タグ付与したい質問が複数あるときに有効です。 タグ付与したい質問が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ダッシュボードに「お客様申請」と「テスト申請」が混在する形となる為、「名前○○の申請は処理しない」など社内ルールの周知をしていただけたらと思います。 テスト送信につきましては下記を参照ください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 フォームアップロード後のチェック項目につきましては下記を参照ください。 ＞【簡易版】フォームアップロード後のチェック項目【オリジナルフォーム】入力チェックの設定について
■目的 オリジナルフォームの入力チェックの設定についての説明 ■セット所要時間 10分 ■セットの流れ 下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
(1)必要ファイルは４つ 下記４ファイルを<head>内で読み込んでください。 （※ECAIのテンプレートを使用している場合、すでに設置されています。） ・jquery本体 ・validationEngine.css ・validationEngine.js ・日本語化ファイル
（２）回答のclassに”validate[required]”を指定
※data-prompt-positionでアラート表示の位置を調整できます。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【オリジナルフォーム】テキストにリンク設定する方法
■目的 フォーム内の任意の場所にリンクを挿入したいときに使用します。 ■セット所要時間 10分 フォームの編集方法についてはこちら＞ ■セットの流れ フォームの任意のテキスト部分を下記aタグを設置することでリンクを設置することができます。
<a href="リンク先URL" target="_blank">表示させたいテキスト</a>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせ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）のアップロード方法」の手順に沿ってファイルをアップロードする。 付与したタグの動作確認方法は下記をご参照ください。 > 付与したタグの動作確認方法セレクトボックスの選択ごとにタグを付与する方法
セレクトボックスの場合は<option>タグに直接クリックイベントを指定できないため、switch文を回してタグ付与を行ってください。 サンプルコード フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U (1)対象のセレクトボックスに下記イベントを設定
onchange="selectboxChange(this.selectedIndex);"
↓ (2)switch文の中にそれぞれタグをセットする ①それぞれの選択肢にあったタグをセットする ②選択されたタグを送信用に格納する
<script>
function selectboxChange(selindex) {
switch (selindex) {
case 1:
selectTags('タグコード1');//A型
break;
case 2:
selectTags('タグコード2');//B型
break;
case 3:
selectTags('タグコード3');//O型
break;
case 4:
selectTags('タグコード4');//AB型
break;
case 5:
selectTags('タグコード5');//その他
break;
}
}
function selectTags(TagCode){
$("#add_tags").val(TagCode);
}
</script>※複数イベントを設定したい場合はイベント名を別名にして設定して下さい。 （例）
onchange="selectboxChange02(this.selectedIndex);"
function selectboxChange02(selindex) {ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。機能改善＃066┃オリジナルフォーム（LIFF）の回答をCSVダウンロードした際に最後列に広告コードが反映されるようになりました！
■目的
「広告コード」があることにより、オリジナルフォームを使用したアンケートの回答を分析する際に「広告コード」ごとにアンケート回答の品質判断が可能となります！
オリジナルフォーム（LIFF）のCSVダウンロード方法はこちら＞
■セット所要時間
無し
■表示
フォームによって回答数が異なるため最後列が変わってきます。（写真のようにQ列とは限りません）
【オリジナルフォーム】チェックボックスの作り方■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
フォームサンプルページの質問３が「チェックボックスタイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①ECAI側で表示されるタイトルを「value」に設定（フォームには表示されません） ②質問番号を指定 ③質問テキストを指定 ④name属性は前の質問から連番になるようにし、複数回答を取得できるように[]指定 ⑤value属性は送信内容を指定（⑤⑥は同じだとわかりやすい） ⑥選択支の表示テキストを指定 選択支を増やすときは<li></li>までをコピペで追加して増やす
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。オリジナルフォーム(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に設置
問題なく設置できると、⑥で指定したメールアドレスに通知が飛ぶようになります。 連続で送信された場合、グーグルのサーバーの状況によりメール通知が行われないことがあります。LIFF（オリジナルフォーム）のURLを表示する期間を設ける方法
オリジナルフォームのURLを短縮URLにすることで、表示期間設定が可能です。
▼手順
①短縮URLにする際に、オリジナルURLにLIFFの「呼び出しURL」を設定
↓
②リンクに有効期限を設定するにチェックし、有効期限（日時）を設定する
短縮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"までスクロールする解約・休止・サイクル変更フォームにおいてのcol（name属性）と管理画面に反映される表示の仕様について
解約・休止・サイクル変更フォームにおいて設定されたcol（name属性）と、管理画面への表示順の仕様について説明になります。
フォーム内への記載のルールにつきましては下記ガイドを参照ください。
解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール＞
■設定できるcol（name属性）の種類
①共通用（固定）
┗申請種別用（解約、休止、サイクル変更）：col_1
┗休止期間用：col_2
┗サイクル変更期間用：col_3
┗商品用：col_4
┗顧客満足度用：col_5
※col_1 ～ col_5は固定の用途となります。
②共通用：col_6 ～ col_50
③解約申請用：cancell_col_6 ～ cancell_col_50
④休止申請用：pause_col_6 ～ pause_col_50
⑤サイクル変更申請用：cycle_col_6 ～ cycle_col_50
※cancell_col_1～cancell_col_5、cycle_col_1～cycle_col_5、pause_col_1～pause_col_5は利用出来ません。
■管理画面に反映される表示の仕様
・申請種別（解約、休止、サイクル変更：col_1）ごとに回答が取り込まれます。
┗「解約」の場合：①共通用（固定）、②共通用：col_6 ～ col_50、③解約申請用：cancell_col_6 ～ cancell_col_50
┗「休止」の場合：①共通用（固定）、②共通用：col_6 ～ col_50、④休止申請用：pause_col_6 ～ pause_col_50
┗「サイクル変更」の場合：①共通用（固定）、②共通用：col_6 ～ col_50、⑤サイクル変更申請用：cycle_col_6 ～ cycle_col_50
┗「上記以外」の場合：①共通用（固定）、②共通用：col_6 ～ col_50
・設定できるのは最大でcol_50までとなります。
・同じcol（name属性）を二重に設定されていると、後に設定されているcolで上書きされ、一部受信が出来なくなります。
・商品用（col_4）は必須項目となり、設定しないと管理画面にすべて反映されません。
・表示は番号の若い順に表示されます。
（解約申請の例）
col_1
col_4
col_5
col_6
cancell_col_6
col_7
cancell_col_7
（休止申請の例）
col_1
col_2
col_4
col_5
col_6
pause_col_6
col_7
pause_col_7
友だち登録されていないユーザーがオリジナルフォームのLIFF呼び出しURLから申請をすると、LINE名が反映されない状態になります。 友だち登録をしてから、オリジナルフォームの申請を行ってください。 友だち追加URLの確認方法はこちら＞
上記で解決しない場合は、対象のオリジナルフォーム（LIFF）の複製を作成いただき、そちらを改めて本番環境に使用するようにお願いします。 オリジナルフォーム（LIFF）を複製する方法＞【フォーム】セレクトボックスの作り方
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページを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タグで選択内容を指定お客様チェックシート┃フォームのアップロードができない
「フォームがうまくアップロードできない」場合は下記をご確認ください。 ①対象BOTを選択してください。 ②ファイルは圧縮して、ZIPファイルにしてください。 index.htmlが存在する階層を全選択して圧縮する必要があります。 ⇒フォームの圧縮方法について ③アップロードするZIPファイルは20MB以下にしてください。 ④ZIPファイルの構造はルートフォルダ（一番上）の配下にindex.htmlがある状態にしてください。 ⇒ZIPファイルの構造説明 ⑤ファイル内に文字化けがないかご確認ください。 アップロード方法につきましては下記を参照ください。 ⇒オリジナルフォーム（LIFF）のアップロード方法【フォーム】解約理由ごとにバナーを出し分ける
解約理由の内容によって、上記のような継続を促すバナーを出し分ける方法のガイドです。 継続を促すタイミングにつきましては任意となりますが、サンプル例では解約理由の選択時にバナーが表示される仕様になります。 下記のサンプルページをご確認ください。 （※バナー表示条件：質問3 効果を実感できなかった or 価格が高い or 商品が余っている 選択） 下記フォームサンプルページを元に説明します。 ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード(20) ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ※継続バナーの設置がない場合は、先に下記ガイドより設置してください。 ＞【フォーム】継続促進バナーの設置方法 ■対象ファイル：dispaly.js ①質問３の解約理由によって、imgタグのsrc属性を動的に変更する
②「効果を実感できなかった」選択時の表示画像を設定する ③「価格が高い」選択時の表示画像を設定する ④「商品が余っている」選択時の表示画像を設定する
遂に！！！
お客様ご自身で、オリジナルフォームの作成、解約フォームの編集ができるようになりました！！！
今まで小さな修正でもわざわざ弊社にご連絡いただいていた手間がすべてなくなります！
(テキストを赤にするだけ、太字にするだけでお時間いただいてしまい大変失礼いたしました・・・。)
これにより、
・ポップアップバナーを変更したい。
・休止ではなくてスキップにしたい。
・休止にデフォルトチェックを付けたい。
・商品を追加したい。
など
全て自分たちのタイミングで変更が可能です。
オリジナルフォームの作成・編集は、「ホーム>コンテンツ>LIFF」から可能です。
各種設定は下記をご確認ください！
オリジナルフォーム（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が計測できていれば完成です
■目的 商品選択ごとにバナーを出し分ける設定 ■セット所有時間 30分 下記フォームサンプルページを元に説明します。 サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■セットの流れ 編集ファイル：display.js サンプルページを例に説明をしていきます。 仕様は商品１を選択時はバナーを表示させ、商品２を選択時はバナーを表示させません。 質問３を選択時にどちらの商品が選ばれているかの分岐処理をいれて、バナーの表示を調整します。 66～116行目
if($('.item :radio:eq(0)').prop('checked')){
//商品1選択の処理
}
else {
//商品2選択の処理
}注意点としては、質問３でバナーを表示後に、質問１の商品選択に戻ったときにバナー以降を非表示にする処理を忘れずに入れてください。 これをしないとバナーの表示が残ってします場合があります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。スケルトン状態からオリジナルフォームを作成する方法
■目的 テンプレートを使用せず、オリジナルフォームを作成する方法 ■セット所要時間 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、チャットワークよりご依頼をお願いします。オリジナルフォーム送信後、送信内容をメッセージでリマインド配信したい
■目的 オリジナルフォーム送信後、送信内容をメッセージでリマインド配信することができます。 ■セット所要時間 1分 ■セットの流れ （１）コンテンツ ＞ LIFF ＞ 設定 対象のオリジナルフォームの設定をひらく
↓ （２）「送信内容をメッセージで送る」にチェックを入れて保存
↓ （３）送信テスト LIFF-URLから送信テストを行い、メッセージで送信内容が送られてくれば設定完了です。 オリジナルフォームのテスト送信方法＞
回答内容がすべて配信されるため、設定する前に必ず配信される回答内容を確認してください。 質問で分岐がされている場合、ユーザーの操作によっては内容が重複して送信されることがあります。 そのような場合はオリジナルフォームを修正することで重複を防ぐことができます。
↓ （４）メッセージも同時に送りたい場合 フォーム送信時にタグ付与を行い、タグトリガーステップメッセージを設定してください。 オリジナルフォームで、送信ボタンを押したらタグを付与する方法＞ 「タグトリガーステップメッセージ」の作成方法＞オリジナルフォーム(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にする
問題なく設置できると、②で指定したメールアドレスに通知が飛ぶようになります。 連続で送信された場合、グーグルのサーバーの状況によりメール通知が行われないことがあります。オリジナルフォームで取得した内容を会員情報から確認する
（1）サイドメニュー「会員」 ＞ 「会員リスト」 ＞ 対象会員「詳細」
↓ （2）LIFFコンテンツ内から、対象の送信内容の「詳細」
↓ （3）取得した内容を確認できます
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
■目的 商品選択の設問作成、追加 ■セット所有時間 １０分 ■セットの流れ サンプルフォームの93～138行目が商品選択部分になります。
①解約休止フォームにおいて、商品選択に関する設問のname属性は「col_4_title」「col_4」の固定で指定 ②質問内容のテキストはこちらを編集 ③商品画像はこちらに画像パスを設定 ④商品名はこちらで設定 ⑤商品項目を増やしたい場合は<li>～</li>までを複製し、内容を適宜ご変更ください。【詳細版】フォームアップロード後のチェック項目
こちらは解約・休止・サイクル変更・スキップエントリーフォームについてのガイドとなります。 アップロード方法につきましては下記を参照ください。 ＞オリジナルフォーム（LIFF）のアップロード方法 アップロード後、テスト送信を行ってください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 下記３つのチェック項目を確認し、問題なく設定がされているかご確認ください。 【チェック項目】 ①フォーム内の質問と設定col(name属性)は正しく設定されているか ＞フォーム内質問と設定col(name属性)の確認方法 ※修正が必要な場合は下記ガイドの記載ルールに沿って設定されているかご確認ください。 ＞解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール ②フォーム送信後の申請項目、回答項目は正しく表示されているか ＞オリジナルフォームで取得した情報を受信BOXで確認する ※【解約・休止・サイクル変更・スキップ】エントリーフォームでの申請の場合はASSダッシュボードにも申請内容が表示されます。
③タグは想定通りついているか ＞付与したタグの動作確認方法