フォームファイル内にあるindex.html（入力ページ）の詳細説明です。 ソースコード内にコメントアウトで説明の記載があります。 下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ＞フォームサンプルダウンロード解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール
下記フォームサンプルページのソースコードと併せてご確認ください。
フォームサンプルページ
https://help.ecai.jp/form/demo01/
※ソースコード確認方法
windows：Ctrl + U
mac：option + command + U
1-1 必須コードにおいて、「###cancellationurl###」を指定した場合に限りこのルールが有効となります。
1-2 各質問のname属性に起きまして、タイトル（送信内容のタイトル）と回答は必ずセットで設定する必要があります。
1-3 タイトルは必ずtype=”hidden”で設定する必要があります。
※タイトルの動的生成の禁止
ECAIではフォームの申請を受信した際に一つ前に申請された際の質問項目と照合を行い、変更の可否によってバージョン管理を行っております。
その為、バージョンを意図して変更しないように禁止とさせて頂いております。
1-4 checkbox及びradioタイプの回答において「value」属性は選択に利用している表示文字列を指定してください。指定文字列が回答結果としてそのまま取り込まれます。
（表示例）
1-5 質問項目は解約・休止・サイクル変更の申請種別ごとに最大45問となります。それ以上の質問項目は受け付けられません。
1-6 col_1_title ～ col_5_title及びcol_1 ～ col_5は下記の指定通りの設定をしてください。指定数字を変更すると正しく受け付けられなくなります。
1-7 共通項目：col_1_title ～ col_5_title及びcol_1 ～ col_5
※「name」属性の指定が正しければ、フォーム内の表示順は順不同で問題ありません
col_1_title：申請の種別に関する回答を指定します。
「value」属性に「解約」「サイクル変更」「休止」「スキップ」のいずれかを指定してください。
それ以外は完了ページで受付致しません。
col_2_title：休止期間に関する回答を指定します。
「value」属性に「10日」「20日」「30日」等の文字列を指定してください。
文字列は期間に相当する文字を入れ、指定の文言である必要はありません。
col_3_title：サイクル変更期間に関する回答を指定します。
「value」属性に「60日」「90日」「180日」等の文字列を入れてください。
文字列は期間に相当する文字を入れ、指定の文言である必要はありません。
※サイクル変更期間に関してはサンプルページに設定はございません。
col_4_title：選択する商品に関する回答を指定します。
「value」属性に商品名の文字列を指定してください。
col_5_title：顧客満足度に関する回答を指定します。
「value」属性は数字で設定してください。
1-8 col_6以降の数字については下記の通り、申請種別ごとに回答が設定可能となります。
〈申請種別〉
解約申請用：cancell_col_6 ～ cancell_col_50
サイクル変更用：cycle_col_6 ～ cycle_col_50
休止申請用：pause_col_6 ～ pause_col_50
※申請種別ごとに回答が取り込まれます。
※cancell_col_1～cancell_col_5、cycle_col_1～cycle_col_5、pause_col_1～pause_col_5は利用出来ません。
※設定できるのは最大でcol_50までとなります。
※二重に定義されていると、後に定義されているcolで上書きされ、一部受信が出来なくなります。
※管理画面の表示は番号の若い順に表示されます。詳細のルールはこちら＞
（記述例）
※「name」属性の数字（cancell_col_6など）は質問の並び順に合わせてください。
数字の順番に取り込まれる回答が取り込まれます。
1-9 申請種別にかかわらず、共通項目として回答を取得したい場合は、name属性に「cancell_」「cycle_」「pause_」を指定せず設定してください。 この場合の回答は、すべて受信BOXに送信されます。 例）col_6_title col_6 ※col_1_title ～ col_5_title 及び col_1 ～ col_5 は固定で使用しているため利用できません。 ※設定できるのは最大でcol_50までとなります。 ※管理画面の表示は番号の若い順に表示されます。詳細のルールはこちら＞
【注意点】 本人確認フォームと併用はできません。 理由としてはフォームの種別が異なるためです。 本人確認フォームを使用する場合は、フォームを2つに分けて運用をお願いします。 なお本人確認の内容にかかわらない情報取得の場合は、併用可となります。 本人確認フォームについてはこちら＞【オリジナルフォーム】表示・非表示の出し分け設定
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【使用ファイル】 (A) index.html (B) css/style.css
(パターン１)設問の選択で、次の設問を表示する
(B) css/style.css 初期表示で非表示にしたい設問はcssで非表示にしておく 初期表示したい設問は表示にしておく
(A) index.html changeイベントを使用して、選択時に次の設問を表示させる
(パターン２)設問の選択内容によって、表示を出し分ける
(A) index.html changeイベントとif文を使用して、選択ごとに次の設問を出し分ける
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
(パターン１) 2カラム・ラジオボタン
■見本
フォームサンプルページの質問４が「2カラム・ラジオボタン」タイプになりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする ②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「gender」としてます。） ③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル ④質問ナンバーを指定 ⑤質問テキストを指定 ⑥選択支を増やすときは<li></li>までをコピペで増やす ⑦選択支内容を指定、type属性は「radio」設定、name属性は前の質問から連番になるように指定、value属性は送信内容を指定 ※ data-prompt-position="topLeft"はバリデーションの表示位置を指定 ⑧選択支の表示テキストを指定 ⑨class「col2」で2カラムを指定（※name属性のcolとは別物です）
(パターン2) 3カラム・ラジオボタン
■見本
フォームサンプルページの質問2が「3カラム・ラジオボタン」タイプになりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする ②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「app_type」としてます。） ③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル ④質問ナンバーを指定 ⑤質問テキストを指定 ⑥class「col3」で3カラムを指定（※name属性のcolとは別物です） ⑦選択支を増やすときは<li></li>までをコピペで増やす ⑧選択支内容を指定、type属性は「radio」設定、name属性は前の質問から連番になるように指定、value属性は送信内容を指定 ※ data-prompt-position="topLeft"はバリデーションの表示位置を指定 ⑨選択支の表示テキストを指定
(パターン3) 2カラム・ラジオボタン画像タイプ
■見本
フォームサンプルページの質問1が「2カラム・ラジオボタン画像タイプ」になりますので、こちらをサンプルコードよりコピペしてご使用ください。
①の<section></section>部分をコピペする ②classは「q」を指定で初期非表示、その他必要に応じてclassを設定（サンプルでは「item」としてます。） ③送信用タイトル、type属性は「hidden」設定、name属性は前の質問から連番になるように指定、value属性は管理画面に出力されるタイトル ④質問ナンバーを指定 ⑤質問テキストを指定 ⑥class「col2」で2カラムを指定（※name属性のcolとは別物です） ⑦選択支を増やすときは<li></li>までをコピペで増やす ⑧選択支内容を指定、type属性は「radio」設定、name属性は前の質問から連番になるように指定、value属性は送信内容を指定 ※ data-prompt-position="topLeft"はバリデーションの表示位置を指定 ⑨選択肢の画像を指定 ⑩選択支の表示テキストを指定【フォーム】すべての入力が完了したらイベントを発生させる方法
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【編集ファイル】 index.html ①質問1が全部入力されると質問2が表示される
②htmlコード
③JS処理部分（質問1が全部入力されると質問2が表示される）
LIFFの外部サイト機能を使って、LPをLIFFで開くようにします。 サンクスページからオリジナルフォームへリダイレクトさせてタグを付与します。
【導線例】（※LIFF内） ①【外部サイト】お客様LP ↓ ②【外部サイト】確認ページ ↓ ③【外部サイト】サンクスページ ↓ リダイレクト ↓ ④【オリジナルフォーム】タグ付与 （※必要に応じてサンクスページの表示作成）
※スマホのみの施策となります。 PCで①外部サイトURLのLPにアクセスした際は④でタグ付与はできません。 またスマホでもLIFF以外から購入した場合は同様にタグ付与できません。
（1）①LPのURLをLIFFの外部サイトに設定 LIFFの外部サイト設定方法はこちら＞ ↓ （2）③サンクスページにjavascriptでオリジナルフォームへリダイレクト設定 href内のLIFF呼び出しURLを変更する。
<script>
location.href="line://app/1656436409-●●●●●";
</script>↓ （3）④オリジナルフォームにタグ付与の記述をコピペで追加 アクセス時にタグ付与、送信が行われます。 タグコード部分に付与したいタグコードをセットしてください。
<!-- 削除禁止 -->
<form id="form-name" method="POST" action="###cancellationurl###">
<!-- 削除禁止 --><input type="hidden" id="useridfield" name="luid"><!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="fid" name="fid" value="###fid###"><!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="liffid" name="liffid" value="###liffid###"><!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="bot_id" name="bot_id" value="###botid###"><!-- 削除禁止 -->
</form>
<!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="addtag"><!-- 削除禁止 -->
<!-- 削除禁止 -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="liff-starter.js"></script>
<script>
window.onload = function (e) {
liff.init({
liffId: "###liffid###"
}).then(() => {
liff.getProfile().then(function (profile) {
document.getElementById('useridfield').value = profile.userId;
}).catch(function (error) {});
})
.catch((err) => {});
};
</script>
<!-- 削除禁止 -->
<!-- 削除禁止 -->
<script>
//タグ付与
AddTag('タグコード');
var alertmsg = function(){
AddTagProc();
//alert("3秒経過、タグ付与");
}
setTimeout(alertmsg, 3000);
function AddTag(TagCode) {
$("#addtag").val(TagCode);
}
function AddTagProc() {
var uid = $("#useridfield").val();
var fid = $("#fid").val();
var tag = $("#addtag").val();
var botid = $("#bot_id").val();
$.ajax({
type: "POST",
url: "/api/tag/add",
dataType: 'json',
data: {
"uid": uid,
"fid": fid,
"bot_id": botid,
"tag_code": tag
},
success: function (j_data) {},
error: function (XMLHttpRequest, textStatus, errorThrown) {},
complete: function () {}
});
}
function liffclose() {
liff.closeWindow();
}
</script>
<!-- 削除禁止 -->▼検証済みカート （最終検証日：2022/8/19） ・shopify ※サンクスページのリダイレクト処理はカートに依存しているため カート側の仕様変更で使えなくなることがあります。 ※サンプルフォーム（アラートは実装時に外してください。） プレビュー＞ ダウンロード＞オリジナルフォーム(LIFF)で取得したデータをCSVでダウンロードする方法
↓
②受信BOX
↓
↓
④CSVダウンロードしたいデータにチェック
↓
⑤CSVエクスポート
↓
↓
⑦ジョブリスト
↓
⑧CSVをダウンロード
※CSVファイルを開く際のパスワードはECAIログインパスワードと同じ
※CSVダウンロードのボタンが出るまで3分ほどかかる場合があります。ボタンが出ない場合はページをリロードしてください。
オリジナルフォーム（LIFF）による申請後に、2回目のアクセスに対して申請をできないようにします。 ブラウザに申請済みのクッキーを保持し判別するようにします。 サンプルページをダウンロードし、設定を進めて下さい。 下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。 > フォームサンプルページ > 送信完了サンプルページ DL：フォームサンプルページ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U
（1）サンプルファイル内にあるjs.cookie.min.jsをjsファイルに格納
（2）index.htmlのhead部分に下記を追加
サンプルコード（コピー＆ペースト用）
<script src="js/js.cookie.min.js"></script>
<script>
//アクセス制限
$(function() {
const applied = Cookies.get('applied');
if(applied){
$(".wrap").css('display','none');
$(".wrap.applied").show();
}
return false;
});
</script>（3）index.htmlのbody内に制限時の表示を追加 テキストの内容などは適宜変更下さい。 クッキーがある場合にこちらが表示されます。
サンプルコード（コピー＆ペースト用）
<div class="wrap applied" style="display: none;">
<section class="title">
<h2>エントリー受付</h2>
</section>
<section class="complete">
<p>恐れ入りますが、24時間は再申請できかねます。<br>エントリーにつきましては、24時間経ってから<br>手続きをお願い致します。</p>
<div class="btn">
<a class="blue" onclick="liffclose();">内容を確認したので閉じる</a>
</div>
</section>
</div>（4）complete.htmlのhead部分に下記を追加
サンプルコード（コピー＆ペースト用）
<script src="js/js.cookie.min.js"></script>（5）complete.htmlのbody閉じの上部分に下記を追加 使用するクッキーの保持のコメントアウト「//」を解除し、元の58行目はコメントアウトしてください。
サンプルコード（コピー＆ペースト用）
//クッキーセット
Cookies.set('applied', '申請中', {expires: 1/( 24 * 60 * 6)} );//10秒保持
// Cookies.set('applied', '申請中', {expires: 1/( 24 * 60)} );//1分保持
// Cookies.set('applied', '申請中', {expires: 1/ 24} );//1時間保持
// Cookies.set('applied', '申請中', {expires: 1});//1日保持■見本
下記サンプルページを元に説明します。 サンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 サンプルページ＞ サンプルページダウンロード＞
※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
■仕様 ・質問２の解約を選択すると、ポップアップバナーが表示されます。 ・ポップアップバナーで解約が阻止された場合は指定のタグが付与されます。 ・<!-- 削除禁止 -->部分はデータの送信に必要なので削除しないでください。 ■編集ファイル：index.html (1)ポップアップを発動させたい回答に「onClick="showModal();"」を設定
(2)ポップアップバナーの表示部分のHTMLを設定 ①ポップアップバナー画像、ボタン画像設置 ②完了バナー画像、閉じるボタン設置
(3) (1)で呼び出す「showModal()」、完了バナー(サンクスバナー)の挙動設定 フォーム離脱時にタグを付与する場合は、AddTagにタグコードを貼り付けてください。
（4）バナー部分のスタイルの設定
（1）コンテンツ ＞ LIFF
↓ （2）対象フォームの「LIFF呼び出しURL」をコピーする
↓ （3）1：1トークより友達登録している管理用アカウントや自分のアカウントを選択 テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓ （4） ここからは実機でのLINE操作となります。 友達登録しているスマホより送られたメッセージ確認 「LIFF呼び出しURL」を開く
↓ （5）表示されたオリジナルフォームに内容を入力しエントリー（送信）する
↓ （6）送信結果は管理画面に戻り「受信BOX」よりご確認ください。 受信BOXの確認方法につきましてはこちらをご確認ください【フォーム】画像の追加方法
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【編集ファイル】
index.html
①画像の挿入箇所に<figure></figure>で囲われている部分をコピー＆ペーストしてください。
②画像のパスを設定
※画像のパス（画像名）は文字化け防止のため、半角英数字にしてください。
③画像名を記入（表示はされません、設定なしでも可、altは日本語可）
サンプルコード（コピー＆ペースト用）
<figure>
<div><img src="images/bnr3.png" alt="追加画像"></div>
</figure>オリジナルフォームはHTMLを自由にデザインが可能なため、規定のサイズ、形式などはございません。 ただし画像データが非常に重かったり、サイズが大きすぎたりしますとユーザビリティーを損ないます。 推奨のサイズは以下になりますので、参考にしてください。 ■引き止めバナー、継続促進バナー ・形式：jpg.png ①正方形バナー（1：1） ・サイズ横×縦：1040×1040px ※バナー下にボタンを設置する場合におすすめ ②縦型バナー ・サイズ横×縦：1040×1800px ※スマートフォン１画面のおおよそ収まるサイズ ③縦型バナー大 ・サイズ横×縦：1040×2800px ※スマートフォン画面の約1.5スクロールのサイズ https://gyazo.com/cbe746c9b921c5cb5278af4fefcbc5d5 ■ポップアップバナー（モーダルバナー） ・形式：jpg.png,gif ①正方形バナー（1：1） ・サイズ横×縦：600×600px ②縦型バナー（2：3） ・サイズ横×縦：600×900pxオリジナルフォーム（LIFF）内に別のWEBページを表示させる方法
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>▼タグを付けることができるアクション一覧
・会員リスト（※1） ・タグの自動設定（※2） ・一斉配信メッセージ（※3） ・応答メッセージ（※3） ・ステップメッセージ（※3） ・リマインドメッセージ（※3） ・ポストバック（※4） ┗カルーセル ┗画像カルーセル ┗ボタン ┗選択ボタン ┗クイックリプライ ┗リッチメニュー ・1:1トーク（※5） ・広告リスト（※6） ・LIFF（オリジナルフォーム）（※7）
各アクションのタグ操作箇所は下記画像をご確認ください。
▼会員リスト（※1）
▼タグの自動設定（※2）
▼一斉配信メッセージ・応答メッセージ・ステップメッセージ・リマインドメッセージ（※3）
▼ポストバック（カルーセル・画像カルーセル・ボタン・選択ボタン・クイックリプライ・リッチメニュー）（※4）
▼1:1トーク（※5）
▼広告リスト（※6）
▼LIFF（オリジナルフォーム）（※7）
オリジナルフォームで、送信ボタンを押したらタグを付与する方法はこちら＞
1：1トークの右サイドメニューにあるLIFFは最大5件までの表示になっております。
それ以上の表示は、右サイドメニュ【詳細】をクリックして個人詳細ページでご確認ください。
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【仕様】 質問３を選択時に下記ポップアップバナーが表示されます。 「外部サイトへリンク」ボタンを押すと遷移する前に指定のタグを付与します。
【仕様詳細】 使用ファイル：index.html （1）ポップアップバナーの設置 ①表示バナーの１つ目を設置 ②表示バナーの２つ目を設置、更に増やす場合は複製して同列に追加する。 ③バナー表示画像設定 ④閉じるボタン設定 ⑤外部サイトへリンクボタン設定 ⑥外部サイトへ離脱しない場合は変わりに完了バナーを使用する（今回は使用しない）
↓ （2）ポップアップバナーを表示させるイベントを設定 ①質問１と質問３の取得に必要な変数をセットする ②質問３（申請種別）の選択内容を取得 ③質問１（商品）の選択内容を取得 ④全バナーを非表示 ⑤条件分岐：解約かつ商品１を選択している ⑥２回表示できないように、初回表示にチェックを入れる ⑦指定のタグコードをセットする ⑧バナー１を表示させる ⑨モーダルウインドウを表示させる ⑩条件分岐：解約かつ商品２を選択している ⑪ ⑩の条件の場合に指定のタグコードをセットする ⑫ ⑩の条件の場合にバナー２を表示させる
↓ （3）バナークリック時の挙動設定 ①バナー１の「外部サイトへリンク」をクリックした時 ②バナーを非表示にする ③モーダルウインドウを閉じるボタンを無効にする ④ECAIにタグを送信する ⑤タグ送信後のしダイレクト先を設定 ⑥バナー２の挙動設定 ⑦「閉じる」ボタンを押下でモーダルウインドウ（ポップアップバナー）を閉じる
↓ （4）質問3選択時にshowModal();のクリックイベントを呼び出す設定をする
上記のように質問内容のテキストより少し小さいフォントサイズでマイクロコピーを入れたい場合は、 下記コードをコピーして、挿入箇所へペーストしてください。 改行したい場合は<li>～</li>を増やします。
<ul class="note">
<li>※こちらに表示したいテキストを記入してください。</li>
<li>※こちらに表示したいテキストを記入してください。</li>
</ul>※ class="note"でスタイルの調整を行っております。フォーム内質問と設定col(name属性)の確認方法
（1）コンテンツ ＞ LIFF
↓
（2）対象フォーム の 「フォーム修正」選択
↓
（3）すべてを開く
↓
（4）フォーム内質問とそちらに紐づいている設定col(name属性)の確認を行えます。 ※二重に定義されていると、後に定義されているcolで上書きされ、一部受信が出来なくなります
【フォームの種類について】 オリジナルフォーム（LIFF）は大きく下記の2種類に分けられます。 ①解約・休止・サイクル変更フォーム ②その他のフォーム（本人確認フォーム含む） ①解約・休止・サイクル変更フォームで取得した情報はASSダッシュボード、受信BOXに反映されます。 ②その他のフォームで取得した情報は受信BOXに反映されます。また本人確認フォームとして設定しますと、取得した情報を会員リストの顧客情報として反映することができます。 【設定方法について】 LIFFの設定画面でフォーム種類を選択し、保存してください。
【注意事項】 オリジナルフォームの編集画面で、現在アップロードされているフォームの種類が確認できます。 こちらのフォーム種類とLIFFの設定フォームは同じにしてください。 異なりますとオリジナルフォームから正常にデータを取得できません。
アップロードされているフォームの設定方法につきましては。各フォームの詳細設定ガイドをご参照ください。 ⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール ⇒本人確認フォーム内のcol(name属性)の記載ルールオリジナルフォームのPV数、ユニークユーザー数を計測する方法
外部ツールのGoogleアナリティクスを使用することで計測ができます。 アナリティクスの機能は多機能にわたるため、ツールについての細かい使用方法につきましては割愛させていただきます。 知りたい情報はインターネットから取得してご対応下さい。 (1)Googleアカウントの作成 アカウント作成はこちら＞ ↓ (2)アナリティクスにログイン ログインはこちら＞ ↓ (3)アナリティクスでサイト設定をする サイト設定はこちら＞ ↓ (4)サイト設定後、計測用のトラッキングタグをコピペしてください。 ①対象のアカウント選択 ②管理 ③データストリーム ④(3)で設定したWEBサイトを選択 ⑤トラッキングタグをコピペする
↓ (5)コピペしたコードを、オリジナルフォーム（LIFF）の「index.html」,「complete.html」のhead内に設置してください。 オリジナルフォームを編集するには下記ガイドを参照下さい。 既存のオリジナルフォーム（LIFF）のダウンロード方法 オリジナルフォーム（LIFF）のアップロード方法 ↓ (6)設置後、ユーザーのアクセスが行われますとアナリティクスの管理画面に計測内容が表示されます。 PV数、ユニークユーザー数が計測できますので、マーケティングにご活用ください。
設置の設定代行(有償)も行っております。 ご希望の方は下記フォームからお問い合わせください。 Googleアナリティクス設定代行に関するお問い合わせはこちら＞【解約・休止・サイクル変更・スキップ】申請フォームのHTMLファイル内容説明
フォームファイル内にあるindex.html（入力ページ）の詳細説明です。 ソースコード内にコメントアウトで説明の記載があります。 下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ＞フォームサンプルダウンロードオリジナルフォームを送信後にトーク画面に戻る方法
■目的 オリジナルフォーム送信後に完了ページを表示させずトーク画面に戻る方法です。 ■セット所有時間 5分 下記フォームサンプルページを元に説明します。 サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■セットの流れ サンプルページを例に説明をしていきます。 編集ファイル：complete.html フォーム送信後に表示される完了ページ(complete.html)に、自動でLIFFを閉じる動作を入れます。 実際の閉じる動作はLINEのLIFF内でしか動作しないのでご注意ください。 （1）body閉じの上に下記２つのコードを追加
<!-- 削除禁止 -->
<script>
liffclose();
</script>
<!-- 削除禁止 -->※下記2つ目のコードは、フォーム内に既に記載がある場合は記載しなくてOKです
<!-- 削除禁止 -->
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script src="liff-starter.js"></script>
<script>
window.onload = function (e) {
liff.init({ liffId: "###liffid###" }).then(() => {
liff.getProfile().then(function (profile) {
document.getElementById('useridfield').value = profile.userId;
//alert(profile.userId);
}).catch(function (error) {
//window.alert('Error getting profile: ' + error);
});
})
.catch((err) => {
});
};
</script>
<script>
function liffclose() {
liff.closeWindow();
}
</script>
<!-- 削除禁止 -->（2）完了ページのコンテンツ部分は、コメントアウトか削除して非表示にする
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。BOT差し替え時に行うこと
BOT差し替えをした際に、引き継げない設定があります。
引き継げない設定はBOT差し替え後に、下記手順に沿って再設定してください。
▼引き継げない設定
【1】会員リスト 【2】個別予約メッセージ 【3】リッチメニュー 【4】タグ追従設定 【5】LIFF 【6】RPA設定
【1】会員リストの再設定（削除）
①会員＞会員リスト
↓
②全会員選択
↓
➂削除
【2】個別予約メッセージの再設定（削除）
④メッセージ＞個別予約メッセージ
↓
⑤削除
【3】リッチメニューの再設定（保存し直し）
⑥コンテンツ＞リッチメニュー
↓
⑦編集
↓
⑧何も変更せずに「保存する」
全リッチメニューに対し行う
【4】タグ追従設定の再設定（保存し直し）
⑨コンテンツ＞タグ追従設定
↓
⑩編集
↓
⑪何も変更せずに「保存する」
全リッチメニューに対し行う
【5】LIFFの再設定（新規作成）
⑫コンテンツ＞LIFF
↓
⑬再設定したいLIFFを「編集」
↓
⑭ダウンロード
↓
⑮LIFFを作成
┗設定手順はこちら＞
※設定手順「（2）」からを行い「⑭」でダウンロードしたファイルを選択する
【6】RPA設定（再設定）
⑯3BO>RPA設定
↓
⑰「⑮」で作成したLIFF（オリジナルフォーム）を選択
↓
⑱追加する
┗自動解約処理の設定方法はこちら＞
┗自動休止・スキップ処理の設定方法はこちら＞
RPA設定はフォームごとに設定が必要なため、「⑮」で作成したフォームに設定する必要があります。
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページを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"はバリデーションの表示位置を指定
⑨選択支の表示テキストを指定
【オリジナルフォーム】入力チェックの設定について
■目的 オリジナルフォームの入力チェックの設定についての説明 ■セット所要時間 10分 ■セットの流れ 下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
(1)必要ファイルは４つ 下記４ファイルを<head>内で読み込んでください。 （※ECAIのテンプレートを使用している場合、すでに設置されています。） ・jquery本体 ・validationEngine.css ・validationEngine.js ・日本語化ファイル
（２）回答のclassに”validate[required]”を指定
※data-prompt-positionでアラート表示の位置を調整できます。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。オリジナルフォーム（LIFF）の最大数
オリジナルフォーム（LIFF）の発行最大数は1LINEログインチャネルで30件までとなります。
30件を超えた場合はLIFFの登録ができなくなります。（使用しなくなったLIFFを削除することで追加できるようになります）
申請種別（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に格納する（上書きされます）
■目的
ウェブページをLINE上に表示したいときはLIFFの外部サイトを使用します。
LIFFとは？
■セット所要時間
3分
■セットの流れ
① 左サイドメニュー＞コンテンツ＞②作成
↓
③ LIFF管理名を入れる。お客様には表示されません。社内管理用です。
↓
④ 画面サイズを設定 LINE内で何パーセントで見せるかです。視認性が良いのはFull（全画面）になるのでECAIでは全画面を推奨しています。作成後に後から編集可能です。
↓
⑤ 外部サイトにチェックを入れて表示させたいURLを挿入
↓
⑥ 保存を押して完了
本番環境へアップロードする前に動作テストを行いたい場合は、テスト用のLIFFを別途ご登録頂いてテスト送信を行ってください。
（1）コンテンツ>LIFF ページに移動
↓ （2） 「作成」ボタンをクリック
↓
（3）テスト用のLIFFを作成する
LIFF管理名には「テスト」などわかりやすくする
※解約・休止・サイクル変更に関わるフォームの場合は、「解約」「休止」「サイクル変更」の文字列をLIFF管理名に必ず入れて登録してください。
※解約・休止・サイクル変更に関わるフォーム以外の場合は、「解約」「休止」「サイクル変更」の文字列を含まないよう設定してください。
画面サイズを選択（特に指定のない場合は「Full」を選択）
オリジナルフォームにチェック、「保存する」をクリック
↓ （4） 作成したフォームの右側「フォーム編集」をクリック
↓ （5）「参照」ボタンをクリックしてテスト送信したいフォームデータを選択、「保存する」をクリック
フォームデータのダウンロード方法は下記を参照ください。 ＞既存のオリジナルフォーム（LIFF）のダウンロード方法
↓ （6） ⑪プレビュー、⑫設問内容をご確認できます。
※【解約・休止・サイクル変更・スキップ】申請フォームの場合、ASSダッシュボードに「お客様申請」と「テスト申請」が混在する形となる為、「名前○○の申請は処理しない」など社内ルールの周知をしていただけたらと思います。 テスト送信につきましては下記を参照ください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 フォームアップロード後のチェック項目につきましては下記を参照ください。 ＞【簡易版】フォームアップロード後のチェック項目フォーム離脱時に、サンクスバナーを表示してタグを付与する方法
画面操作途中におけるタグ付与設定が必要になります。 オリジナルフォームの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）のアップロード方法」の手順に沿ってファイルをアップロードする。 付与したタグの動作確認方法は下記をご参照ください。 > 付与したタグの動作確認方法