LIFF - ECAI 完全活用ガイド

テンプレートを使ってオリジナルフォーム（LIFF）を作成

（1）　ECAIオリジナルフォームテンプレートから利用したいZipファイルをダウンロード

＞テンプレートダウンロード

↓

（2）　コンテンツ>LIFF　ページに移動

↓

（3）　「作成」ボタンをクリック

↓

（4）　LIFFの設定

④LIFF管理名がフォーム名として登録されます。
※お客様には見えません。社内管理用です。
※LIFF管理名に「ライン」もしくは「LINE」という文字が入ると、LINEの仕様上保存できずエラーになるのでご注意ください。
⑤フォームの種類を選択
⑤-1 カート連携の即時判定を使用する場合は設定  ※API連携(カート)連携を設定している方のみ使用可能
　┗仕様についてはこちら＞
⑥画面サイズを選択（特に指定のない場合は「Full」を選択）
⑦オリジナルフォームにチェック、「保存する」をクリック

↓

（5）　作成したフォームの右側「フォーム編集」をクリック

↓

（6）　「参照」ボタンをクリックして（1）でダウンロードしたZipファイルを選択、「保存する」をクリック

↓

（7）　⑫一覧ページ、LIFF管理名の下にある「呼び出しURL」を利用しLINEアプリより表示を確認
「呼び出しURL」は各種メッセージやリッチメニューなどに設定して使用できます。

※⑪表示内容の下にあるURLはwebでデザインをチェックするときに使用するものです。
こちらで表示されるデザインは保証されるものではありません。確認の際は必ず呼び出しURLを利用しLINEアプリより確認をお願いします。

オリジナルフォーム（LIFF）の新規作成

（１）　コンテンツ　＞　LIFF

↓

（２）　「作成」ボタンをクリック

↓

（３）　LIFFの設定

④LIFF管理名がフォーム名として登録されます。
※お客様には見えません。社内管理用です。
※LIFF管理名に「ライン」もしくは「LINE」という文字が入ると、LINEの仕様上保存できずエラーになるのでご注意ください。
⑤フォームの種類を選択
⑤-1 カート連携の即時判定を使用する場合は設定  ※API連携(カート)連携を設定している方のみ使用可能
　┗仕様についてはこちら＞
⑥画面サイズを選択（特に指定のない場合は「Full」を選択）
⑦オリジナルフォームにチェック、「保存する」をクリック

LIFFの新規作成は以上となります。
この後は表示内容を設定します。
テンプレートから行う場合と、スケルトンの状態から作成する場合があります。
下記ガイドから表示設定を行ってください。

テンプレートを使って作成＞

スケルトンの状態から作成＞

オリジナルフォーム（LIFF）のアップロード方法

（1）対象フォームの選択

　↓
（2）ZIPファイルをアップ

ZIPファイルの構造はルートフォルダ（一番上）の配下にindex.htmlがある状態にしてください。
＞ZIPファイルの構造説明


※1.アップロードファイルは圧縮されている必要があります。
＞フォームの圧縮方法について

※2.圧縮する場合はindex.htmlが存在する階層を全選択して圧縮してください。
＞全選択可能な圧縮ツール（推奨）ダウンロード

※3.ファイル内に文字化けがないかご確認ください。

　↓
（3）　プレビューを確認して保存

正常にファイルを読み込めない場合は下記ガイドをご確認ください。
＞フォームの圧縮方法について

プレビューが正常に表示されない場合は、一旦保存してから再度編集画面より確認してください。

　↓
（4）　⑥一覧ページ、LIFF管理名のしたにある呼び出しURLを利用しLINEアプリより表示を確認

※⑦表示内容の下にあるURLはwebでデザインをチェックするときに使用するものです。
こちらで表示されるデザインは保証されるものではありません。確認の際は必ず呼び出しURLを利用しLINEアプリより確認をお願いします。

オリジナルフォームで取得した情報を受信BOXで確認する

（1）サイドメニューASS　＞　受信BOX

↓

（２）該当フォームを選択

※フォームが追加されるとプルダウンに自動的に表示されます。

↓

（3）詳細

↓

（4）フォームで取得した情報を確認できます。

※フォームの内容は必ず呼び出しURLを利用しLINEアプリより送信をお願いします。

こちら以外から送信されたフォームの内容につきましては受信されません。

受信BOXの内容につきましては、変更、削除はできません。

