（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管理名に「ライン」もしくは「LINE」という文字が入ると、LINEの仕様上保存できずエラーになるのでご注意ください。 ⑤フォームの種類を選択 ⑤-1 カート連携の即時判定を使用する場合は設定 ※API連携(カート)連携を設定している方のみ使用可能 ┗仕様についてはこちら＞ ⑥画面サイズを選択（特に指定のない場合は「Full」を選択） ⑦オリジナルフォームにチェック、「保存する」をクリック
LIFFの新規作成は以上となります。
この後は表示内容を設定します。
テンプレートから行う場合と、スケルトンの状態から作成する場合があります。
下記ガイドから表示設定を行ってください。
テンプレートを使って作成＞
スケルトンの状態から作成＞
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード（12）＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【編集ファイル】 index.html ①タイトルを設定（※name属性は組み込む内容に合わせて適宜変更） ②生年月日をつなげた文字列を格納 ③年選択
④月選択 ⑤日選択
⑥JS処理部分 ・年、月、日が全部選択されると質問2が表示される ・生年月日それぞれのセレクトボックスの値を連結させて格納
（1）対象フォームの選択
↓ （2）ZIPファイルをアップ
ZIPファイルの構造はルートフォルダ（一番上）の配下にindex.htmlがある状態にしてください。 ＞ZIPファイルの構造説明 ※1.アップロードファイルは圧縮されている必要があります。 ＞フォームの圧縮方法について ※2.圧縮する場合はindex.htmlが存在する階層を全選択して圧縮してください。 ＞全選択可能な圧縮ツール（推奨）ダウンロード ※3.ファイル内に文字化けがないかご確認ください。
↓
（3） プレビューを確認して保存
正常にファイルを読み込めない場合は下記ガイドをご確認ください。 ＞フォームの圧縮方法について プレビューが正常に表示されない場合は、一旦保存してから再度編集画面より確認してください。
↓ （4） ⑥一覧ページ、LIFF管理名のしたにある呼び出しURLを利用しLINEアプリより表示を確認
※⑦表示内容の下にあるURLはwebでデザインをチェックするときに使用するものです。
こちらで表示されるデザインは保証されるものではありません。確認の際は必ず呼び出しURLを利用しLINEアプリより確認をお願いします。
■目的 名字と名前を分けて入力したいときや、電話番号の桁数を正確に入力したいときに使用します。 ■セット所有時間 おおよそ３０分 ■セットの流れ 下記サンプルページを元に説明します。 ファイルをダウンロードして内容をご確認ください。 サンプルダウンロード＞ サンプルページ＞ ※ソースコード確認方法 サンプルページを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); //電話番号を格納
}
});
下記フォームサンプルページのソースコードと併せてご確認ください。 ＞本人確認フォームサンプルページ ＞フォームデータダウンロード ※ソースコード確認方法 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つに分けて運用をお願いします。 なお解約・休止・サイクル変更にかかわらない運用の場合は、併用可となります。 解約・休止・サイクル変更フォームについてはこちら＞オリジナルフォームで、送信ボタンを押したらタグを付与する方法
送信ボタンを押したときにタグを付与するには、対象のオリジナルフォームの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
↓
（２）該当フォームを選択
※フォームが追加されるとプルダウンに自動的に表示されます。
↓
（3）詳細
↓
（4）フォームで取得した情報を確認できます。
※フォームの内容は必ず呼び出しURLを利用しLINEアプリより送信をお願いします。
こちら以外から送信されたフォームの内容につきましては受信されません。
受信BOXの内容につきましては、変更、削除はできません。
フォームの圧縮方法について解凍されているファイルをZIPファイルに圧縮する場合はindex.htmlが存在する階層を全選択して圧縮する必要があります。 ■Mac , Windows デフォルト（標準）で使用できる圧縮ツールで対応可能です。 フォルダの中を開いて、index.htmlが存在する階層のファイルを全選択して圧縮してください。 zipという圧縮ファイルが生成されます。 ※表示画像はWindowsです。
下記ツールをお使いいただくと簡単に圧縮できます。 インストールしてご使用ください。 ■Windows版のみ ＞全選択可能な圧縮ツール（推奨） ※通常は64ビット版ダウンロード、パソコンCPUが32bitの場合は32ビット版を使用 ※圧縮前にファイル内のデータ名に文字化けがないかご確認ください。
①ファイルを右クリック ＞ 書庫作成
↓ ②「フォルダより下のファイルを圧縮」をチェック ＞ OK
■目的 オリジナルフォームをアップロードするにはZIPファイルにする必要があるのですが、解凍を行わないことで再度圧縮する手間が省けます。 ■セット所要時間 ５分 ■セットの流れ ※説明はWindowsになります。Macで行う場合はファイルを解凍してから編集を行なってください。 解凍後のファイルをアップロードするには圧縮が必要です。 （１） ①ZIPファイル上で右クリック ②プログラムから開く ③エクスプローラー
↓ （２） 編集したいファイルをドラック＆ドロップで、デスクトップなどにコピーします。
↓
（３）
コピーしたファイルをメモ帳などで開きます。
※Macの場合はデフォルトで使用できる「テキストエディット」を使用してください。
編集後、ファイルを保存します。（保存しないと変更されません）
↓
（４）
デスクトップの編集したファイルを、ZIPファイルの中へドラック＆ドロップで戻します。
その際にアラートが出ますが上書きを選択してください。
（※元ファイルが必要な場合はバックアップを別に保管しておいてください）
↓ （５） ECAIのLIFFへアップロードして編集内容が反映されているかご確認ください。
お使いの端末、環境によってできないこともありますので、その場合は一度解凍してから編集をお願いします。 オリジナルフォームの編集方法＞ 動作確認済み：Windows10【フォーム】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オリジナルフォーム内の各質問にあるname属性(col)の記載ルール
下記フォームサンプルページのソースコードと併せてご確認ください。 フォームサンプルページ＞ フォームデータダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac： option + command + U （1）必須コードにおいて、formタグのaction属性に「###formurl###」を指定した場合に限りこのルールが有効となります。 ※ECAI管理画面のLIFFのフォーム種類は「その他のフォーム」を選択してください。
（2）各質問のname属性におきまして、タイトル（送信内容のタイトル）と回答はセットで設定する必要があります。 （3）タイトルは必ずtype="hidden"で設定してください。
（4）「name」属性のcolの数字は質問の並び順に合わせてください。数字の順番に回答が取り込まれます。 新しい質問を追加したい場合は使用していない連番で記載してください。
（5）フォームをアップロード後、タイトルと回答が正しく設定されているかご確認ください。
■目的 オリジナルフォームの送信内容をスプレッドシートへ反映させる方法の説明になります。 （※ECAIにも同時に送信されます） ■セット所要時間 20分 ■セット方法 スプレッドシートへ反映を行うためには、Googleアカウントが必要になります。 無料で作成できますので、まずはアカウントを作成してください。 Googleアカウント作成＞
（１）オリジナルフォームの送信設定
下記のサンプルページをもとに説明します。 フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U オリジナルフォームの編集方法はこちら＞ ①index.htmlにスプレッドシートへの送信設定
【コピペ用】
//★スプレッドシートに送信設定
function OnPost(){
const URL = "スプレッドシートのApps Scriptをデプロイした時のURL";
//質問1，2の回答を取得
const c1 = $('.q1 :radio:checked').val();
const c2 = $('.q2 :radio:checked').val();
let SendDATA = {
"column_1" : c1,
"column_2" : c2,
};
let postparam = {
"method" : "POST",
"mode" : "no-cors",
"Content-Type" : "application/x-www-form-urlencoded",
"body" : JSON.stringify(SendDATA)
};
//スプレッドシートに送信
fetch(URL, postparam);
}↓ ②送信時に「OnPost();」を呼び出す
（２）スプレッドシートの設定
①スプレッドシートの新規作成 ＞ 拡張機能 ＞ Apps Script
↓ ② Apps Script設定 スプレッドシートへ書き込む処理は、それ以降の「doPost()」に設定します。 下記コードをコピペし保存します。 記入されたスプレッドシートの最後の行に追加されます。
【コピペ用】
function doPost(e){
let Sheet = SpreadsheetApp.getActiveSheet();
let JsonDATA = JSON.parse(e.postData.getDataAsString());
let currnetDate = new Date(); //現在の日時
Sheet.appendRow([currnetDate,JsonDATA.column_1,JsonDATA.column_2]);
}
↓
③ Apps Scriptの公開（デプロイ）
デプロイ ＞ 新しいデプロイ ＞ 設定 ＞ ウェブアプリ
↓
説明：任意の管理名
ウェブアプリ：自分
アクセスできるユーザー：全員
↓
承認画面は初回のデプロイ時のみの作業となります。
↓
スプレッドシートを作成したアカウントを選択
↓
Advancedをクリック
（※ボタンが小さいので注意）
↓
Go to 「スプレッドシートのタイトル」リンクをクリック
↓
Allowを選択
↓
デプロイが成功すると、ウェブアプリのURLが発行されますので、これをコピペします。
ここまででスプレッドシートの設定は完了です。
↓
コピペしたURLをオリジナルフォームに設定します。
（１）の①に戻っていただき、index.htmlへURLを設定し保存後、オリジナルフォームをECAIへアップロードして下さい。
（３）送信確認
オリジナルフォームから送信して、スプレッドシートへ反映されましたら設定は完了です。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせて編集をお願いします。 またチャットワークへの通知設定の設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：10,000円(税別)【オリジナルフォーム】日付のカレンダー入力
■目的 オリジナルフォームの日付入力時に、カレンダーを出して選択する方法のガイドです。 inputのdateタイプを使用した時に、デバイスによる差異をなくすことができます。 ■セット所有時間 おおよそ２０分 ■セットの流れ
下記サンプルページを元に説明します。 ファイルをダウンロードして内容をご確認ください。 サンプルダウンロード＞ サンプルページ＞ ※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U 対象ファイル：index.html (1)必要ファイル、スタイル読み込み head内に必要なファイル、スタイルの読み込みを行います。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<style>
.check h3 span {
color: #ef3030;
margin: 0 0 0 3px;
}
.q input[type="date"],
.q input[type="time"] {
-webkit-appearance: none;
display: inline-block;
width: 60%;
padding: 10px 8px;
font-size: 16px;
box-sizing: border-box;
border: 1px solid #d8d8d8;
border-radius: 3px;
position: relative;
background-color: #fff;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
text-align: left;
}
input[type=time]::-webkit-calendar-picker-indicator {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.q input[type="date"]:after,
.q input[type="time"]:after {
content: "";
display: block;
width: 10px;
height: 10px;
box-sizing: border-box;
border-bottom: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
position: absolute;
top: 48%;
right: 15px;
z-index: 0;
transform: translateY(-50%) rotate(45deg);
}
.datepicker_bg{
position: relative;
display: inline-block;
width: 60%;
background-color: #fff;
}
.datepicker_bg > input {
-webkit-appearance: none;
display: inline-block;
width: 100%;
padding: 10px 8px;
font-size: 16px;
box-sizing: border-box;
border: 1px solid #d8d8d8;
border-radius: 3px;
position: relative;
background-color: transparent;
z-index: 1;
}
.datepicker_bg:after {
content: "";
display: block;
width: 10px;
height: 10px;
box-sizing: border-box;
border-bottom: 1px solid #d8d8d8;
border-right: 1px solid #d8d8d8;
position: absolute;
top: 48%;
right: 15px;
z-index: 0;
transform: translateY(-50%) rotate(45deg);
}
</style>
<script>
//今日の日付取得
var year = new Date().getFullYear();
var month = ('00' + (new Date().getMonth()+1)).slice(-2);
var date = ('00' + new Date().getDate()).slice(-2);
var day_arr = ['日', '月', '火', '水', '木', '金', '土'];
var day = day_arr[new Date().getDay()];
// var today = year + '-' + month + '-' + date;
var today2 = year + '/' + month + '/' + date + '('+ day + ')';
$(function () {
$('.datepicker_bg > input').val(today2);
});
</script>（２）カレンダー部分 初期表示は当日の日付が入ります。 ※name属性は適宜ご変更ください。
<section class="q date">
<input type="hidden" name="col_1_title" value="日付選択">
<div class="txt">
<h3>日付選択<span>*</span></h3>
</div>
<div class="datepicker_bg">
<input type="text" id="datepicker"class="validate[required]" name="col_1" value="" readonly="readonly" autocomplete="off" placeholder="選択して下さい" data-prompt-position="topRight">
</div>
</section>（３）datepickerの呼び出し body閉じの直上で、datepickerの呼び出し、オプション設定を行います。 その他のオプションについては公式ページなどご確認ください。
<script>
//日付設定オプション
$("[id=datepicker]").datepicker({
dateFormat: 'yy/mm/dd(D)',
// maxDate: "+0d",//未来の日付選択不可
});
</script>（４）カレンダーを複数使用する場合 カレンダーを複数使用する場合は、（２）（３）を複製したのち、下記２か所のid属性の値をユニークなものへ変更をお願いします。 （例）id属性を「datepicker2」にする
<input type="text" id="datepicker2" class="validate[required]" name="col_1" value="" readonly="readonly" autocomplete="off" placeholder="選択して下さい" data-prompt-position="topRight">$("[id=datepicker2]").datepicker({
dateFormat: 'yy/mm/dd(D)',
// maxDate: "+0d",//未来の日付選択不可
});ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。本人確認フォームのテスト送信方法
（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 ※ファイル内に文字化けがないかご確認ください。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）のアップロード方法」の手順に沿ってファイルをアップロードする。 付与したタグの動作確認方法は下記をご参照ください。 > 付与したタグの動作確認方法オリジナルフォーム（LIFF）のアクセス数を計測する方法
オリジナルフォーム（LIFF）のアクセス数を計測するには短縮URLを使用し、リッチメニューのクリック数を計測します。 （※リッチメニューのクリック数 ＝ LIFFアクセス数）
1.コンテンツ ＞ リッチメニュー
↓ 2.オリジナルフォーム（LIFF）が立ち上がるリッチメニューを編集
↓ 3.①リンクURLをコピー ②短縮URLを開く
↓ 4.作成と編集
↓ 5.①管理名 ②３でコピーしたURLをペースト（貼り付け）する ③チェックを入れる 上記入力後保存してください。 ※LINEログイン認証にはチェックを入れないでください。 LINEログイン認証を使いたい場合はオリジナルフォームの完了ページを編集する必要があります。 完了ページの編集はこちら＞
↓ 6.短縮URLに変更になっていることを確認し、保存
↓ 7.分析 ＞ 短縮URL
↓ 8.対象の計測項目をご確認ください。
返金保証や、予約販売などオリジナルフォームで収集したデータを集める
受信BOXにて一括処理が可能になりました！
▼可能になった一括処理
・一括タグ付与、削除
・一括フラグ付与、削除
・CSVダウンロード
今まで1件ずつ処理していた作業がこれで一括でできるようになり一気に作業時間を短縮できます！
↓
■目的 こちらのアプリは入力項目にテキストを打ち込むだけでオリジナルフォームを生成することができます。 これにより作業効率をアップさせることができるのと、HTMLの知識がない方でも誰でもオリジナルフォームを生成することができるようになります。 オリジナルフォーム生成アプリはこちら＞ ■セット所要時間 15分（※作成するコンテンツ量によります） ■セットの流れ まず完成形としては、下記のようなフォームが簡単に作成できます。 サンプルフォーム＞ （１）入力ページのヘッダー部分 ①ページタイトル：ブラウザのタブ、フォームの最上部 ②ヘッダータイトル ③ヘッダーテキスト
↓ （２）送信ボタン、タグコード ①送信ボタンテキスト ②送信時タグコード：ここで設定したタグが送信時に付与されます
↓ （３）質問追加 ＋質問追加：クリックで下記５種類の質問が追加できます Radio：ラジオボタン Checkbox：チェックボックス（※複数選択可） Select：プルダウン Text：1行テキスト入力 Textarea：複数行テキスト入力
↓ （４）ラジオボタンの作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④回答の設定 ⑤回答追加 ⑥削除
↓ （５）チェックボックスの作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④回答の設定 ⑤回答追加 ⑥削除
↓ （６）セレクトボックスの作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④回答の設定（プルダウンでの選択式） ⑤回答追加 ⑥削除
↓ （７）テキスト入力（1行）の作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④入力例の設定（入力すると消えます）
↓ （８）テキスト入力（複数行）の作り方 ①必須入力設定 ②質問テキスト ③やや小さめのフォントサイズで補足テキスト ④入力例の設定（サンプルは設定なし）
↓
（９）完了ページ
完了ページを表示するには、入力ページを送信することで表示されます。
①ページタイトル：ブラウザのタブ、フォームの最上部
②ヘッダータイトル
③ヘッダーテキスト
④閉じるボタンテキスト
↓ （１０）フッターボタンの説明 ①保存：入力した内容をブラウザのストレージ（保存ファイル）に保存 ②ファイル出力：保存したファイルを出力。途中から作業を再開したり、バックアップファイルになります。 ③ファイル読み込み：②のファイルを読み込むとフォームに反映されます。 ④リセット：入力内容をすべて削除 ⑤プレビュー：ブラウザで完成フォームを見れます。F12でスマホ表示にするのがおすすめです。 ⑥LIFFダウンロード：ECAIにアップロードするファイルのダウンロード
【プレビューの補足】 プレビュー後にWindowsの場合、F12で開発ツールが開きます。スマホのマークをクリックするとスマホのプレビューに切り替わります。
↓ （１１）LIFFファイルをアップロードする (10)の⑥でダウンロードしたLIFFファイルをECAIの管理画面からZIPファイルのままアップロードして完成です。 LIFFのアップロード方法はこちら＞ オリジナルフォームの新規作成はこちら＞ また、ダウンロードしたLIFFファイルをさらに手動で編集することも可能です。 オリジナルフォームの編集方法＞オリジナルフォームで、送信ボタンを押したらタグを削除する方法
送信ボタンを押したときにタグを削除するには、対象のオリジナルフォームの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 + ULIFFとは？
■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ページを表示させるだけでしたら、「外部サイトを埋め込む」を使用する必要はありません。
外部サイトの設定方法＞
■目的 オリジナルフォームの入力途中でフォームを閉じる ■セット所有時間 10分 下記フォームサンプルページを元に説明します。 サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■セットの流れ サンプルページ：complete.html サンプルページを例に説明をしていきます。 実際の閉じる動作はLINEのLIFF内でしか動作しないのでご注意ください。 （1）body閉じの上に下記コードを追加 ※既に記載がある場合は記載しなくて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）閉じるアクションを起こしたいボタンなどに下記を追加
onclick="liffclose();"
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【オリジナルフォーム】表示・非表示の出し分け設定
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページを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文を使用して、選択ごとに次の設問を出し分ける
■目的 フォーム送信時の回答内容によって複数のタグを付与します。 複数のタグをすることで付与したタグを使用して属性、趣味嗜好をもとにターゲットに合ったメッセージ配信が可能になります。 ■回答内容によって複数のタグを付与するケース ※下記は一例となります
・選択した商品ごとにタグ付与を出し分ける（例：商品1を選択した際は商品1のタグを付与） ・選択した性別ごとにタグ付与を出し分ける（例：女性を選択した際は女性のタグを付与） ・選択した誕生月ごとにタグ付与を出し分ける（例：1月を選択した際は1月のタグを付与）
■セット所要時間 ３０分 ■セットの流れ オリジナルフォームのHTML、Javascript編集が必要になります。 オリジナルフォームの編集方法＞ 下記サンプルフォームのソースコードをご参照ください。 サンプルフォーム＞ サンプルフォームダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U こちらのサンプルフォームでは質問１のラジオボタン、質問４のプルダウンで選択した回答それぞれにタグが付与されます。 付与するタグの作成方法はこちら＞ フォームを送信するときの処理にタグを付与する設定を行います。 下記コードを参照いただき、送信時の設定を追加してください。 すでに送信時の処理が書かれている場合は、そちらに追記をお願いします。
①送信タグを格納する変数設定、デフォルトで指定のタグを付与したい場合はこちらに追加 ②質問1で選択されたvalue取得 ③質問1の回答に合わせて、作成したタグコードを設定します ④質問４で選択されたvalue取得 ⑤質問４の回答に合わせて、作成したタグコードを設定します ⑥すべてのタグを送信 〈コピペ用コード〉
<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、チャットワークよりご依頼をお願いします。【フォーム】ラジオボタンの作り方
■見本
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページを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が表示される）
フォームファイル内にあるindex.html（入力ページ）の詳細説明です。 ソースコード内にコメントアウトで説明の記載があります。 下記フォームサンプルページのブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ＞フォームサンプルダウンロードテキスト入力したら「入力完了ボタン」の色を変える方法
下記サンプルをダウンロードしてご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U 【index.html】 入力完了時にenableValのClassを追加することでボタンの色を変更しています。 ①styleの設定（30～68行目）
<style>
textarea {
padding: 10px;
vertical-align: top;
width: 100%;
font-size: 16px!important;
line-height: 1.6;
}
textarea:focus {
outline: 2px solid #daecff;
}
button.next-btn {
border: none;
color: #999;
border: 1px solid #d8d8d8;
background: #F8F8F8;
background: -moz-linear-gradient(top, #FFF 0%, #F8F8F8 100%);
background: -webkit-linear-gradient(top, #FFF 0%,#F8F8F8 100%);
background: linear-gradient(to bottom, #FFF 0%,#F8F8F8 100%);
opacity: 0.3;
pointer-events: none;
transition: all 0.2s 0s ease;
}
button.next-btn.enable {
opacity: 1;
pointer-events: auto;
}
button.next-btn.enableVal {
opacity: 1;
pointer-events: auto;
color: #fff;
border: 1px solid #d8d8d8;
background: #ff8e00;
background: -moz-linear-gradient(top, #ffc57e 0%, #ff8e00 100%);
background: -webkit-linear-gradient(top, #ffc57e 0%,#ff8e00 100%);
background: linear-gradient(to bottom, #ffc57e 0%,#ff8e00 100%);
}
</style>②テキストエリア表示部分（102～134行目）
<section class="q q1">
<input type="hidden" name="col_1_title" value="テキスト入力制限あり">
<h2>質問1<span>*</span></h2>
<div class="txt">
<h3>テキスト入力制限あり</h3>
</div>
<textarea name="col_1" placeholder="テキスト入力" class="validate[required]" data-prompt-position="topLeft"></textarea>
<div style="width: 100%;">
<ul class="btn" style="margin: 1em auto; width: 50%;">
<li>
<button type="button" class="next-btn q1-btn">入力完了</button>
</li>
</ul>
</div>
</section>
<section class="q q4">
<input type="hidden" name="col_4_title" value="テキスト入力制限なし">
<h2>質問4</h2>
<div class="txt">
<h3>テキスト入力制限なし</h3>
<p style="margin: .8rem 0 0; font-size: .8rem; color: #777;">(未記入の場合はそのまま入力完了を押してください)</p>
</div>
<textarea name="col_4" placeholder="テキスト入力" class="" data-prompt-position="topLeft"></textarea>
<div style="width: 100%;">
<ul class="btn" style="margin: 1em auto; width: 50%;">
<li>
<button type="button" class="next-btn q4-btn enable">入力完了</button>
</li>
</ul>
</div>
</section>③JavaScript挙動部分（171～224行目）
//次の設問へスクロール
function scrollNext(anchor) {
var position = $(anchor).offset().top;
$("html, body").animate({
scrollTop: position
}, 500, "swing");
return false;
}
$(function() {
$('.q1').on('change', function() {
var val = $('.q1 textarea').val();
if (val == "") {
$(".q1-btn").removeClass("enableVal");
}
else{
$(".q1-btn").addClass("enableVal");
}
});
});
$(function() {
$('.q1-btn').on('click', function() {
$('.q4').show();
if($('.btn.entry').css('display') == 'none') {
scrollNext('#scrollAnchor');
}
});
});
$(function() {
$('.q4').on('change', function() {
var val = $('.q4 textarea').val();
if (val == "") {
$(".q4-btn").removeClass("enableVal");
if($('.btn.entry').css('display') == 'block'){
$(".q4-btn").addClass("enableVal");
}
}
else{
$(".q4-btn").addClass("enableVal");
}
});
});
$(function() {
$('.q4-btn').on('click', function() {
if($('.btn.entry').css('display') == 'none') {
$('.btn.entry').show();
}
if($('.btn.entry').css('display') == 'block'){
$(".q4-btn").addClass("enableVal");
}
scrollNext('#scrollAnchor');
});
});