テンプレートを使ってオリジナルフォーム(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)の新規作成

(1) コンテンツ > LIFF

(2) 「作成」ボタンをクリック

(3) LIFFの設定

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


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

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

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

【フォーム】生年月日の入力フォームの作り方
下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
フォームサンプルページフォームサンプルダウンロード(12)>

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




【編集ファイル】
index.html

①タイトルを設定(※name属性は組み込む内容に合わせて適宜変更)
②生年月日をつなげた文字列を格納
③年選択
④月選択
⑤日選択
⑥JS処理部分
・年、月、日が全部選択されると質問2が表示される
・生年月日それぞれのセレクトボックスの値を連結させて格納
オリジナルフォーム(LIFF)のアップロード方法
(1)対象フォームの選択
 ↓
(2)ZIPファイルをアップ
ZIPファイルの構造はルートフォルダ(一番上)の配下にindex.htmlがある状態にしてください。
>ZIPファイルの構造説明


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

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

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


 ↓
(3) プレビューを確認して保存

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

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

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

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

オリジナルフォームで、送信ボタンを押したらタグを付与する方法
送信ボタンを押したときにタグを付与するには、対象のオリジナルフォームのHTMLファイル内にタグをセットする必要があります。

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


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

↓

(2)index.htmlをご使用のテキストエディターで開きまして、
「id="add_tags"」の「value」に付与したいタグコードを記述してください。
>タグコードとは

記述後ファイルの上書きを忘れずにしてください。

↓

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

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

【注意点】
 同じフォームで複数回の送信が行われると、その度にタグが付与されます。
そのためタグ付与によるアクションなども、送信毎に配信される仕様となります。
 ※すでに指定のタグが付与されている場合に、「タグ解除・タグ付与」を同時に行ってるため

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

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

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

(1)サイドメニューASS > 受信BOX

(2)該当フォームを選択

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

(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)入力時の処理
①. ②と③で入力された郵便番号が送信用に格納されます。
②. 郵便番号の前3ケタ
③. 郵便番号の後4ケタ
④. 入力後、都道府県、市区町村まで自導入力します。
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つに分けて運用をお願いします。
なお解約・休止・サイクル変更にかかわらない運用の場合は、併用可となります。

解約・休止・サイクル変更フォームについてはこちら>
フォームの圧縮方法について
解凍されているファイルをZIPファイルに圧縮する場合はindex.htmlが存在する階層を全選択して圧縮する必要があります。 


■Mac , Windows
デフォルト(標準)で使用できる圧縮ツールで対応可能です。
フォルダの中を開いて、index.htmlが存在する階層のファイルを全選択して圧縮してください。
zipという圧縮ファイルが生成されます。
※表示画像はWindowsです。



下記ツールをお使いいただくと簡単に圧縮できます。
インストールしてご使用ください。

■Windows版のみ
>全選択可能な圧縮ツール(推奨)
※通常は64ビット版ダウンロード、パソコンCPUが32bitの場合は32ビット版を使用
※圧縮前にファイル内のデータ名に文字化けがないかご確認ください。

①ファイルを右クリック > 書庫作成
↓
②「フォルダより下のファイルを圧縮」をチェック > OK
【フォーム】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」だけ未作成・アップロードされていない場合、送信後の画面が表示されない状態となりますので、ご注意ください。

オリジナルフォーム内の各質問にあるname属性(col)の記載ルール
下記フォームサンプルページのソースコードと併せてご確認ください。
フォームサンプルページ>
フォームデータダウンロード>

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



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

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

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

(5)フォームをアップロード後、タイトルと回答が正しく設定されているかご確認ください。
オリジナルフォームで、回答の選択ごとに付与するタグを分ける方法
■目的 
ラジオボタンで、回答の選択ごとに付与するタグを分ける方法についての説明です。
その他の形式の場合は、下記を参照してください。

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

セレクトボックス(プルダウン)のタグ付与方法はこちら>


■セット所要時間 
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)のダウンロード方法

(1)コンテンツ > LIFF

(2)対象フォーム の 「フォーム修正」選択

(3)ダウンロード

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


解凍ツール(推奨)https://www.ponsoftware.com/archiver/download.htm
※ファイル内に文字化けがないかご確認ください。
本人確認フォームのテスト送信方法
(1)コンテンツ > LIFF
↓
(2)対象フォームの「LIFF呼び出しURL」をコピーする
↓
(3)1:1トークより友達登録している管理用アカウントや自分のアカウントを選択
 テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓
(4) ここからは実機での動作確認となります。
 友達登録しているスマホより送られたメッセージ確認
  「LIFF呼び出しURL」を開く
↓
(5)表示されたオリジナルフォームに内容を入力しエントリー(送信)する
↓
(6)送信結果は管理画面に戻り「受信BOX」よりご確認ください。

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

オリジナルフォームで、送信ボタンを押したらタグを削除する方法
送信ボタンを押したときにタグを削除するには、対象のオリジナルフォームの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

【オリジナルフォーム】氏名、フリガナ、電話番号を分けて入力する方法
■目的
名字と名前を分けて入力したいときや、電話番号の桁数を正確に入力したいときに使用します。

■セット所有時間
おおよそ30分

■セットの流れ

下記サンプルページを元に説明します。 
ファイルをダウンロードして内容をご確認ください。
サンプルダウンロード>
サンプルページ>

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


(1)氏名のセパレート入力
①style(30~36行目)
.first_and_last_name{
	display: flex;
}
.first_and_last_name > div{
	width: 40%;
	margin: 0 10px 0 0;
}

②html(88~99行目)
<!-- 氏名セパレート -->
<input type="hidden" name="col_1_title" value="ご注文時のお名前">
<input type="hidden" id="col_1" name="col_1_name" value="">
<dt>ご注文時のお名前<span>*</span></dt>
<dd class="first_and_last_name">
	<div>
		<input type="text" id="last_name" name="last_name" placeholder="姓" class="validate[required]" data-prompt-position="topLeft">
	</div>
	<div>
		<input type="text" id="first_name" name="first_name" placeholder="名" class="validate[required]" data-prompt-position="topLeft">
	</div>
</dd>

③Javascript(173~180行目)
//氏名
$('#last_name, #first_name').change(function () {
	var lastName = $('#last_name').val();//姓
	var firstName = $('#first_name').val();//名
	if (lastName != '' && firstName != '') { //全部選択しているかチェック
		$("#col_1").val(lastName + firstName); //姓名を格納
	}
});

(2)氏名(カナ)のセパレート入力
①style(30~36行目)
.first_and_last_name{
	display: flex;
}
.first_and_last_name > div{
	width: 40%;
	margin: 0 10px 0 0;
}

②html(100~111行目)
<!-- 氏名(カナ)セパレート -->
<input type="hidden" name="col_2_title" value="ご注文時のお名前(カナ)">
<input type="hidden" id="col_2" name="col_2_kana_name" value="">
<dt>ご注文時のお名前(カナ)<span>*</span></dt>
<dd class="first_and_last_name">
	<div>
		<input type="text" id="last_name_kana" name="last_name_kana" placeholder="セイ" class="validate[required,custom[katakana]]" data-prompt-position="topLeft">
	</div>
	<div>
		<input type="text" id="first_name_kana" name="first_name_kana" placeholder="メイ" class="validate[required,custom[katakana]]" data-prompt-position="topLeft">
	</div>
</dd>

③Javascript(181~188行目)
//氏名(カナ)
$('#last_name_kana, #first_name_kana').change(function () {
	var lastNameKana = $('#last_name_kana').val();//セイ
	var firstNameKana = $('#first_name_kana').val();//メイ
	if (lastNameKana != '' && firstNameKana != '') { //全部選択しているかチェック
		$("#col_2").val(lastNameKana + firstNameKana); //セイメイを格納
	}
});

(3)電話番号のセパレート入力
①style(38~55行目)
.tel{
	display: flex;
}
.tel > div{
	width: 30%;
}
.tel > div:first-child{
	width: 25%;
}
.tel > div::after{
	content: "-";
}
.tel > div:last-child::after{
	content: "";
}
.tel input{
	width: 80%;
}

②html(112~126行目)
※各項目の入力桁数はminSize,maxSizeで調整してください。
<!-- 電話番号セパレート -->
<input type="hidden" name="col_3_title" value="電話番号">
<input type="hidden" id="col_3" name="col_3_tel" value="">
<dt>電話番号<span>*</span></dt>
<dd class="tel">
	<div>
		<input type="tel" id="tel_first" name="tel_first" placeholder="0 8 0" class="validate[required,custom[number],minSize[2],maxSize[4]]" data-prompt-position="topLeft">
	</div>
	<div>
		<input type="tel" id="tel_second" name="tel_second" placeholder="1 1 1 1" class="validate[required,custom[number],minSize[3],maxSize[4]]" data-prompt-position="topLeft">
	</div>
	<div>
		<input type="tel" id="tel_third" name="tel_third" placeholder="2 2 2 2" class="validate[required,custom[number],minSize[3],maxSize[4]]" data-prompt-position="topLeft">
	</div>