本人確認フォーム内のcol(name属性)の記載ルール ver2.0

下記フォームサンプルページのソースコードと併せてご確認ください。

＞本人確認フォームサンプルページ
＞フォームデータダウンロード

※ソースコード確認方法
windows：Ctrl + U
mac：　　option + command + U



1　必須コードにおいて、formタグのaction属性に「###formurl###」を指定した場合に限りこのルールが有効となります。

2 各質問のname属性におきまして、タイトル（送信内容のタイトル）と回答はセットで設定する必要があります。
3 タイトルは必ずtype="hidden"で設定してください。

4「name」属性の数字（col_1）は質問の並び順に合わせてください。数字の順番に回答が取り込まれます。

5 申請者の氏名について
 回答項目の「name」属性に後ろに「_name」を追加した形で指定してください。
 例：col_1_name

6 申請者の電話番号について
 回答項目の「name」属性に後ろに「_tel」を追加した形で指定してください。
 例：col_2_tel

7 申請者の自宅電話番号について
 回答項目の「name」属性に後ろに「_home_tel」を追加した形で指定してください。
 例：col_3_home_tel

8 申請者のメールアドレスについて
 回答項目の「name」属性に後ろに「_email」を追加した形で指定してください。
 例：col_4_email

9 申請者の郵便番号について
 回答項目の「name」属性に後ろに「_postcode」を追加した形で指定してください。
 例：col_5_postcode

9-2 郵便番号からの住所自動入力について
（1）読み込みファイル

（2）入力時の処理
①.　②と③で入力された郵便番号が送信用に格納されます。
②.　郵便番号の前３ケタ
③.　郵便番号の後４ケタ
④.　入力後、都道府県、市区町村まで自導入力します。

10 申請者の都道府県について
 回答項目の「name」属性に後ろに「_prefecture」を追加した形で指定してください。
 例：col_6_prefecture

11 申請者の住所1について
 回答項目の「name」属性に後ろに「_first_address」を追加した形で指定してください。
 例：col_7_first_address
サンプル例では市区町村までが住所1の内容になります。

12 申請者の住所2について
 回答項目の「name」属性に後ろに「_second_address」を追加した形で指定してください。
 例：col_8_second_address
サンプル例では丁目・番地／マンション名・号室までが住所2の内容になります。

13 申請者の生年月日について
 回答項目の「name」属性に後ろに「_birthday」を追加した形で指定してください。
 例：col_9_birthday

生年月日の入力は「年」「月」「日」を別々に入力し、name="col_9_birthday"のvalueに格納しています。
詳細についてはこちら⇒【フォーム】生年月日の入力フォームの作り方

14 申請者の性別について
 回答項目の「name」属性に後ろに「_gender」を追加した形で指定してください。
 例：col_10_gender
※取得できる値：「男性」「女性」「その他」

15 上記以外の新しい質問を追加したい場合は使用していない連番で記載してください。
ただし任意で指定した項目につきましては、会員情報としては更新されません。
例：col_11

 <input type="hidden" name="col_11_title" value="趣味">
 <input type="text" name="col_11" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft">



16 申請者の氏名（カナ）について(※2022/1/11追加)
 回答項目の「name」属性に後ろに「_kana_name」を追加した形で指定してください。
 例：col_2_kana_name



取得した情報は「会員リスト」でご確認ください。
⇒本人確認フォームで取得した情報を会員リストで確認する

【注意点】
解約・休止・サイクル変更フォームと併用はできません。
理由としてはフォームの種別が異なるためです。
解約・休止・サイクル変更フォームを使用する場合は、フォームを2つに分けて運用をお願いします。
なお解約・休止・サイクル変更にかかわらない運用の場合は、併用可となります。

解約・休止・サイクル変更フォームについてはこちら＞

アンケート→タグ付けで顧客管理をしたいです。可能ですか

可能です。

アンケート→タグづけという事は、回答→タグ付けになります。
ECAIでは下記4つの形で表現が可能です。

１，【オリジナル回答フォーム→タグ付け】
２，【アンケート→タグ付け】
３，【クイックリプライ→タグ付け】
４，【カルーセル→タグ付け】

があり、まずは質問と選択をまとめたら
下記の形で一番ユーザーが見やすい物を選ぶことを推奨しています。

・質問項目がしょっちゅう変わる。「２，【アンケート→タグ付け】」がおすすめ。
フォームと違って誰でも編集可能

