【2024年最新】オリジナルデザインのお問い合わせフォーム→googleフォーム→Chatwork通知の方法

山口コーディングデザイン

公開日： 2024.05.27

【2024年最新】オリジナルデザインのお問い合わせフォーム→googleフォーム→Chatwork通知の方法

こんにちは。クライマー株式会社の山口です。
オリジナルデザインのお問い合わせフォームをchatworkで通知させる方法を記述しておきます。

流れとしてはこうです。

お問い合わせフォームをデザイン・コーディングする
googleフォームを作り、スプレッドシートと連携させる
Chatworkと連携させ、通知が来るようにする

お問い合わせフォームをデザイン・コーディングする

お問い合わせフォーム

今回はこちらのフォームを用意しました。 HTMLとcssは一旦通常で書いてもらって大丈夫です。

コードはこちらです。

<div class="form_box">
<form
action="https://docs.google.com/forms/u/2/d/e/1FAIpQLSeOgSz4-OHrXbHlWC3WwHzmZrDJEtSIz6XGZAwSGOkpRB3C1w/formResponse"
method="post" target="hidden_iframe" onsubmit="submitted=true;" class="c-form">
<dl>
<dt>法人名<span>※必須</span></dt>
<dd><input type="text" name="enrty.961508484" placeholder="（例）クライマー株式会社" ></dd>
<dt>担当者名<span>※必須</span></dt>
<dd><input type="text" placeholder="（例）田中 太郎"></dd>
<dt>メールアドレス<span>※必須</span></dt>
<dd><input type="text" placeholder="（例）[email protected]"></dd>
<dt>電話番号<span>※必須</span></dt>
<dd><input type="text" placeholder="（例）000-0000-0000"></dd>
<dt>お問い合わせ内容<span>※必須</span></dt>
<dd><textarea cols="30" rows="5"
placeholder="見積依頼やご相談などご記入ください。"></textarea></dd>
</dl>
<div class="agree_box">
<input type="checkbox" id="with-consent">
<label for="with-consent"><a href="#" target="_blank">個人情報の取扱について</a>同意する</label>
<input type="submit" disabled id="submit" value="送信する">
</div>

</form>
</div>

HTMLは後ほど、追記することがあります。

googleフォームを作り、スプレッドシートと連携させる

まずはgoogleフォームを作りましょう。
必須項目は必須ボタンをオンにします。

すべて質問項目を入力したら、設定に進みます。
忘れがちで私も沼にハマったことがあるのですが、◯◯と信頼できる組織のユーザーに限定するのボタンがオンになっているので、制限なく誰からでもお問い合わせを受け付けたい場合はこちらを解除します。 googleフォーム

回答に行き、スプレッドシートにリンクをクリックします。
googleスプレッドシート

新しいスプレッドシートを作成します。
googleスプレッドシート

フォームの質問項目がスプレッドシートに反映されています。
googleスプレッドシート

ここまでで「googleフォームを作り、スプレッドシートと連携させる」は完成です。

Chatworkと連携させ、通知が来るようにする

最後にChatworkとスプレッドシートを連携させて、Chatworkに通知が来るように設定します。

googleフォームに戻ります。右上のプレビューに進んでください。 googleフォームプレビュー

検証を開きます。

Ctrl+F、macではcommand+Fで検索ボックスを出して、「action」を検索します。

from actionという箇所のURLをコピーします。

HTMLのform内にactionを追加してURLを貼ります。

<form
action="https://docs.google.com/forms/u/2/d/e/1FAIpQLSeOgSz4-OHrXbHlWC3WwHzmZrDJEtSIz6XGZAwSGOkpRB3C1w/formResponse"
method="post" target="hidden_iframe" onsubmit="submitted=true;" class="c-form">

次に各質問のname属性を探します。プレビューに自分がわかりやすい回答を記入してください。そして最後Ctrl+F、macではcommand+Fの検索で「input」を検索してください。 input

