自作フォームをGoogleフォームと連携させて使う【web制作】

Web制作

LPの問い合わせフォームを、Googleフォームと連携させて使いたい!

こういった悩みを持っている方への記事です。

筆者は現在web制作フリーランスとして活動中でして、現在2年目に突入しています。

今回は、フォームに関する内容でweb制作にも役立つと思った内容を共有したいと思います。

5分で読めるので、ご興味のある方はぜひ最後まで読んでみてください。

Googleフォームとは?

ご存知の方も多いと思いますが、GoogleフォームとはGoogleが提供している問い合わせフォームのことです。

Google フォーム - アンケートを作成、分析できる無料サービス
自分でアンケートを作成するだけでなく、他のユーザーとも同時に共同で作成できます。また、デザイン性の高いさまざまな既製テーマから選択したり、独自のテーマを作成したりすることも可能です。しかも、Google フォーム内で結果を分析できる、Google の無料サービスです。

上記リンクからGoogleのアカウントのある方は、ほんとすぐにフォームが作成できます。

デフォルトでは、上記の写真のようなレイアウトになっており、Googleが提供している基本のフォームになります。

フォームがどのような構造で動いているかというと、

先ほどのフォーム画面のから情報を入力し送信

サーバーサイドの処理

データベースに保存

この流れでGoogleフォームが動きます。

図解するとこのようになります。

今回は、フォーム画面の部分を自身で作成したフォームに置き換えて、フォームの機能を実装したいと思います。

Googleフォームを作成する

まずはGoogleフォームを作成しましょう。

下記リンクから作成してください。

Google フォーム - アンケートを作成、分析できる無料サービス
自分でアンケートを作成するだけでなく、他のユーザーとも同時に共同で作成できます。また、デザイン性の高いさまざまな既製テーマから選択したり、独自のテーマを作成したりすることも可能です。しかも、Google フォーム内で結果を分析できる、Google の無料サービスです。

フォームの内容は、下記写真と同じようにしてください。

NAME、EMAIL、MESSAGEの簡単なフォームです。

作成できたら、右上の送信ボタンをクリックし(①)、出てきたモーダル内の送信方法の左から2番目のアイコンをクリック(②)し、リンクをコピーしてください。

そのリンクを検索すると、フォームの入力画面が表示されます。

これでGoogleフォームの設定は完了です。

オリジナルのフォームを作成する

次にオリジナルのフォームを作成します。

どう作ってもいいのですが、今回はBootstrapのパーツを利用したいと思います。

サンプルコード↓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

  <div class="container mt-4">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">NAME</label>
        <input type="text" class="form-control" id="exampleInputName">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">EMAIL</label>
        <input type="email" class="form-control" id="exampleInputEmail1">
      </div>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div><!-- /.container -->
  
</body>
</html>

これで簡単な自作フォームができました。

自作フォームをカスタマイズする

実際に自作フォームでGoogleフォームの機能を使えるようにしていきます。

具体的に何をしていくかというと

googleフォームのaction属性とinputのname属性を確認し、自作フォームに書き写す

これだけです。

それでは実際にコードを見ていきます。

Googleフォームを検証ツールで確認する

Googleフォームのaction属性とname属性を確認するために、検証ツールを開きます。

macの方は、option + command + i で検証ツールが開きます。

開けたら、command + f で検索モードにし、actionとinputの場所を検索します。

自作フォームを完成させる

確認ができたので、action属性とname属性を自作のフォームの書き写しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

  <div class="container mt-4">
    <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScDUvGt5A6uXmiNgOjoMF-JvyfvOylzIuuP7922caDa5Fqm7A/formResponse"> <----action属性を追加
      <div class="form-group">
        <label for="exampleInputEmail1">NAME</label>
        <input type="text" class="form-control" id="exampleInputName" name="entry.1982422322"><----name属性を追加
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">EMAIL</label>
        <input type="email" class="form-control" id="exampleInputEmail1" name="entry.413429095"><----name属性を追加
      </div>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="entry.1841257656"></textarea><----name属性を追加
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div><!-- /.container -->
  