・質問の選択肢がテキストが14文字を超える。
「１，【回答フォーム→タグ付け】」か「３，【クイックリプライ→タグ付け】」になる。
質問の選択肢テキスト20文字を超えるなら「１，【回答フォーム→タグ付け】」一択

・質問が回答毎に分岐する、「１，【回答フォーム→タグ付け】」「２，【アンケート→タグ付け】」がおすすめ
分岐設定が作りやすいため。

・質問項目がすべて4つ以内、２，【アンケート→タグ付け】がおすすめ。単純に作りやすい

・一度作ったら質問の修正が少ない。１，【オリジナル回答フォーム→タグ付け】質問を利用する、ユーザー目線でUXが一番使用しやすい。フル画面表示がおすすめ。

・画像とテキストで表現したい。「１，【回答フォーム→タグ付け】」「４，【カルーセル→タグ付け】」になります。

・とにかく設定しやすい順、２，【アンケート→タグ付け】>１，【オリジナル回答フォーム→タグ付け】>３，【クイックリプライ→タグ付け】>４，【カルーセル→タグ付け】
（これはサポートの個人的主観です。）

本人確認フォームの作成方法

（１）下記より本人確認フォームのテンプレートをダウンロード
ダウンロードはこちらから＞

↓↓↓

（２）フォーム送信時のタグの設定
ダウンロードしたファイルを解凍し、index.htmlの「タグコード」部分を管理画面で設定したタグコードに変更
タグの作成につきましてはこちら＞
タグ設定の詳細はこちら＞

↓↓↓

（３）テキストの変更が必要な場合は下記の該当箇所を編集してください。
①ヘッダー部分テキスト
②お名前入力項目
③電話番号入力項目
④メールアドレス入力項目
⑤ボタン部分テキスト
htmlファイルの詳細の説明はこちら＞

↓↓↓


（４）LIFFの作成
LIFFの作成についてはこちら＞

↓↓↓


（５）作成したLIFFにファイルをアップロード
アップロードについてはこちら＞

↓↓↓


（６）スマホよりテスト送信を行い、意図した挙動になっているかご確認下さい。
本人確認フォームのテスト送信方法＞

オリジナルフォーム内の各質問にあるname属性(col)の記載ルール

下記フォームサンプルページのソースコードと併せてご確認ください。
フォームサンプルページ＞
フォームデータダウンロード＞

※ソースコード確認方法
windows：Ctrl + U
mac：　　option + command + U



（1）必須コードにおいて、formタグのaction属性に「###formurl###」を指定した場合に限りこのルールが有効となります。
※ECAI管理画面のLIFFのフォーム種類は「その他のフォーム」を選択してください。


（2）各質問のname属性におきまして、タイトル（送信内容のタイトル）と回答はセットで設定する必要があります。
（3）タイトルは必ずtype="hidden"で設定してください。


（4）「name」属性のcolの数字は質問の並び順に合わせてください。数字の順番に回答が取り込まれます。
新しい質問を追加したい場合は使用していない連番で記載してください。


（5）フォームをアップロード後、タイトルと回答が正しく設定されているかご確認ください。

【フォーム】ZIPファイルの構造説明

・cssフォルダ　　　：各種スタイルファイルが入っています
・imagesフォルダ　：画像ファイルが入っています。

・jsフォルダ　　　　：jsファイルが入っています。
・complete.html　　：送信完了ページ（サンクス画面）
・index.html　　　　：フォーム入力ページ
・liff-starter.js　　　：Liff画面を立ち上げるためのjsファイル（削除禁止）

※テンプレートフォルダよりダウンロードしたzipファイルを解凍しますと上記のような構造となります。

編集する際はこちらの構造を保持したまま編集をお願い致します。
＞テンプレートダウンロード

※ファイル内に文字化けがないかご確認ください。
解凍ツール（推奨）https://www.ponsoftware.com/archiver/download.htm

※フォームを表示する「index.html」とサンクス画面を表示する「complete.html」は必ずセットで作成する必要があります。「complete.html」だけ未作成・アップロードされていない場合、送信後の画面が表示されない状態となりますので、ご注意ください。

オリジナルフォームで、回答の選択ごとに付与するタグを分ける方法

■目的 
ラジオボタンで、回答の選択ごとに付与するタグを分ける方法についての説明です。
その他の形式の場合は、下記を参照してください。

チェックボックスのタグ付与方法はこちら＞

