はい、使用可能です。
お客様チェックシート┃フォームの申請内容がECAIに届かないフォームの申請内容がECAIに届かない。という事象の際は下記をご確認ください。
①実機（スマートフォン）で行う ②LINEアプリ内で申請する ③LINEアプリ内で申請する際は対象フォームの「LIFF呼び出しURL」を使用する （※表示確認URLとは異なります）
こちらは解約・休止・サイクル変更・スキップエントリーフォームについてのガイドとなります。 アップロード方法につきましては下記を参照ください。 ＞オリジナルフォーム（LIFF）のアップロード方法 アップロード後、テスト送信を行ってください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 下記３つのチェック項目を確認し、問題なく設定がされているかご確認ください。 【チェック項目】 ①フォーム内の質問と設定col(name属性)は正しく設定されているか ＞フォーム内質問と設定col(name属性)の確認方法 ※修正が必要な場合は下記ガイドの記載ルールに沿って設定されているかご確認ください。 ＞解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール ②フォーム送信後の申請項目、回答項目は正しく表示されているか ＞オリジナルフォームで取得した情報を受信BOXで確認する ※【解約・休止・サイクル変更・スキップ】エントリーフォームでの申請の場合はASSダッシュボードにも申請内容が表示されます。
③タグは想定通りついているか ＞付与したタグの動作確認方法【フォーム】商品選択ごとにバナーを出し分ける
■目的 商品選択ごとにバナーを出し分ける設定 ■セット所有時間 30分 下記フォームサンプルページを元に説明します。 サンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 フォームサンプルページ＞ フォームサンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ■セットの流れ 編集ファイル：display.js サンプルページを例に説明をしていきます。 仕様は商品１を選択時はバナーを表示させ、商品２を選択時はバナーを表示させません。 質問３を選択時にどちらの商品が選ばれているかの分岐処理をいれて、バナーの表示を調整します。 66～116行目
if($('.item :radio:eq(0)').prop('checked')){
//商品1選択の処理
}
else {
//商品2選択の処理
}注意点としては、質問３でバナーを表示後に、質問１の商品選択に戻ったときにバナー以降を非表示にする処理を忘れずに入れてください。 これをしないとバナーの表示が残ってします場合があります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【オリジナルフォーム】商品選択の作成、追加
下記フォームサンプルページを元に説明します。 フォームサンプルページのソースコードをブラウザ上でご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
■目的 商品選択の設問作成、追加 ■セット所有時間 １０分 ■セットの流れ サンプルフォームの93～138行目が商品選択部分になります。
①解約休止フォームにおいて、商品選択に関する設問のname属性は「col_4_title」「col_4」の固定で指定 ②質問内容のテキストはこちらを編集 ③商品画像はこちらに画像パスを設定 ④商品名はこちらで設定 ⑤商品項目を増やしたい場合は<li>～</li>までを複製し、内容を適宜ご変更ください。【簡易版】フォームアップロード後のチェック項目
こちらは解約・休止・サイクル変更・スキップエントリーフォームについてのガイドとなります。 アップロード方法につきましては下記を参照ください。 ＞オリジナルフォーム（LIFF）のアップロード方法 アップロード後、テスト送信を行ってください。 ＞【解約・休止・サイクル変更・スキップ】エントリーフォームテスト送信方法 下記3つのチェック項目を確認し、問題なく設定がされているかご確認ください。 【チェック項目】 ①フォーム内の質問と設定col(name属性)は正しく設定されているか ＞確認方法はこちら ②フォーム送信後の申請項目、回答項目は正しく表示されているか ＞確認方法はこちら ③タグは想定通りついているか ＞確認方法はこちら
フォームの内容を大幅に変更された場合は、下記「詳細版」をご確認ください。 ＞【詳細版】フォームアップロード後のチェック項目【フォーム】スムーズスクロール設定
下記フォームサンプルページを元に説明します。 フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。 ＞フォームサンプルページ ＞フォームサンプルダウンロード ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
【編集ファイル】 index.html ①スクロールしたい場所にid属性でアンカーを設定する
②スムーズスクロールの処理をjavascriptで設定
③スクロールしたいタイミングで②で設定したスクロール処理を呼び出す 引数には①のid属性を設定する
対象のセレクトボックスにイベントを設定し、switch文を回してタグ付与を行ってください。 サンプルコード フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U (1)対象のセレクトボックスに下記イベントを設定
onchange="selectboxChange()"
↓
(2)switch文で選択ごとにタグを付与し、送信用のvalueにタグを格納する
①空の配列を指定
※送信時にデフォルトでタグを埋め込む場合は['タグコード'];としてください。（タグコードは置き換える）
②対象のセレクトボックスの選択肢を取得
③それぞれタグコードを指定
<script>
function selectboxChange() {
tags = [];
selindex1 = document.getElementById("select1").selectedIndex;
selindex2 = document.getElementById("select2").selectedIndex;
switch (selindex1) {
case 1:
tags.push('タグコード1');//男性
break;
case 2:
tags.push('タグコード2');//女性
break;
case 3:
tags.push('タグコード3');//その他
break;
}
switch (selindex2) {
case 1:
tags.push('タグコード4');//A型
break;
case 2:
tags.push('タグコード5');//B型
break;
case 3:
tags.push('タグコード6');//O型
break;
case 4:
tags.push('タグコード7');//AB型
break;
case 5:
tags.push('タグコード8');//その他
break;
}
//送信用にタグを格納
document.getElementById("add_tags").value = tags;
}
</script>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。お客様チェックシート┃オリジナルフォームで希望の項目が反映されない
オリジナルフォームで希望の項目が反映されないときは下記ご確認ください。
①スマートフォンのLINEアプリで送信しているか ECAIの機能はPC版のLINEアプリでは使用できません。 スマートフォンのLINEアプリを使用してください。
②LIFF呼び出しURLを使用しているか 表示用のURLでは送信ができません。 送信をするときは、LIFFの呼び出しURLをメッセージやリッチメニューで呼び出して使用してください。
③index.html内の各質問に設定するname属性は正しく設定されているか 設定方法は下記ガイドを確認ください。 本人確認フォーム内のcol(name属性)の記載ルール＞ 解約・休止・サイクル変更フォーム内のcol(name属性)の記載ルール＞
④ファイル内の<!--削除禁止-->部分を編集していないか
全てをチェックいただいても解決できなかった際はサポートまでご連絡くださいませ。
直接計測をLP内やオリジナルフォーム（LIFF）内で行う方法
直接計測はリファラー（遷移元URL）がない時にカウントされるため、LP内やオリジナルフォーム（LIFF）内では使用できません。 そこで直接計測に対して、"noreferrer"を設定することで計測が可能となります。 ①aタグに設置する場合 aタグにrel="noreferrer"を追加 例） ※href内は設定したいURLに変更する
<a href="https://demo.ecai.jp/optin/9?ecaiad=arhzcZCj" rel="noreferrer">友だち追加</a>②JavaScriptで設定する場合 例） ※第一引数のURLは設定したいURLに変更する
window.open('https://demo.ecai.jp/optin/9?ecaiad=arhzcZCj', '_blank', 'noreferrer');【注意点】 ・直接計測とLP計測は同時に使用できません。 ・指定のリンクやボタンをクリックするとカウントされます。 ・直接計測なのでトラッキングコードは設置しない指定タグの人にはオリジナルフォームを表示しない
指定のタグが付いているユーザーのオリジナルフォームを表示させない方法です。 フォームの回答に回数制限をつけたいときなどに有効です。 下記フォームサンプルページを元に説明します。 ファイルをダウンロードして内容をご確認ください。 フォームサンプルダウンロード＞ フォームサンプルページ＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U ※PCのブラウザで開いても正常に動作しません。 ■処理の流れ ①ローディング表示 ↓ ②指定のタグがあるかチェック ↓ ③指定のタグがある場合はフォームを閉じます ■編集ファイル：index.html (1)ローディングの初期設定 フォームアクセス時に、指定タグの情報を問い合わせている間、ローディング画面を表示させる必要があります。 推奨のローディング設定をする場合は、既存のローディング設定を削除（コメントアウト）してください。 （※既存のローディング設定をそのまま使って組み込むことも可能です。） 例）
//loader
// $(window).on('load', function () {
// $("#loader").addClass('loaded');
// });
// $(function () {
// setTimeout(function () {
// $("#loader").fadeOut();
// }, 5000);
// });
<!-- <div id="loader">
<div class="line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div> -->（2）ローディング用のスタイル追加 backgroundのURLにローディング用の画像パスを設定
<style>
/* ローディング用 */
header,
.wrap,
footer{
display: none;
}
#nowLoading {
display: table;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #fff;
opacity: 0.8;
}
#innerMsg {
display: table-cell;
text-align: center;
vertical-align: middle;
padding-top: 140px;
z-index:100;
background: url("./images/loading_cl.svg") center center no-repeat;
}
</style>（3）ローディング画像の設定
<script>
//ローディング画像表示
function dispLoading(msg){
// 引数なしの場合、メッセージは非表示。
if(msg === undefined ) msg = "";
// 画面表示メッセージを埋め込み
var innerMsg = "<div id='innerMsg'>" + msg + "</div>";
// ローディング画像が非表示かどうかチェックし、非表示の場合のみ出力。
if($("#nowLoading").length == 0){
$("body").append("<div id='nowLoading'>" + innerMsg + "</div>");
}
}
//ローディング画像非表示
function removeLoading(){
$("#nowLoading").fadeOut();
$("header, .wrap, footer").show();
}
dispLoading();
</script>（4）タグチェックの非同期処理の設置 ※フォームアクセス時のテキストはこちらで変更可
//タグチェック
function CheckTagProc() {
var uid = $("#useridfield").val();
var fid = $("#fid").val();
var tag = $("#check_tags").val();
var botid = $("#bot_id").val();
$.ajax({
type: "POST",
url: "/api/tag/chk",
dataType: 'json',
data: {
"uid": uid,
"fid": fid,
"bot_id": botid,
"tag_code": tag
},
success: function(j_data) { if (j_data['result'] == 'Granted'){alert("こちらのフォームは回答済みです。");liffclose();} },
error: function(XMLHttpRequest, textStatus, errorThrown) {
},
complete: function() {removeLoading();}
});
}
//■Response
//error_code 正常な場合は「200」、指定されたタグが存在しない・会員情報が存在しない等の場合は「500」
//result error_codeが500の場合は「ParamMissing」、指定タグコードが付与済みの場合は「Granted」、指定タグコードが未付与の場合は「NotGranted」（5）非同期処理のコール処理を追加
（6）指定のタグを設置 valueにタグを指定、複数の場合は「,」で区切る
（7）指定のタグがあるユーザーがフォームを開くと、アラート表示後に閉じます。
LIFF設定にて外部サイトの埋め込みを使うメリットは2つあります。
① 画面表示を3段階（全画面、8割、5割）に分けられる。 ② どんな外部サイトでもLINEブラウザで表示できる。 （端末によってsafari、Cromeなどブラウザを分けたくない場合に有効）オリジナルフォーム（LIFF）を複製する方法
対象のフォームをダウンロードし、新規で作成したLIFFにアップロードすることでできます。 BOT（LINE公式アカウント）間をまたいでの複製も可能です。 ①対象のフォームをダウンロードする ダウンロード方法はこちら＞ ↓ ②新規LIFFを作成する 新規LIFFを作成方法はこちら＞ ↓ ③作成したLIFFにダウンロードしたファイルをアップロードする アップロード方法はこちら＞チェックボックスの複数選択でそれぞれにタグを付与する方法
■目的 複数選択のチェックボックスで、選択項目それぞれにタグを付与します。 チェックボックスの作成方法はこちら＞ ■セット所要時間 30分 ■サンプルコード フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U ■セットの流れ チェックボックスが選択されたタイミングでid="add_tags"のvalueにタグを格納します。 フォームが送信されると格納されたタグが付与されます。 タグコードに本番用のタグコードをご設定ください。
<script>
//チェックボックス選択
$(function () {
$('.trigger input').on('change', function () {
tags = [];//空の配列
$('.trigger input:checkbox:checked').each(function() {
var val = $(this).val();
if(val == '自分にピッタリな商品だと思ったから'){
tags.push('タグコード1');
}
else if(val == '有名人・雑誌・TVなどの影響を受けたから'){
tags.push('タグコード2');
}
else if(val == '友人知人の紹介だから'){
tags.push('タグコード3');
}
else if(val == '試してみたかったから'){
tags.push('タグコード4');
}
});
//送信用にタグを格納
document.getElementById("add_tags").value = tags;
//ボタン表示
if ($('.btn.entry').css('display') == 'none') {
$('.btn.entry').show();
scrollNext('#scrollAnchor');
}
});
});
</script>ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。「###ID###」のあるURLを使用した際に、「###ID###」のID部分を表示させない方法
■目的 「###ID###」のあるURLを使用した際に、「###ID###」のID部分をユーザー側に表示させないようにします。 例）https://lp2.ecai.jp/?ecai_id=###ID### ■セット所要時間 5分 ■セットの流れ （１） 「###ID###」付きのURLを短縮URLにします。その際に必ず「LINEログイン認証を行う」にチェックしてください。
↓ （２） 短縮URLを挿入して、その短縮URLをコピーする
↓ （３） LIFFの外部サイトにコピーした短縮URLを設定する LIFFの外部サイトの設定につきましてはこちら＞ ↓ （４） LIFFの外部サイトに設定したLIFF-URLを使用することで、IDの表示を回避することができます。
（1）コンテンツ ＞ LIFF
↓ （2）対象フォームの「LIFF呼び出しURL」をコピーする
↓ （3）1：1トークより友達登録している管理用アカウントや自分のアカウントを選択 テキストメッセージに「LIFF呼び出しURL」をペーストして送信
↓ （4）ここからは実機でのLINE操作となります。 友達登録しているスマホより送られたメッセージ確認 「LIFF呼び出しURL」を開く
↓ （5）表示されたオリジナルフォームに内容を入力しエントリー（送信）する
↓ （6）送信結果は管理画面に戻り「受信BOX」よりご確認ください。 受信BOXの確認方法につきましてはこちらをご確認くださいLIFF（オリジナルフォーム）の入力を1ユーザー1回に制限することは可能か？
２つの方法があります。
①リッチメニューによる制限
LIFFのURLをリッチメニューをタップして開かせる方法にして、申請後にタグ付与して別のリッチメニューに変えることでオリジナルフォームの入力を1回に制限することが可能です。
LIFFのURLを直接ユーザーに表示させないことで再申請できなくする方法になります。
※LIFF自体に回数の制限を設けることはできません
②オリジナルフォームによる制限
指定タグの人にはオリジナルフォームを表示しない＞
■目的 オリジナルフォームを開いた時にタグ付与する方法の説明になります。 タグ付与によって、セグメントが切れたり、クリックの計測などが可能になります。 タグはフォームを開くたびに上書きされて付与されます。 ■セット所有時間 おおよそ１０分 ■セットの流れ 下記サンプルページを元に説明します。 ファイルをダウンロードして内容をご確認ください。 サンプルダウンロード＞ サンプルページ＞ ※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
(1)下記コードを</body>タグの直上に設置 （サンプルページのindex.html 117～158行目）
<!-- 削除禁止 --><input type="hidden" id="addtag"><!-- 削除禁止 -->
<!-- 削除禁止 -->
<script>
$(window).on('load', function(){
setTimeout(delaySend, 1000);
});
AddTag('タグコード');//タグセット
var delaySend = function () {
AddTagProc();//タグ送信
}
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>
<!-- 削除禁止 -->（２）タグ設定
AddTag('タグコード');のタグコード部分に付与したいタグを設置
タグ作成についてはこちら＞
オリジナルフォームの編集についてはこちら＞
（３）フォームをアップロード
オリジナルフォームをLINEで開いてタグが付与されていれば完成です。
タグはフォームを開くたびに上書きされて付与されます。
注意点として、タグ付与と同時にそのタグ名でECAIに回答が送信されます。
そのため、１回の申請で２回の回答が行われるものとなります。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。オリジナルフォーム上で取得できるLIFF情報について
オリジナルフォームで入力された情報をECAIに送るために、LIFFの情報をソース上で取得しています。 オリジナルフォーム上で取得できる情報は以下５つとなります。 ###cancellationurl### ⇒ 解約休止フォームの完了ページURL ###formurl### ⇒ その他フォームの完了ページURL ###fid### ⇒ フォームID ###liffid### ⇒ LIFF ID ###botid### ⇒ BOT ID解約・休止フォームで商品選択を表示させない方法
オリジナルフォームの解約、休止、スキップなどの申請につきましては、商品選択の項目設定が必須となります。 商品設定が１つの場合でフォームに表示をさせない場合は、以下の内容を<form>内に設置して下さい。 ※２行目の商品名部分は適宜ご変更ください。
<input type="hidden" name="col_4_title" value="商品">
<input type="hidden" name="col_4" value="商品名">設置例）
■目的 オリジナルフォーム(LIFF)を入力のないLPのように使う方法 ■セット所要時間 5分 ■セットの流れ 【パターン１】 LIFFを外部サイトに設定することで、外部のサイトをLIFFで開くことができます。 外部サイトの設定方法＞ 【パターン２】 LIFFファイルのindex.htmlで静的ページを生成する。 index.htmlを編集し、コンテンツを作成してください。 オリジナルフォームの編集方法＞ LIFFファイル内には「index.html」と「complete.html」を必ずセットで作成する必要があります。 LIFFファイルの構造についてはこちら＞
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。【オリジナルフォーム】マイスピー連携
■目的 オリジナルフォームで取得した情報をフォーム送信時にマイスピーにも送信することができます。 LINEで垢バンしてしまった時の保険としても活用できます。 ■セット所要時間 2時間 ■セットの流れ
（１）マイスピーでシナリオ設定（新規作成） ↓ （２）ECAIで取得したい情報をオリジナルフォームで作成 ↓ （３）オリジナルフォームの完了ページにマイスピーに送信する処理を実装する
今回は姓名、メールアドレスをマイスピーに送信するサンプルとなります。 他の情報を取得したい場合は、マイスピー側の取得情報にECAI側のオリジナルフォームを合わせる必要があります。 サンプルページ＞ サンプルダウンロード＞ ※ソースコード確認方法 対象ページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U
（１）マイスピーでシナリオ設定
①マイスピーでシナリオを新規で作成 デフォルトで姓、名、メールアドレスの３項目を取得できるフォームが作成できます。 内容を変更される場合は、マイスピーのマニュアルに沿って変更をお願いします。
↓ ②登録フォーム設定 登録フォーム設定の確認画面の設定はスキップにして下さい
（２）ECAIで取得したい情報をオリジナルフォームで作成
①オリジナルフォームで作成 サンプルをダウンロードし、index.htmlを編集してオリジナルフォームの入力項目をマイスピーに合わせてください。 デフォルトでは姓、名、メールアドレスを取得するフォームとなっております。 オリジナルフォームの編集方法はこちら＞
↓ ②送信時に入力内容をローカルストレージに格納
（３）オリジナルフォームの完了ページにマイスピーに送信する処理を実装する
先ほどローカルストレージに格納した情報を使って、それを完了ページでは自動でマイスピーに送信を行う処理を実装していきます。 ユーザー側には実際の入力内容は見えず、ローディング画像が表示されている間に裏側で送信処理が行われます。 ①マイスピーの送信先URLを設定 A. 登録ページのURLをコピーします
↓ B. complete.htmlのformタグのアクション部分に設定します
↓ ②送信項目の設定 マイスピーに送る情報をデフォルトから変更している場合は、formタグ内に項目を追加してください。 A. 登録フォームデザインの本文内の入力部分のソースをコピーします
↓ B.complete.htmlのformタグ内に貼り付け デフォルトでは姓、名、メールアドレスを取得するフォームになっていますが、送信項目が同じ場合はそのままでも大丈夫です。
↓ ③ローカルストレージの情報を自動でマイスピーに送信 ローカルストレージの情報を②のvalueに格納し、自動でマイスピーに送信する処理を追加します。 こちらも同様にデフォルトから変更した場合は、送信内容を手動で変更してください。
↓ ④送信テスト 最後にスマホのLINEアプリより送信テストを行って、マイスピーに入力内容が反映されるかご確認ください。 送信テストの方法はこちら＞
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。20文字以上の文字やテキストエリアを使ってアンケートを作成したい
20文字以上の文字やテキストエリアを使ってアンケートを作成する場合は、オリジナルフォーム機能を使用してください。
ECAIにあるアンケート機能では設問の文字が20文字までの仕様となっており20文字以上の使用ができないためです。
また、回答タイプが選択ボタンのみとなりユーザーに文字入れをしてもらうなど選択ボタンとは異なる回答タイプは使用ができないためです。
オリジナルフォーム機能を仕様することで、複数の回答タイプや画像を使用したアンケート作成が可能です！！
■目的 ボタンの配置による選択項目の偏りをなくすために、毎回ランダムにボタンを表示させています。 回答に偏りがある場合に、より正確に回答結果を得ることができます。 ■セット所要時間 10分 ■セットの流れ 下記のサンプルページをもとに説明します。 フォームサンプルページ＞ フォームサンプルページダウンロード＞ ※ソースコード確認方法 windows：Ctrl + U mac ：option + command + U 編集ファイル：index.html （１）htmlの質問部分のにからのulを設置
<ul id="cancel_reason_btn" class="col2"></ul>↓ （２）ボタンとランダム表示させるJavascriptを記述
//シャッフル
const shuffleArray = (array) => {
const cloneArray = [...array]
for (let i = cloneArray.length - 1; i >= 0; i--) {
let rand = Math.floor(Math.random() * (i + 1))
// 配列の要素の順番を入れ替える
let tmpStorage = cloneArray[i]
cloneArray[i] = cloneArray[rand]
cloneArray[rand] = tmpStorage
}
return cloneArray
}
//解約理由ボタンの配列
let arr = [
'<li><label><input type="radio" name="col_6" class="validate[required]" value="効果を感じない" data-prompt-position="topLeft"><span>効果を感じない</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="商品が余っている" data-prompt-position="topLeft"><span>商品が余っている</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="価格が高い" data-prompt-position="topLeft"><span>価格が高い</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="他社商品へ変更" data-prompt-position="topLeft"><span>他社商品へ変更</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="お試しのみ" data-prompt-position="topLeft"><span>お試しのみ</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="改善された" data-prompt-position="topLeft"><span>改善された</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="対応がよくない" data-prompt-position="topLeft"><span>対応がよくない</span></label></li>',
'<li><label><input type="radio" name="col_6" class="validate[required]" value="その他" data-prompt-position="topLeft"><span>その他</span></label></li>',
];
cloneArr = shuffleArray(arr);
// innerHTMLを使用して表示
let cancelReasonBtn = document.getElementById("cancel_reason_btn");
cancelReasonBtn.innerHTML = cloneArr.join('');ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせて編集をお願いします。 またチャットワークへの通知設定の設定代行も行っております。 ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。 （目安）１設定：10,000円(税別)【オリジナルフォーム】日付入力、今日の日付表示
オリジナルフォームの日付入力と今日の日付の表示方法のガイドです。 下記サンプルページを元に説明します。 ファイルをダウンロードして内容をご確認ください。 サンプルダウンロード＞ サンプルページ＞ ※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U （１）日付入力の作成方法 ①スタイルの設定
②下記部分をコピペ ※name属性は適宜ご変更下さい。
（２）今日の日付の表示方法 ①ヘッダーのscript内に下記コードをコピペ 日付入力時の初期値をここで設定してます。
②今日の日付を表示させたい場所に下記コードをコピペ
<script>document.write(today);</script>
オリジナルフォームで指定の曜日、時間、日付を設定した場合、 上記のようなポップアップを出してアクセスできないようにします。 下記サンプルページを元に説明します。 ファイルをダウンロードして内容をご確認ください。 サンプルダウンロード＞ サンプルページ＞ ※ソースコード確認方法 サンプルページをChromeブラウザで開いて下記操作を行ってください。 windows：Ctrl + U mac：option + command + U サンプルファイルの545～603行目を対象フォームへコピペしてください。
<script>
//非表示にする時間を指定
function Settoday() {
var ck1 = false;
var ck2 = false;
var today = new Date(); //今日の日付
var dayOfWeek = today.getDay(); //今日の曜日取得
var y = today.getFullYear();
var m = ('00' + (today.getMonth() + 1)).slice(-2);
var d = ('00' + today.getDate()).slice(-2);
var formatday = `${y}-${m}-${d}`; //今日の年月日を取得
var hour = today.getHours(); //今の時間取得
var msg = '只今メンテナンス中となります。\n営業時間内にお問い合わせください。';
//1.曜日の指定
var specifydayOfWeek = [0, 6]; //★曜日を指定 0→日,1→月,2→火,3→水,4→木,5→金,6→土「,」でつなぐ
specifydayOfWeek.forEach(function (e) {
if (e == dayOfWeek) {
ck1 = true;
alert(msg);
liff.closeWindow();
}
});
if (!ck1) {
//2.祝日対応
var url = 'https://holidays-jp.github.io/api/v1/date.json';
fetch(url)
.then(response => response.json())
.then(data => {
Object.keys(data).forEach(function (key) {
if (key == formatday) {
ck2 = true;
alert(msg);
liff.closeWindow();
}
});
});
//3.日付指定
var specifyDay = ["2022-09-02", "2022-09-05", "2022-10-11"]; //★年月日を指定「,」でつなぐ
specifyDay.forEach(function (e) {
if (e == formatday) {
ck2 = true;
alert(msg);
liff.closeWindow();
}
});
}
if (!ck2) {
//4.時間の指定
if (hour >= 0 && hour <= 9 || hour >= 17 && hour <= 23) { //★時間を指定（0:00～10:00、17:00～24：00まで非表示）
alert(msg);
liff.closeWindow();
}
}
}
Settoday();
</script>（1）曜日別の非表示指定 559行目で非表示にしたい曜日を下記数字で指定 複数の場合は「,」でつなぐ 日→0 月→1 火→2 水→3 木→4 金→5 土→6 下記[0 ,6]の場合は、土日が非表示になります。
（2）日付別の非表示指定 584行目に非表示にしたい日付を下記フォーマットで指定 複数の場合は「,」でつなぐ 例）2022年9月10日 → "2022-09-10"
（3）時間帯別の非表示指定 596行目に非表示にしたい時間帯を指定 下記の場合は、0:00～10:00、17:00～24：00までが非表示になります （※10：00～17：00は表示）
（4）メッセージテキストの変更 556行目のテキストを変更 改行は「\n」としてください。
■目的 複数選択のチェックボックスで、選択項目それぞれにタグを付与します。 チェックボックスの作成方法はこちら＞ ■セット所要時間 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、チャットワークよりご依頼をお願いします。フォームを閉じた後（送信後）のページを設定する方法
対象フォームをダウンロードし、「complete.html」を編集します。 どのフォームでも同じやり方で編集ができます。 （１）対象フォームをダウンロードします。 フォームのダウンロード方法はこちら＞
↓ （２）ファイルを解凍し、「complete.html」をテキストエディターで開き編集します。 ファイル内の詳細はこちら＞
↓ （３）編集が終わりましたら、ファイルを圧縮し所定のLIFFへアップロードします。 アップロード方法はこちら＞
↓ （４）送信テストを行い、表示に間違いがないか確認する。 テスト送信方法＞オリジナルフォームの完了ページを閉じたときに白紙ページが残る場合の対処法
■目的 オリジナルフォームの完了ページを閉じたときに白紙ページが残ってしまうときの対処方法です。 ケースとしては短縮URLでLIFF-URLを使用した際などになります。 ■セット所要時間 10分 ■セットの流れ オリジナルフォームを編集します。 編集方法に関してはこちら＞ （１）友だち登録URLをコピーします 友だち登録URLの確認方法はこちら＞ （２）complete.htmlの編集 完了ページには概ね閉じるボタンがあると思いますのでそちらを編集します。 ない場合は新たに作成してください。 閉じるボタンのaタグにonclickイベントがある場合は削除します。 そしてhref属性を追加し、先ほどコピペした友だち登録URLをセットしてください。
（３） ファイル編集後、閉じるボタンを押してトーク画面が表示されるか確認をして下さい。
ガイドの内容はあくまでもサンプルになります。 そのまま使用できない場合は対応するフォームにあわせての編集をお願いします。 表示設定が正常にできない場合、ソースチェックの有償サポートも行っております。 ご希望の場合は設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。