</body>
</html>

これで自作フォームから、Googleフォームの機能を利用できるようになりました。

フォームの送信は実現しましたが、送信するとGoogleフォームのデフォルトの送信完了画面に遷移してしまいます。

これを防ぐために、次にフォームと同じ画面で送信完了の文言を表示させたいと思います。

送信完了画面を表示させる

フォームと同じ画面で送信完了の文言を表示させるためには、ちょっとしたjavascriptの処理を記述します。

早速コードを見ていきましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>

  <div class="container mt-4">
    <form name="sentMessage"
      action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScDUvGt5A6uXmiNgOjoMF-JvyfvOylzIuuP7922caDa5Fqm7A/formResponse" id="contactForm"
      target="dummyIframe"> 追加点①
      <div class="form-group">
        <label for="exampleInputEmail1">NAME</label>
        <input type="text" class="form-control" id="exampleInputName" name="entry.1982422322">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail1">EMAIL</label>
        <input type="email" class="form-control" id="exampleInputEmail1" name="entry.413429095">
      </div>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="entry.1841257656"></textarea>
      </div>
      <button type="submit" class="btn btn-primary" onclick="sendGform()">Submit</button>追加点②
    </form>
    <iframe name="dummyIframe" style="display:none;"></iframe>追加点③
    <div id="thanks" style="display: none;">お問い合わせありがとうございます。</div>追加点④
  </div><!-- /.container -->
  <script> 追加点⑤
    function sendGform() {
      document.sentMessage.submit();
      document.getElementById('contactForm').style.display = 'none';
      document.getElementById('thanks').style.display = 'block';
    }
  </script>
</body>
</html>

前述のコードに追加した点は5箇所あります。

追加点①

<form name="sentMessage"
      action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScDUvGt5A6uXmiNgOjoMF-JvyfvOylzIuuP7922caDa5Fqm7A/formResponse" id="contactForm"
      target="dummyIframe"> 追加点①

name属性、id属性、target属性を追加しました。

name属性、id属性は、後述の追加点⑤で使用します。

target属性は、フォーム送信時の飛び先を指定しています。

追加点②

<button type="submit" class="btn btn-primary" onclick="sendGform()">Submit</button>追加点②

onclick属性を指定し、Submitをクリックしたときに発火する処理を記述しています。

具体的な処理は、後述の追加点⑤になります。

追加点③

<iframe name="dummyIframe" style="display:none;"></iframe>追加点③

追加点③は、追加点①のtarget属性で指定した飛び先になります。

追加点④

<div id="thanks" style="display: none;">お問い合わせありがとうございます。</div>追加点④

追加点④は、送信完了後に表示される完了の文言を追加しています。

入力フォームが表示時は非表示で、送信後に表示する処理を追加点⑤で記載します。

追加点⑤

<script> 追加点⑤
    function sendGform() {
      document.sentMessage.submit();
      document.getElementById('contactForm').style.display = 'none';
      document.getElementById('thanks').style.display = 'block';
    }
  </script>

追加点⑤では、追加点②のSubmitボタンをクリックした際のjavascriptの処理を記述します。

document.sentMessage.submit();

formのname属性に指定したsentMessageとsubmitメソッドでフォームの内容を送信します。

document.getElementById('contactForm').style.display = 'none';

その次に、formのid属性であるcontactFormを指定し、送信後は表示にします。

document.getElementById('thanks').style.display = 'block';

最後に、追加点④の完了後の文言を表示させます。

フォームの画面に、送信完了の文言を表示させる一連の流れは以上です。

送信すると、

このような表示になるかと思います。

まとめ

今回は、Googleフォームを自作のフォームで使用する方法を解説しました。

LPなどの問い合わせフォームにサクッと使用するといいかもしれません。

また、スプレッドシートにリストも取れるのでその連携もするとより良いですね。

参考サイト