セレクトボックス（プルダウン）のタグ付与方法はこちら＞


■セット所要時間 
20分


■セットの流れ
選択ごとに付与するタグを分けるには、対象のオリジナルフォームのHTMLファイル内にjavascriptでタグをセットする必要があります。

HTMLファイルのダウンロード方法につきましては下記をご参照ください。
既存のオリジナルフォーム（LIFF）のダウンロード方法


 ダウンロードが終わりましたらファイルを解凍し、index.htmlをご使用のテキストエディターで開きます。
ファイル内で変更するところが3箇所あります。



（1）「id="add_tags"」の「value」にセットされているタグコードが送信時付与されます。
※変更がなければ初期値で記載されているタグが付与されます。

↓

（2）選択項目ごとに付与したいタグを「onclick="selectTag('タグコード')"」でそれぞれ記述する。
タグコードの作成方法はこちら＞

〈コピペ用コード〉

onclick="selectTag('タグコード')"

↓

（3）（2）で選択されたタグを（1）の「id="add_tags"」の「value」にセットするためのjavascriptをファイル下部の<script></script>内に記述する。
記述後ファイルの上書きを忘れずにしてください。

〈コピペ用コード〉

function selectTag(TagCode) {
	$("#add_tags").val(TagCode);
}

↓

（4）記述が終わりましたら、「オリジナルフォーム（LIFF）のアップロード方法」の手順に沿ってファイルをアップロードする。

↓

（5）付与したタグの動作確認方法は下記をご参照ください。
付与したタグの動作確認方法＞

下記のようにタグが付与されていれば設定完了です。

下記フォームサンプルページのソースコードと併せて参照いただくとわかりやすいです。
フォームサンプルページ
https://help.ecai.jp/form/demo01/

※ソースコード確認方法
windows：Ctrl + U
mac　　：option + command + U

オリジナルフォームの編集方法

既存のオリジナルフォーム（LIFF）の修正方法になります。


（１）コンテンツ　＞　LIFF　＞　フォーム編集
メニューのLIFFより修正したいフォームをダウンロード
ダウンロード方法はこちら＞

↓↓↓

（２）ダウンロードしたファイルを解凍し、テキストエディターで編集
お使いのテキストエディターがない場合は、下記ガイドよりインストールして編集してください。
テキストエディターの操作方法＞

※デフォルトでインストールされているテキストエディターでも編集可能です。
Windows：「メモ帳」
Mac：「テキストエディット」


〈フォームの詳細について〉
【フォーム】ZIPファイルの構造説明＞

本人確認フォームのHTMLファイル内容説明＞

【解約・休止・サイクル変更・スキップ】申請フォームのHTMLファイル内容説明＞

↓↓↓


（３）編集したファイル一式を圧縮
フォームの圧縮方法について＞

↓↓↓


（４）圧縮したファイルを該当フォームへアップロード
アップロードについてはこちら＞

↓↓↓


（５）スマホよりテスト送信を行い、意図した挙動になっているかご確認下さい。
フォームのテスト送信方法＞

オリジナルフォームで、送信ボタンを押したらタグを削除する方法

送信ボタンを押したときにタグを削除するには、対象のオリジナルフォームのHTMLファイル内に削除するタグを指定する必要があります。

HTMLファイルのダウンロード方法につきましては下記をご参照ください。
＞既存のオリジナルフォーム（LIFF）のダウンロード方法


（1）ダウンロードが終わりましたら、ファイルを解凍。

↓

（2）index.htmlをご使用のテキストエディターで開きまして、
「id="del_tags"」の「value」に削除したいタグコードを記述してください。
記述後ファイルの上書き（保存）を忘れずにしてください。

<!-- 削除禁止 --><input type="hidden" id="del_tags" name="del_tags" value="タグコード"><!-- 削除禁止 -->

上記の行がない場合はformの直下に設置してください。

↓

（3）記述が終わりましたら、「オリジナルフォーム（LIFF）のアップロード方法」の手順に沿ってファイルをアップロードする。

設定したタグの動作確認方法は下記をご参照ください。
＞送信時タグ付与の動作確認方法

下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。
フォームサンプル：https://help.ecai.jp/form/demo01/
DL：https://help.ecai.jp/form/demo01.zip

※ソースコード確認方法
windows：Ctrl + U
mac　　：option + command + U

本人確認フォームのテスト送信方法

（1）コンテンツ　＞　LIFF

