■目的
オリジナルフォームで取得した情報をフォーム送信時にマイスピーにも送信することができます。
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、チャットワークよりご依頼をお願いします。