1. オリジナルフォームの送信内容をスプレッドシートへ反映させる方法

オリジナルフォームの送信内容をスプレッドシートへ反映させる方法

2023.04.10 更新
Text=kintsuba
■目的
オリジナルフォームの送信内容をスプレッドシートへ反映させる方法の説明になります。
(※ECAIにも同時に送信されます)


■セット所要時間
20分


■セット方法
スプレッドシートへ反映を行うためには、Googleアカウントが必要になります。
無料で作成できますので、まずはアカウントを作成してください。
Googleアカウント作成>


(1)オリジナルフォームの送信設定


下記のサンプルページをもとに説明します。
フォームサンプルページ> 
フォームサンプルページダウンロード> 
※ソースコード確認方法 
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();」を呼び出す



(2)スプレッドシートの設定


①スプレッドシートの新規作成 > 拡張機能 > 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をオリジナルフォームに設定します。
(1)の①に戻っていただき、index.htmlへURLを設定し保存後、オリジナルフォームをECAIへアップロードして下さい。




(3)送信確認


オリジナルフォームから送信して、スプレッドシートへ反映されましたら設定は完了です。




ガイドの内容はあくまでもサンプルになります。  そのまま使用できない場合は対応するフォームにあわせて編集をお願いします。
   
またチャットワークへの通知設定の設定代行も行っております。
ご希望の場合は下記設定代行バナー、もしくはお問い合わせLINE、チャットワークよりご依頼をお願いします。
(目安)1設定:10,000円(税別)
ご希望通りのセッティングができましたか?

1人中0人がセッティングができたと言っています。

このマニュアルの作成者は kintsuba です。

こちらのマニュアルで希望のセッティングが出来なかった
際は、下記のどちらかでお問い合わせください。

フリープランの方はこちら
LINE公式アカウント機能拡張プラン、
オートコールセンタープランの方はこちら