↓
（2）対象フォームの「LIFF呼び出しURL」をコピーする

↓
（3）1：1トークより友達登録している管理用アカウントや自分のアカウントを選択
 テキストメッセージに「LIFF呼び出しURL」をペーストして送信

↓
（4） ここからは実機での動作確認となります。
 友達登録しているスマホより送られたメッセージ確認
  「LIFF呼び出しURL」を開く

↓
（5）表示されたオリジナルフォームに内容を入力しエントリー（送信）する

↓
（6）送信結果は管理画面に戻り「受信BOX」よりご確認ください。

受信BOXの確認方法につきましてはこちらをご確認ください

既存のオリジナルフォーム（LIFF）のダウンロード方法

（1）コンテンツ　＞　LIFF

↓

（2）対象フォーム　の　「フォーム修正」選択

↓

（3）ダウンロード

↓

（4）ダウンロードが終わりましたら、指定のダウンロードフォルダの中をご確認ください


解凍ツール（推奨）https://www.ponsoftware.com/archiver/download.htm
※ファイル内に文字化けがないかご確認ください。

【オリジナルフォーム】表示・非表示の出し分け設定

下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
フォームサンプルページ＞
フォームサンプルダウンロード＞

※ソースコード確認方法
対象ページを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文を使用して、選択ごとに次の設問を出し分ける

本人確認フォームのHTMLファイル内容説明

フォームファイル内にあるindex.html（入力ページ）の詳細説明です。 
ソースコード内にコメントアウトで説明の記載があります。 
下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。

＞フォームサンプルページ

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。 

windows：Ctrl + U 
mac：option + command + U

＞フォームサンプルダウンロード

【フォーム】ラジオボタンの作り方

■見本

下記フォームサンプルページを元に説明します。 
フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード

※ソースコード確認方法
対象ページを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"はバリデーションの表示位置を指定
⑨選択肢の画像を指定
⑩選択支の表示テキストを指定

解約・休止・サイクル変更フォーム内の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つに分けて運用をお願いします。
 なお本人確認の内容にかかわらない情報取得の場合は、併用可となります。

 本人確認フォームについてはこちら＞

オリジナルフォーム（LIFF）のアクセス数を計測する方法

オリジナルフォーム（LIFF）のアクセス数を計測するには短縮URLを使用し、リッチメニューのクリック数を計測します。
（※リッチメニューのクリック数 ＝ LIFFアクセス数）

1.コンテンツ　＞　リッチメニュー

↓
2.オリジナルフォーム（LIFF）が立ち上がるリッチメニューを編集

↓
3.①リンクURLをコピー
　②短縮URLを開く

↓
4.作成と編集

↓
5.①管理名
　②３でコピーしたURLをペースト（貼り付け）する
　③チェックを入れる
上記入力後保存してください。
※LINEログイン認証にはチェックを入れないでください。

↓
6.短縮URLに変更になっていることを確認し、保存

↓
7.分析　＞　短縮URL

↓
8.対象の計測項目をご確認ください。

【フォーム】画像の追加方法

下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U

【編集ファイル】
index.html

①画像の挿入箇所に<figure></figure>で囲われている部分をコピー＆ペーストしてください。
②画像のパスを設定
※画像のパス（画像名）は文字化け防止のため、半角英数字にしてください。
③画像名を記入（表示はされません、設定なしでも可、altは日本語可）

サンプルコード（コピー＆ペースト用）

<figure>
	<div><img src="images/bnr3.png" alt="追加画像"></div>
</figure>

【解約・休止・サイクル変更・スキップ】エントリーフォームのテスト送信方法

（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

(1)ポップアップを発動させたい回答に「onClick="showModal();"」を設定


(2)ポップアップバナーの表示部分のHTMLを設定
①ポップアップバナー画像、ボタン画像設置
②完了バナー画像、閉じるボタン設置


(3) (1)で呼び出す「showModal()」、完了バナー(サンクスバナー)の挙動設定
フォーム離脱時にタグを付与する場合は、AddTagにタグコードを貼り付けてください。


（4）バナー部分のスタイルの設定

【フォーム】すべての入力が完了したらイベントを発生させる方法

下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U


【編集ファイル】
index.html

①質問1が全部入力されると質問2が表示される

②htmlコード

③JS処理部分（質問1が全部入力されると質問2が表示される）

オリジナルフォーム（LIFF）の種類、設定について