これ順番がバラバラになってなって分かりにくくなってしまっていますが、
それぞれの項目のentry.数字をコピーしてください。
法人名だったら entry.961508484 になります。

<dl>
<dt>法人名<span>※必須</span></dt>
<dd><input name="entry.961508484" type="text" placeholder="（例）クライマー株式会社"></dd>
<dt>担当者名<span>※必須</span></dt>
<dd><input name="entry.1597152616" type="text" placeholder="（例）田中 太郎"></dd>
<dt>メールアドレス<span>※必須</span></dt>
<dd><input name="entry.588173962" type="text" placeholder="（例）[email protected]"></dd>
<dt>電話番号<span>※必須</span></dt>
<dd><input name="entry.444759679" type="text" placeholder="（例）000-0000-0000"></dd>
<dt>お問い合わせ内容<span>※必須</span></dt>
<dd><textarea name="entry.791585816" id="" cols="30" rows="5"
placeholder="見積依頼やご相談などご記入ください。"></textarea></dd>
</dl>

このようにnameタグを追記します。
HTMLを触るのはここまでです。
後ほどブラウザにプレビューしてテスト送信します。

次にChatwork API Tokenを取得します。詳しくはこちらを御覧ください。
ChatworkでAPITokenを取得
API Tokenはメモしておいてください。

次にChatworkのルームIDを取得します。

たどり着けない方はこちらを御覧ください。
ルームIDを取得

ルームIDもAPI Tokenと一緒にメモしておいてください。

スプレッドシートに戻ります。
スプレッドシートの拡張機能からApps Scriptを選択してください。 googleスプレッドシート

左側のエディタのコード.gsとなっている箇所を任意の名前に変更します。
ここではcontactFormとしました。

google Apps Script

contactFormに以下のプログラムを貼り付けてください。 API TokenとChatworkのルームIDの箇所は、先程コピーしたものを貼ってください。

/**
* フォームが送信されると動く関数
* e : フォームの送信情報を受け取ります。
*/
function runForm(e) {
if (!e) {
Logger.log("No event object");
return;
}

// デバッグ用のログを追加
Logger.log("Form submission received: %s", JSON.stringify(e));

// フォームの質問と回答のオブジェクトを取得
const namedValues = e.namedValues;

// namedValuesが正しく取得できているか確認
Logger.log("Named values: %s", JSON.stringify(namedValues));

// ヘッダーを取得
const header =
// スプレッドシートを取得
SpreadsheetApp.getActiveSpreadsheet()
// スプレッドシートからフォームのシートを取得
.getSheetByName("フォームの回答 1")
// 1行目を範囲選択
.getRange("A1:1")
// 選択範囲のデータを2次元配列で取得
.getValues()
// 1行が対象のため、2次元配列を1次元配列へ変換
.flat()
// 空白列は削除
.filter(col => col != "");

// チャットワークTOKEN
const token = 'API Tokenを貼ってください';
// 送信先チャットワークルームID
const roomId = 'ルームIDを貼って下さい';
// チャットワーク送信用のメッセージを作成
const message = createMessage(header, namedValues);

// メッセージを送信
sendMessage(token, roomId, message);
}

/**
* フォームの送信内容を順番に取得
*/
function createMessage(header, namedValues) {
let message = "お問い合わせが来ました";

// 質問項目を順番に取り出し
header.forEach(question => {
let answer = namedValues[question];
// 質問内容
message += "\n" + "■" + question;
// 質問に対する回答内容
message += "\n" + answer;
// 改行を追加して見やすくする
message += "\n";
});

return message;
}

/**
* チャットワークへメッセージを送信する
* https://developer.chatwork.com/reference/post-rooms-room_id-messages
* token : チャットワークAPIトークン
* roomId : 送信先ID
* message : 送信内容
*/
function sendMessage(token, roomId, message) {
const options = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
'X-ChatWorkToken': token
},
payload: {
'body': message
}
};

UrlFetchApp.fetch('https://api.chatwork.com/v2/rooms/' + roomId + '/messages', options);
}