※重要 ロゴマークを消してテンプレートフォームを使用できるのは、「LINE公式アカウント機能拡張プラン」「オートコールセンタープラン」となります。 フリープランの方でロゴマークを消しているテンプレートフォームを使用していることが分かった際は、即時利用停止にすることがあります。 （１）対象フォームをダウンロード フォームのダウンロード方法はこちら＞ ↓ （２）ダウンロードしたファイルを解凍し、htmlファイルの<footer>部分を削除かコメントアウトする
<footer><img src="images/logo.png" alt="ECAI"></footer>
↓ （３）ファイルを圧縮し、アップロード アップロードについてはこちら＞ ↓ （４）スマホよりテスト送信を行い、意図した表示になっているかご確認下さい。 本人確認フォームのテスト送信方法＞チェックボックスのチェック数によって付与するタグを変える方法
■目的 複数選択のチェックボックスで、選択項目それぞれにタグを付与します。 チェックボックスの作成方法はこちら＞ ■セット所要時間 30分 ■サンプルコード フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U ■セットの流れ フォーム送信時にチェックされている数を数えて、その個数によってそれぞれタグを付与します。 タグコードに本番用のタグコードをご設定ください。 ※デフォルトタグは必要な場合に設定してください。
<script>
//送信時処理
$(function () {
$('.btn-submit').on('click', function () {
if ($("#form-name").validationEngine('validate')) {
//連打防止ローディング
$('.btn').hide();
$('.loading').show();
var tags = ['デフォルトタグ'];//デフォルトタグ設定
var val = $('.trigger input:checkbox:checked');
var count = val.length;
if(count == 0){
tags.push('タグコード1');//チェックなし
}
else if(count >= 1 && count < 4){//1以上4未満
tags.push('タグコード2');
}
else if(count >= 4 && count < 6){//4以上6未満
tags.push('タグコード3');
}
else if(count == 6){//全選択
tags.push('タグコード4');
}
//申請時タグに配列のtags追加
document.getElementById("add_tags").value = tags;
// return false;//コメントアウト外すと送信されません
}
});
});
</script>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。オリジナルフォームの完了ページを閉じたときに白紙ページが残る場合の対処法
■目的 オリジナルフォームの完了ページを閉じたときに白紙ページが残ってしまうときの対処方法です。 ケースとしては短縮URLでLIFF-URLを使用した際などになります。 ■セット所要時間 10分 ■セットの流れ オリジナルフォームを編集します。 編集方法に関してはこちら＞ （１）友だち登録URLをコピーします 友だち登録URLの確認方法はこちら＞ （２）complete.htmlの編集 完了ページには概ね閉じるボタンがあると思いますのでそちらを編集します。 ない場合は新たに作成してください。 閉じるボタンのaタグにonclickイベントがある場合は削除します。 そしてhref属性を追加し、先ほどコピペした友だち登録URLをセットしてください。
（３） ファイル編集後、閉じるボタンを押してトーク画面が表示されるか確認をして下さい。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。オリジナルフォームの入力制限について
validationEngineというプラグインを使用しています。 公式ページ＞ 使用例は公式ページ以外に、日本語での説明サイトも多数あります。 そちらも併せて参照下さい。 弊社フォームサンプル フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U mac：option + command + U
■必須入力にする 対象のinputのclassに下記を設定
class="validate[required]" ■文字数制限 対象のinputのclassに下記を設定
class="validate[required,minSize[15]]"※例は15文字制限ですが、適宜ご変更下さい。【フォーム】申請種別の内容を複数設定する方法
フォーム（LIFF）の中で申請種別（col_1）で設定した内容が管理画面に申請内容として表示されます。 複数の質問から申請種別（col_1）を設定したい場合は、最終回答が「col_1」になるようにしてください。 下記フォームサンプルページを元に説明します。 ブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード(24) ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U 対象ファイル：index.html （1）申請種別（col_1）に内容を設定したい質問を下記のようにします。 ①表示させたい申請内容 ②col_1に申請内容をセットするクリックイベント
↓ （2）②で呼び出すクリックイベントの設定 フォーム下部の<script></script>の中に記述する
「オリジナルフォーム」と「短縮URL」の機能使用時にユーザーに見えます。
どのように見えるかは下記画像にてご確認ください。
▼オリジナルフォーム
フォーム展開するとページ上部に表示されます。
▼短縮URL
短縮URLはサブドメインが含まれたURLで発行される仕様となります。
■目的 何かしらの予約などをする際に、日時を取得したい時などに使用します。 テキストで入力してもらうことも可能ですが、カレンダーやラジオボタンを使用することでスムーズに日時の取得をすることができます。 ■セット所要時間 30分 ■セットの流れ サンプルページをダウンロードしてご希望のLIFFへアップロードすることですぐにご使用いただけます。 ただしデフォルトから変更が必要な場合は、要件に合わせてご変更をお願いします。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U オリジナルフォームの編集やアップロードにつきましては下記ガイドを参照ください。 オリジナルフォームの編集方法＞ （１）デフォルトの設定について ①カレンダー部分 ・初期表示は当日 ・土日祝日は選択付加 ・当日から１か月後まで選択可 ②時間帯 ・チェックボックス or プルダウン選択（第二希望まで） （２）土日祝日の制御について ①2025年以降の祝日や、特定の日付を指定する場合はこちらのリストに追加してください。
②土日祝日を選べるようにするには303～318行目のbeforeShowDayを下記のようにコメントアウトとするか削除してください。
（３）表示期間を制限ついて 表示期間を制限するには下記部分を変更してください。デフォルトは１か月の表示になります。 制限をかけない場合は該当箇所をコメントアウトとするか削除してください。
また当日を入れない場合は、minDateの値を「today」から「1」に変更してください。 例）
minDate : 1,（４）時間帯について
時間帯の入力につきましてはチェックボックス or プルダウン選択が用意されています。 どちらか使用されない方をコメントアウトとするか削除してご使用ください。
ガイドの内容はあくまでもサンプルになります。 ご希望の要件にあわせて編集をお願いします。 またデザイン変更や入力制限などの設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：5,000円(税別)～オリジナルフォームをアップロードしたけどプレビューがローディング画像から変わらない
オリジナルフォームをアップロードしたけどプレビューがローディング画像から変わらない場合は、 一旦保存をしていただいてから再度プレビュー画面をご確認をお願いします。 ※アップロードされる際は元データのバックアップ（ダウンロード）は必ず行ってください。フォーム離脱時にタグを付与する方法
フォーム離脱時にタグを付与する方法になります。 オリジナルフォームの編集が必要となりますので 下記フォームサンプルページのソースコードと併せてご確認いただくとわかりやすいです。 フォームサンプルページ＞ ダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U Javascriptのコードにおいて予め「AddTag」をcallしてタグをセットした上で、「AddTagProc」をcallしてください。 例：AddTag("タグコード"); 例：AddTagProc(); フォームを閉じるときは「liffclose」をcallしてください。 例：liffclose(); 【設定方法の詳細】 （1）「AddTag()」「AddTagProc()」「liffclose()」関数についてはbody終了タグ上部にまとめて記述しておく ※記述がない場合はコピペしてください。
<!-- 削除禁止 -->
<script>
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>
<!-- 削除禁止 -->↓ （２）付与されるタグを格納するinputを設置
<!-- 削除禁止 --><input type="hidden" id="addtag"><!-- 削除禁止 -->↓ （３）離脱時（設問選択時）に設定した関数３つをcall ※タグコードは実際のものに置き換える
<script>
$(function () {
$('.q :radio').on('change', function () {
if ($('.q :radio:checked').val() == '継続する') {
AddTag('タグコード');//タグ設定
AddTagProc();//タグ送信
liffclose();//LIFF閉じる
}
});
});
</script>↓ （４）記述が終わりましたら、付与したタグの動作確認を行ってください。 付与したタグの動作確認方法＞【オリジナルフォーム】入力制限をなくす方法
■目的 オリジナルフォームの入力制限（必須入力）をなくす方法の説明になります。 入力制限については、「jQuery-Validation-Engine」というプラグインを入れています。 公式サイトはこちら＞ ■セット所要時間 ３分 ■セットの流れ 入力フォームの「input」タグについている「class="validate[required]"」を削除する。 フォームの編集方法はこちら＞ またその他の入力制限を行いたい場合は、 「jQuery-Validation-Engine」を検索いただくと日本語の説明サイトも複数ありますので、そちらを参考に設定をお願いします。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。WEBページにオリジナルフォームを埋め込む方法
■目的 WEBページにオリジナルフォームを設置することで、そこで取得した情報をECAI上で扱うことができます。 ■セット所要時間 20分 ■セットの流れ 任意のオリジナルフォームを用意し、そちらに設定されているLIFF-URLをECAIの短縮URLに変換します。 ECAIで設定された短縮URLはWEB上で開くと自動でLINEアプリが立ち上がりますので、LINEブラウザ上でフォームの入力を行うことができます。 ※PCからのアクセスの場合はLINEアプリが開けないため、可能なのはスマホのみの動作限定となります。 PCからのアクセスの際にスマホとは別の処理が必要な場合は、別途コーディングをしてご対応ください。 （１）オリジナルフォームの作成 オリジナルフォームを作成し、LIFF-URLをコピーしてください。 LIFF-URLは下記ガイドの「呼び出しURLをコピー」の部分を参照してください。 ※すでに作成済みの場合は次の項目へ オリジナルフォームの使い方＞ （２）短縮URLの設定 上記でコピーしたLIFF-URLを短縮URLに設定してください。 （３）任意のWEBページに短縮URLを設置 スマホで設置した短縮URLをタップし、LINEが立ち上がってフォームが表示されれば設定は完了です。LIFFオリジナルフォームの回答したユーザーをステップメッセージから除外する方法
▼手順
①オリジナルフォームで、送信ボタンを押したらタグを付与する。
┗設定方法はこちら＞
↓
②ステップメッセージの絞り込みで「①」のタグを除外タグとして設定。
┗ステップメッセージの作成方法はこちら＞
■目的 アップロードしたいZIPファイルが20MBを超えているとアップロードできないので、その時の回避方法の説明します。 アップロードの方法はこちら＞ ■セット所要時間 5分 ■セットの流れ まず方法ですが、ZIPファイルが20MBを超えない重さにする必要があります。 LIFFをアップロードする際の仕様の話ですが、アップロードする際に古いファイルは削除されず新しいファイルが上書きされる仕様となります。 そのためすでにアップロードがされている画像ファイルをに関してはアップロードしなくても問題ありません。 LIFFファイルをZIPにする前に、既存の画像データに関しては一旦削除いただき、ZIPファイル全体が20MB以下になるように調整をお願いします。 アップロード後は画像がちゃんと表示されているかのご確認をお願いします。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【オリジナルフォーム】2つの質問の回答を1つのname属性にまとめる方法
■目的 通常はname属性を2つに分ければ良いのですが、何らかの理由で2つの質問の回答を1つにまとめる必要があるときに使用します。 実装にはJavascriptの知識が必要となります。 ■セット所要時間 10分 ■セットの流れ サンプルページをベースに説明しますので下記ファイルをダウンロードしてください。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （１） サンプルページではname属性のcol_1に2つの回答を持たせる処理を実装します。 name属性の記載ルールにつきましてはこちら＞ ①col_1(連番は任意)のタイトルと回答をtype="hidden"にする。回答の方には任意のid属性を振る（今回はid="col_1"） ②１つ目の回答に任意のid属性を振る（今回はid="q1"） ③１つ目の回答に任意のname属性を振る（今回はname="q1"） ④２つ目の回答に任意のid属性を振る（今回はid="q2"） ⑤２つ目の回答に任意のname属性を振る（今回はname="q2"）
<section class="person-form">
<dl>
<input type="hidden" name="col_1_title" value="設問１、設問２">
<input type="hidden" id="col_1" name="col_1" value="">
<dt>設問１<span>*</span></dt>
<dd><input id="q1" type="text" name="q1" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft"></dd>
<dt>設問２<span>*</span></dt>
<dd><input id="q2" type="text" name="q2" placeholder="入力してください" class="validate[required]" data-prompt-position="topLeft"></dd>
</dl>
</section>↓ （２） 設問が回答されたタイミングで２つの設問の回答をname属性のcol_1にまとめる
<script>
$('#q1, #q2').on('change', function () {
let q1 = $('#q1').val();
let q2 = $('#q2').val();
if (q1 !== '' && q2 !== '') {
$('#col_1').val(q1 + ',' + q2);
}
});
</script>ユーザーがオリジナルフォームの入力中に、管理画面からフォームの内容が更新された場合、 入力中のフォームは更新前の内容で送信されます。既存の入力チェックを使用して、独自のチェックを行う方法
■目的 既存の入力チェックでは設定ができない内容は、独自のチェックを設定する必要があります。 ■セット所要時間 １０分 ■セットの流れ 対象の回答部分に指定の設定を行います。 サンプルの例は、「いいえ」にチェックが入ることで独自のテキストでバリデーションが入ります。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （１）回答部分のinputのclassに独自の関数を呼び出す設定 例）
<input type="radio" name="col_1" class="validate[funcCall[checkComment],required]" value="いいえ">（２）独自関数の内容を設定 こちらでエラーテキストの設定をします 例）
<script>
// 独自関数
function checkComment(field, rules, i, options){
if ($('.q_a :radio:checked').val() == 'いいえ') {
return `いいえの場合、送信できません`;
}
}
</script>
LIFF設定のフォームの種類で、「その他フォーム」を選択したフォームの申請が未対応だった場合に表示されます。
★ただしLIFF名に「本人確認」という名前を使用した場合はホーム画面の「その他、未完了のフォーム申請」には反映されませんのでご注意下さい。
■目的 変更した箇所のソースコードを確認することで、その後に編集する際に参考にすることができます。 ■セット所要時間 5分 ■セットの流れ （１） まず差分を確認したいファイルの変更前、変更後それぞれを用意してください。 ↓ （２） それぞれのファイルをテキストエディターで開きます。 ※お使いのエディターで問題ありません。 ↓ （３） difffというオンラインで差分を確認できるサイトを使用しますので、下記サイトを開いて下さい。 difff＞ ↓ （４） ①、②のサンプルテキストは削除し、テキストエディターから変更前のファイルのソースコードをコピーして①にそれぞれ貼り付け下さい。 変更後のファイルのソースコードは②に貼り付け下さい。 その後③をクリック
↓ （５） ピンクのマーカー部分が差分（変更箇所）になります。