</dd>

③Javascript(189~197行目)
//電話番号
$('#tel_first, #tel_second, #tel_third').change(function () {
	var telFirst = $('#tel_first').val();
	var telSecond = $('#tel_second').val();
	var telThird = $('#tel_third').val();
	if (telFirst != '' && telSecond != '' && telThird != '') { //全部選択しているかチェック
		$("#col_3").val(telFirst + telSecond + telThird); //電話番号を格納
	}
});
新機能#09┃【一括処理で効率アップ!】受信BOXの一括でタグ、フラグ編集、CSVダウンロードが可能に!

返金保証や、予約販売などオリジナルフォームで収集したデータを集める

受信BOXにて一括処理が可能になりました!

▼可能になった一括処理

・一括タグ付与、削除
・一括フラグ付与、削除
・CSVダウンロード


今まで1件ずつ処理していた作業がこれで一括でできるようになり一気に作業時間を短縮できます!

【オリジナルフォーム】表示・非表示の出し分け設定
下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
フォームサンプルページ>
フォームサンプルダウンロード>

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




【使用ファイル】
(A) index.html
(B) css/style.css


(パターン1)設問の選択で、次の設問を表示する
(B) css/style.css
初期表示で非表示にしたい設問はcssで非表示にしておく
初期表示したい設問は表示にしておく
(A) index.html
changeイベントを使用して、選択時に次の設問を表示させる
(パターン2)設問の選択内容によって、表示を出し分ける
(A) index.html
changeイベントとif文を使用して、選択ごとに次の設問を出し分ける
オリジナルフォーム(LIFF)のアクセス数を計測する方法
オリジナルフォーム(LIFF)のアクセス数を計測するには短縮URLを使用し、リッチメニューのクリック数を計測します。
(※リッチメニューのクリック数 = LIFFアクセス数)
1.コンテンツ > リッチメニュー
↓
2.オリジナルフォーム(LIFF)が立ち上がるリッチメニューを編集
↓
3.①リンクURLをコピー
 ②短縮URLを開く
↓
4.作成と編集
↓
5.①管理名
 ②3でコピーしたURLをペースト(貼り付け)する
 ③チェックを入れる
上記入力後保存してください。
※LINEログイン認証にはチェックを入れないでください。
↓
6.短縮URLに変更になっていることを確認し、保存
↓
7.分析 > 短縮URL
↓
8.対象の計測項目をご確認ください。

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

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

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

windows:Ctrl + U 
mac:option + command + U

>フォームサンプルダウンロード
【フォーム】ラジオボタンの作り方

■見本

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

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

windows:Ctrl + U
mac:option + command + U





(パターン1) 2カラム・ラジオボタン

■見本

フォームサンプルページの質問4が「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つに分けて運用をお願いします。
 なお本人確認の内容にかかわらない情報取得の場合は、併用可となります。

 本人確認フォームについてはこちら>
【フォーム】すべての入力が完了したらイベントを発生させる方法
下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
>フォームサンプルページフォームサンプルダウンロード

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




【編集ファイル】
index.html

①質問1が全部入力されると質問2が表示される
②htmlコード
③JS処理部分(質問1が全部入力されると質問2が表示される)
【オリジナルフォーム】回答内容によって複数のタグを付与する方法
■目的
フォーム送信時の回答内容によって複数のタグを付与します。
複数のタグをすることで付与したタグを使用して属性、趣味嗜好をもとにターゲットに合ったメッセージ配信が可能になります。 


■回答内容によって複数のタグを付与するケース 
※下記は一例となります
・選択した商品ごとにタグ付与を出し分ける(例:商品1を選択した際は商品1のタグを付与) 
・選択した性別ごとにタグ付与を出し分ける(例:女性を選択した際は女性のタグを付与) 
・選択した誕生月ごとにタグ付与を出し分ける(例:1月を選択した際は1月のタグを付与)


■セット所要時間
30分


■セットの流れ
オリジナルフォームのHTML、Javascript編集が必要になります。
オリジナルフォームの編集方法>

下記サンプルフォームのソースコードをご参照ください。
サンプルフォーム>
サンプルフォームダウンロード>

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


こちらのサンプルフォームでは質問1のラジオボタン、質問4のプルダウンで選択した回答それぞれにタグが付与されます。

付与するタグの作成方法はこちら>