【フォームの種類について】
オリジナルフォーム（LIFF）は大きく下記の2種類に分けられます。
①解約・休止・サイクル変更フォーム
②その他のフォーム（本人確認フォーム含む）

①解約・休止・サイクル変更フォームで取得した情報はASSダッシュボード、受信BOXに反映されます。
②その他のフォームで取得した情報は受信BOXに反映されます。また本人確認フォームとして設定しますと、取得した情報を会員リストの顧客情報として反映することができます。


【設定方法について】
LIFFの設定画面でフォーム種類を選択し、保存してください。



【注意事項】
オリジナルフォームの編集画面で、現在アップロードされているフォームの種類が確認できます。
こちらのフォーム種類とLIFFの設定フォームは同じにしてください。
異なりますとオリジナルフォームから正常にデータを取得できません。


アップロードされているフォームの設定方法につきましては。各フォームの詳細設定ガイドをご参照ください。

⇒解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール

⇒本人確認フォーム内のcol(name属性)の記載ルール

フォーム内質問と設定col(name属性)の確認方法

（1）コンテンツ　＞　LIFF

↓

（2）対象フォーム　の　「フォーム修正」選択

↓

（3）すべてを開く

↓

（4）フォーム内質問とそちらに紐づいている設定col(name属性)の確認を行えます。
※二重に定義されていると、後に定義されているcolで上書きされ、一部受信が出来なくなります

【フォーム】マイクロコピーの追加

上記のように質問内容のテキストより少し小さいフォントサイズでマイクロコピーを入れたい場合は、
下記コードをコピーして、挿入箇所へペーストしてください。
改行したい場合は<li>～</li>を増やします。

<ul class="note">
	<li>※こちらに表示したいテキストを記入してください。</li>
	<li>※こちらに表示したいテキストを記入してください。</li>
</ul>

※ class="note"でスタイルの調整を行っております。

1：1トーク画面に表示されるLIFFの最大数

1：1トークの右サイドメニューにあるLIFFは最大5件までの表示になっております。

それ以上の表示は、右サイドメニュ【詳細】をクリックして個人詳細ページでご確認ください。

フォーム離脱時に、サンクスバナーを表示してタグを付与する方法

画面操作途中におけるタグ付与設定が必要になります。
オリジナルフォームの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）のアップロード方法」の手順に沿ってファイルをアップロードする。

付与したタグの動作確認方法は下記をご参照ください。
> 付与したタグの動作確認方法

【解約・休止・サイクル変更・スキップ】申請フォームのHTMLファイル内容説明

フォームファイル内にあるindex.html（入力ページ）の詳細説明です。
ソースコード内にコメントアウトで説明の記載があります。
下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。

＞フォームサンプルページ

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。

windows：Ctrl + U
mac：option + command + U

＞フォームサンプルダウンロード

フォームテスト環境の作成方法

本番環境へアップロードする前に動作テストを行いたい場合は、テスト用のLIFFを別途ご登録頂いてテスト送信を行ってください。

（1）コンテンツ>LIFF　ページに移動

↓
（2）　「作成」ボタンをクリック

↓
（3）テスト用のLIFFを作成する
LIFF管理名には「テスト」などわかりやすくする
※解約・休止・サイクル変更に関わるフォームの場合は、「解約」「休止」「サイクル変更」の文字列をLIFF管理名に必ず入れて登録してください。
※解約・休止・サイクル変更に関わるフォーム以外の場合は、「解約」「休止」「サイクル変更」の文字列を含まないよう設定してください。

画面サイズを選択（特に指定のない場合は「Full」を選択）
オリジナルフォームにチェック、「保存する」をクリック

↓
（4）　作成したフォームの右側「フォーム編集」をクリック

↓
（5）「参照」ボタンをクリックしてテスト送信したいフォームデータを選択、「保存する」をクリック

フォームデータのダウンロード方法は下記を参照ください。
＞既存のオリジナルフォーム（LIFF）のダウンロード方法

↓
（6）　⑪プレビュー、⑫設問内容をご確認できます。

※【解約・休止・サイクル変更・スキップ】申請フォームの場合、ASSダッシュボードに「お客様申請」と「テスト申請」が混在する形となる為、「名前○○の申請は処理しない」など社内ルールの周知をしていただけたらと思います。

テスト送信につきましては下記を参照ください。
＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法

フォームアップロード後のチェック項目につきましては下記を参照ください。
＞【簡易版】フォームアップロード後のチェック項目