Google Forms を活用したオリジナルフォームの実装方法 #オリジナルデザインで実装する方法

Google Formsは、Googleアカウントさえあれば誰でも無料で利用できる便利なツールです。スプレッドシートと自動で連携できるため、集計や分析もスムーズに行え、さらにSSL暗号化でセキュリティ面も安心。無料とは思えないほど高機能なフォーム作成サービスとして、多くの企業や個人に活用されています。

しかし、Google Formsには「デザインの自由度が低い」という弱点があります。そのまま埋め込むと、サイト全体の雰囲気やブランドイメージと合わず、ユーザー体験を損なう可能性も。

そこで本記事では、Google Formsの機能をそのまま活かしつつ、自作サイトのデザインに自然に溶け込むフォームを設置する方法をご紹介します。オリジナルデザインで統一感を持たせたいと考えている方におすすめです。

フォームを作成する – Google Forms

まずはベースとなるフォームを Google Form で作成します。フォームの作成はとても直感的で、必要な項目（氏名・メールアドレス・問い合わせ内容など）を追加していくだけで簡単に完成します。

Google Forms : https://workspace.google.com/intl/ja/products/forms/

必要な値を抜き取る

Google Formsを自作したフォームに組み込むためには、フォームの送信に必要な パラメータ（値） を正しく取得する必要があります。具体的には以下の2つです。action値は、フォーム送信時のデータ送信先となるURLで、name値は、各質問項目を識別するためのユニークなキーになります。

formタグのaction値 : action="XXXX/formResponse"
inputタグのname値 : name="entry.XXXX"

これらの値は、ブラウザの 検証ツール（デベロッパーツール） を使ってフォームのソースコードを確認すれば取得可能です。

自作したフォームに値を入れる

先ほどコピーした formタグのaction値 と inputのname値 を、自作フォームのHTMLに設定します。

<form action="https://docs.google.com/forms/XXXXXXXXX/formResponse">
  <input type="text" placeholder="お名前" name="entry.XXXXXXXXX">
  <input type="email" placeholder="メールアドレス" name="entry.XXXXXXXXX">
  <button type="submit">送信</button>
</form>

これで連携は完了です。自作フォームの送信ボタンを押すとGoogle Formsへとデータが送られるようになります。下記の画面へ遷移したら成功です。

送信後のページを指定する

リダイレクト処理をすることで、オリジナルのページへ遷移させることも可能です。

<script>
  let submitted = false;
  const redirectPage = function () {
    if (submitted) {
      window.location = '遷移させたいページのURL';
    }
  }
</script>

簡単に解説します。

let submitted = false;

「フォームが送信されたかどうか」を判定するためのフラグ（変数）です。初期値は false ＝「まだ送信されていない」状態。ページ遷移を行う関数を定義しています。

const redirectPage = function () { ... }

submitted が true の場合のみ、処理を実行します。つまり、「フォーム送信が完了したときだけ次のページに遷移する」仕組みです。

window.location = '遷移させたいページのURL';

現在のページから遷移させたいページのURLへ遷移します。サンクスページ（入力完了ページ）へユーザーをリダイレクトするための処理です。

さいごに

今回は、Google Forms の手軽さをそのまま活かしながら、サイトデザインとの統一感を実現するTipsのご紹介でした。ぜひ自分のサイトに取り入れて、ユーザーにとって使いやすいフォームを実装してみてください。