フォームを送信するときの処理にタグを付与する設定を行います。
下記コードを参照いただき、送信時の設定を追加してください。
すでに送信時の処理が書かれている場合は、そちらに追記をお願いします。
①送信タグを格納する変数設定、デフォルトで指定のタグを付与したい場合はこちらに追加
②質問1で選択されたvalue取得
③質問1の回答に合わせて、作成したタグコードを設定します
④質問4で選択されたvalue取得
⑤質問4の回答に合わせて、作成したタグコードを設定します
⑥すべてのタグを送信


〈コピペ用コード〉
<script>
	//送信時処理
	$(function () {
		$('.btn-submit').on('click', function () {
			if ($("#form-name").validationEngine('validate')) {
				//連打防止ローディング
				$('.btn').hide();
				$('.loading').show();

				var tags = ['デフォルトタグ'];//デフォルトタグ設定

				//質問1の選択されたvalue取得
				var product = $('.item input:radio:checked').val();

				//tagsにタグ追加
				switch (product){
					case '商品1':
						tags.push('タグコード1');
						break;
					case '商品2':
						tags.push('タグコード2');
						break;
					case '商品3':
						tags.push('タグコード3');
						break;
					case '商品4':
						tags.push('タグコード4');
						break;
				}

				//質問4の選択されたvalue取得
				var gender = $('.gender select option:selected').val();

				//tagsにタグ追加
				switch (gender){
					case '男性':
						tags.push('タグコード5');
						break;
					case '女性':
						tags.push('タグコード6');
						break;
				}

				//申請時タグに配列のtags追加
				document.getElementById("add_tags").value = tags;

				//return false;//コメントアウト外すと送信されません
			}
		});
	});
</script>

ガイドの内容はあくまでもサンプルになります。  そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。   表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。  ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
オリジナルフォームで画像をアップロードする方法
■目的
オリジナルフォームで画像を取得したい場合に使用します。
取得した画像は、受信BOX、1:1トーク内で確認ができます。

※画像を選択する際は、ファイルから選択するか、カメラ起動かで選ぶことができます。


■セット所要時間
10分


■サンプルコード 
フォームサンプルページ> 
フォームサンプルページダウンロード> 
※ソースコード確認方法 
windows:Ctrl + U  
mac  :option + command + U 


■セットの流れ
オリジナルフォームの編集方法につきましてはこちら>

(1)<form>タグに「enctype="multipart/form-data"」を指定する
例)
<form id="form-check" novalidate method="POST" action="###formurl###" enctype="multipart/form-data">

(2)画像添付用のフォームを作成
name属性は記載ルールに従ってご変更ください。
例)
<input type="hidden" name="col_8_title" value="添付画像">
<dt>添付画像<span>*</span></dt>
<dd>
	<label>
		<input type="file" name="col_8">
		<span>ファイルを選択して下さい</span>
	</label>
</dd>

(3)デザインの調整
サンプルページのスタイルに合わせる場合にご使用ください。

▼スタイル調整
.check input[type="file"]{
  display: none;
}

.check input[type="file"] + span {
  display: block;
  width: 100%;
  padding: 8px;
  font-size: 5vw;
  box-sizing: border-box;
  border: 1px solid #d8d8d8;
  border-radius: 3px;
  background: #fff;
  line-height: 1.4;
}
▼ファイル添付時の表示切替
<script>
	//添付画像のUI調整
	$('input[type="file"]').on('change', function () {
		var file = $(this).prop('files')[0];
		$(this).next().text(file.name);
	});
</script>

(4)フォーム送信後、取得した画像を「受信BOX」、「1:1トーク」内のLIFFで確認

▼受信BOX
▼1:1トーク内のLIFF
※画像のみ投稿可能となり、画像以外の場合は受け付けない為、空となります。
※画像のサイズは10MBが上限となります。それ以上の場合は受け付けない為、空となります。


ガイドの内容はあくまでもサンプルになります。 
そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 
 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。
 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
【オリジナルフォーム】ポップアップバナー設定

■見本

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

サンプルページ>
サンプルページダウンロード>
※ソースコード確認方法
サンプルページをChromeブラウザで開いて下記操作を行ってください。
windows:Ctrl + U
mac:option + command + U



■仕様
・質問2の解約を選択すると、ポップアップバナーが表示されます。
・ポップアップバナーで解約が阻止された場合は指定のタグが付与されます。
・<!-- 削除禁止 -->部分はデータの送信に必要なので削除しないでください。


■編集ファイル:index.html

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

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

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

