Google Formでお問い合わせを用意する

はじめに

サイトを作る上で毎回少し悩むのがお問い合わせフォームだと思います。 実装する場合は基本的に

• 自前のサーバでお問い合わせ機能を実装
• labmdaなどのserverlessでお問い合わせ機能を実装
• お問い合わせの外部サービスを使用する

のどれかになるのではないでしょうか？ 今回は新たな選択肢としてGoogle Formを使用したお問い合わせの実装方法を紹介したいと思います。

Google Formを埋め込んでみる

まず一番簡単な方法としてGoogle Formの埋め込みを紹介します。 Google Formの管理画面から埋め込みのHTMLをコピー、ペーストするだけで簡単に以下のような埋め込み表示ができます。

見た目は完全にGoogle Formです 😃 実用性としては問題ないので、見た目を気にしないサイトであれば埋め込みだけでも十分だと思います。

Google Formのリクエストをチェック

見た目も変えたい！という方は自前でFormを実装する必要があります。 実はGoogle Formの送信時と同じリクエストを出すFormであれば独自のFormからの送信でもGoogle Formを利用したことになります。 Google Formのリクエスト内容をチェックしてみましょう。 上の画像の状態で送信を押してみます。 Formの内容が送信されました。

https://docs.google.com/forms/...のURLにForm DataがPOSTされていますね。 Form Data内ではNameやEmailの代わりにentry.xxxという属性が使われているようです。 今回の例でいけば、entry.577560896がEmail、entry.38836043がNameに対応しています。 このリクエストを再現できるFormであればオリジナルのFormからでもGoogle Formが利用できるようになるはずです。 ※ entry.xxx以外のForm Dataは無視しても問題ないです。

Google Formと同じリクエストを出すFormを作成

ということで先程の画像と同じようなリクエストを出すformを用意してみます。

<form
  action="https://docs.google.com/forms/u/0/d/e/.../formResponse"
  method="POST"
>
  <h1 class="title">Custom Contact</h1>
  <label for="entry.577560896">Email</label>
  <input name="entry.577560896" required />
  <label for="entry.38836043">Name</label>
  <input name="entry.38836043" required />
  <button type="submit" class="submit">Submit</button>
</form>

このformからsubmitを押すと... Formの送信に成功しました！ ただ送信後、Google Formのsuccess画面に遷移するのがちょっと嫌ですね😐

Google Formのsuccess画面に遷移させたくない場合

送信後にsuccess画面へ遷移させたくない場合は自前でForm methodを用意します。 以下にそのコードの一例を載せます。

<form id="customForm">
  <h1 class="title">Custom Contact</h1>
  <label for="email">Email</label>
  <input name="email" required />
  <label for="name">Name</label>
  <input name="name" required />
  <button type="submit" class="submit">Submit</button>
</form>

const FORM_URL = 'https://docs.google.com/forms/u/0/d/e/.../formResponse'
const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'

function handleSubmit(event) {
  event.preventDefault()
  const formData = new FormData()
  formData.append('entry.577560896', event.target.getAttribute('email'))
  formData.append('entry.38836043', event.target.getAttribute('name'))
  axios
    .post(CORS_PROXY + FORM_URL, formData)
    .then(() => /*success処理*/)
    .catch(() => /*error処理*/)
}

form = document.querySelector('#customForm')
form.addEventListener('submit', handleSubmit)

この方法を使えば、submit後のsuccess処理やerror処理を好きなように弄くれるので、Google Formのsuccess画面へ遷移させないような処理も可能になります。

※ 上記のコードではcors-anywhereのプロキシを通してGoogle Formのリクエストを出すようにしています。 これはGoogle Form以外のサイトからhttps://docs.google.com/forms/...へ直接POSTするとCORSエラーが発生してしまうためです。 CORSエラーが発生した場合でもFormの内容自体はしっかりとGoogle Formへ送られているので、普通に使用する分にはプロキシサーバを経由しなくても大丈夫です👌 cors-anywhereのプロキシサーバを使用する場合はherokuなどで自前デプロイすることをオススメします(デプロイ方法はこちら)

まとめ

以上がGoogle Formを利用したお問い合わせの実装方法です。 最後に手順をまとめると

1. Google Formを用意する
2. Google Formからのリクエスト内容をチェックする
3. チェックしたリクエスト内容と同じリクエストを出すformを用意する（CORSエラーが気になる人はcors-anywhere等を利用する）

になります。 リクエストを出した際のCORSエラーの処理が若干面倒くさいですが、それを除けば非常に簡単にお問い合わせ等の実装ができそうです。 また、Google Form側でメール通知の設定もすれば、お問い合わせ受信後にメールを受け取れるので便利です👍 お問い合わせ実装の選択肢の一つとして参考になれば幸いです。