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

(1) コンテンツ > LIFF

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

(3) LIFFの設定

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


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

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

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

オリジナルフォーム生成アプリの使い方
■目的
こちらのアプリは入力項目にテキストを打ち込むだけでオリジナルフォームを生成することができます。
これにより作業効率をアップさせることができるのと、HTMLの知識がない方でも誰でもオリジナルフォームを生成することができるようになります。

オリジナルフォーム生成アプリはこちら>

まず完成形のイメージとしては、下記のようなフォームが簡単に作成できます。
サンプルフォーム>



(1)サイドバーメニュー
①並べ替え
質問項目の並べ替えができます。

②データダウンロード
作成したデータを保管することができます。

③データ読み込み
②で作成したデータをこちらで読み込みます。

④リセット
入力内容をすべてクリアにします。

⑤上書き保存
データのダウンロード、プレビューの前に行ってください。

⑥プレビュー
作成したフォームの実際の見え方の確認ができます。

⑦LIFFダウンロード
ECAIにアップロードするためのデータをダウンロードします。

(2)フォームデザイン選択
シンプル型かチャット型のどちらかを選択してください。

(3)入力ページのヘッダー部分
①ページタイトル:ブラウザのタブ、フォームの最上部
②ヘッダー画像:ファイルを選択しアップロードして下さい
③ヘッダータイトル
④ヘッダーテキスト

(4)送信ボタン、タグコード
①送信ボタンテキスト
②詳細設定でフォーム送信時のリンク先を指定できます
③送信時タグコード:ここで設定したタグが送信時に付与されます

(5)質問項目の追加
+項目追加:プルダウンで下記7種類の質問やメッセージが追加できます
ラジオボタン
チェックボックス(※複数選択可)
プルダウン
1行テキスト入力
複数行テキスト入力
生年月日
メッセージ(テキストのみ表示)

【プレビューの補足】
プレビュー後にWindowsの場合、F12で開発ツールが開きます。スマホのマークをクリックするとスマホのプレビューに切り替わります。

(6)ラジオボタン
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
④回答の列数:1~3列の中で選択
⑤回答の設定
⑥回答追加
⑦削除
⑧タグコード:ユーザーその回答を選んだ時に指定のタグを付与

(7)チェックボックス
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
④回答の列数:1~3列の中で選択
⑤回答の設定
⑥回答追加
⑦削除

(8)プルダウン
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
④回答の設定
⑤回答追加
⑥削除

(9)テキスト入力(1行)
①必須:必須入力設定
②入力タイプ:名前、電話番号、メールを指定することでECAIの会員情報に紐づきます。デフォルトは指定なし
③質問:質問テキストの入力
④補足:やや小さめのフォントサイズで補足テキスト
⑤入力例の設定(入力すると消えます)

(10)テキスト入力(複数行)
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト
④入力例の設定(サンプルは設定なし)

(11)生年月日
①必須:必須入力設定
②質問:質問テキストの入力
③補足:やや小さめのフォントサイズで補足テキスト

(12)メッセージ
質問と質問の間で何かしらのメッセージを入れたい場合はこちらをご使用ください。

(13)完了ページ
完了ページを表示するには、入力ページを送信することで表示されます。
①ページタイトル:ブラウザのタブ、フォームの最上部
②ヘッダータイトル
③ヘッダーテキスト
④閉じるボタンテキスト

(14)LIFFファイルをアップロードする
(1)の⑥でダウンロードしたLIFFファイルをECAIの管理画面からZIPファイルのままアップロードして完成です。

LIFFのアップロード方法はこちら>

オリジナルフォームの新規作成はこちら>


また、ダウンロードしたLIFFファイルをさらに手動で編集することも可能です。

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

スケルトン状態からオリジナルフォームを作成する方法
■目的
テンプレートを使用せず、オリジナルフォームを作成する方法


■セット所要時間
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、チャットワークよりご依頼をお願いします。