(4)バナー部分のスタイルの設定
【フォーム】送信時タグ付与の動作確認方法
(1)コンテンツ > LIFF
↓
(2)対象フォームの「LIFF呼び出しURL」をコピーする
↓
(3)1:1トークより友達登録している自分のアカウントを選択
テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓
(4) ここからは実機での動作確認となります。
友達登録しているスマホより送られたメッセージ確認
 「LIFF呼び出しURL」を開く
↓
(5)表示されたオリジナルフォームに内容を入力しエントリー(送信)する
↓
(6)管理画面に戻り、会員 > 会員リスト を表示
↓
(7)対象会員 > 詳細
↓
(8)想定通りのタグが付与されているか確認

タグの編集方法につきましては下記を参照ください。
タグの編集方法
【フォーム】画像の追加方法
下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
>フォームサンプルページフォームサンプルダウンロード

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




【編集ファイル】
index.html

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

サンプルコード(コピー&ペースト用)

<figure>
	<div><img src="images/bnr3.png" alt="追加画像"></div>
</figure>
LIFFの送信完了ページで「閉じるボタン」を押した際にタグ付与方法
送信完了ページにてタグ付与する方法になります。
オリジナルフォームのcomplete.htmlの編集が必要となりますので、対象ファイルをダウンロードします。

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


下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。
> フォームサンプルページ
DL:フォームサンプルページ

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


ダウンロードが終わりましたらファイルを解凍し、complete.htmlをご使用のテキストエディターで開きます。
サンプルコードをもとに、必要な記述を4か所追加してください。


(1)head部分に下記を追加
サンプルコード(コピー&ペースト用)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

↓

(2)閉じるボタン部分にクリックイベント追加
サンプルコード(コピー&ペースト用)
onclick="AddTag('タグコード');AddTagProc();liffclose();"

↓

(3)LIFFの情報取得のための記述をコピー&ペースト
サンプルコード(コピー&ペースト用)
<!-- 削除禁止 --><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###"><!-- 削除禁止 -->
<!-- 削除禁止 --><input type="hidden" id="addtag"><!-- 削除禁止 -->

↓

(4)タグの送信用の記述をコピー&ペースト
サンプルコード(コピー&ペースト用)
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 () {}
	});
}


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

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

【解約・休止・サイクル変更・スキップ】エントリーフォームのテスト送信方法
(1)コンテンツ > LIFF
↓
(2)対象フォームの「LIFF呼び出しURL」をコピーする
↓
(3)1:1トークより友達登録している管理用アカウントや自分のアカウントを選択
 テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓
(4) ここからは実機でのLINE操作となります。
 友達登録しているスマホより送られたメッセージ確認
  「LIFF呼び出しURL」を開く
↓
(5)表示されたオリジナルフォームに内容を入力しエントリー(送信)する
↓
(6)送信結果は管理画面に戻り「受信BOX」よりご確認ください。

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


■LIFFとは?

LIFFの正式名称は、「LINE Front-end Framework」です。
「LIFFとは何か」をひとことで表すと「ウェブページをLINE上に表示できる仕組み」です。

ECAIでLIFFを使用する場合、「オリジナルフォーム」と「外部サイトを埋め込む」の2種類の使用方法があります。



■LIFFを使用するケース
下記ケースに当てはまらない場合はLIFFを使用する必要はありません。

・オリジナルフォームを使用してアンケートの回答を取得(ECAIに保存)する場合
・オリジナルフォームを使用してアンケートの回答ごとにタグを付ける場合
・オリジナルのURLをユーザーに表示したくないなどの理由から「外部サイトのURL」をLIFFの呼び出しURLで表示したい場合
・サイトを開いた際の画面サイズをTall(8割)、Compact(5割)で表示したい場合




■「オリジナルフォーム」を使用するメリット

・オリジナルフォームの送信データをECAIで使用したり、タグ付与ができます。
・htmlを使用したサイトを表示できる。
 ┗ファイル形式/ZIP(html, css, js, png, jpg)
 ┗ファイルサイズ/20MB以下
 ┗ファイルの構造について>
・Full(全画面)、Tall(8割)、Compact(5割)から画面サイズを選択できる。

オリジナルフォーム(LIFF)の新規作成>


■「外部サイトを埋め込む」を使用するメリット

・Full(全画面)、Tall(8割)、Compact(5割)から画面サイズを選択できる。
・LIFFアプリで開くため、ブラウザ内で操作できるメニューが限定される。
・URLがLIFFの呼び出しURLになる。
(例)line://app/1655906054-Xwlz4Lxo
※LINE内でWEBページを表示させるだけでしたら、「外部サイトを埋め込む」を使用する必要はありません。

外部サイトの設定方法>