Web制作 HTML

Googleフォームのカスタマイズ方法(サンクスページも解説)

Googleフォームってデザインのカスタマイズ出来ない?

お問い合わせフォームはWordPressであればContact Form 7などプラグインを使えば大丈夫ですが、静的サイトでは当然ながらWordPressのプラグインは使えません。

また、特に指定が無ければレスポンシブメールフォームなどを使う事も可能です。

参考記事
レスポンシブ対応の無料お問い合わせフォーム『Responsive Mailform』の使い方
レスポンシブ対応の無料お問い合わせフォーム『Responsive Mailform』の使い方

続きを見る

ただクライアント側から『Googleフォームで実装したい』という指定があったり、さらにデザインをカンプ通りにしたいという要望もあると思います。

そこで今回はGoogleフォームを使ってデザインをカスタマイズしていく方法について解説していきます。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


Googleフォームのカスタマイズ方法(サンクスページも解説)

まずはGoogleフォームで実装したいお問い合わせフォームの項目を作成します(Googleフォームの作り方は割愛します)

フォームの作成はクライアント側にお願いする

Googleフォームの作成にはGoogleアカウントが必要となりますが、ここでクライアントにアカウント情報を教えて貰うのはなるべく避けたいので、フォームの作成はクライアント側にお願いしましょう。そしてこの後書いてある『name』と『actionタグ』の情報を教えて貰います。

こちらが作成したフォームです。

Googleフォームのサンプル

Googleフォームのサンプル

次は右上の『目のマーク』をクリックします。

するとこちらの画面が別ページとして開きます。

Googleフォームのサンプル(目のマーククリック後に開く)

Googleフォームのサンプル(目のマーククリック後に開く)

見た目はあまり変わりませんが、カスタマイズに必要な情報を取得する為にはこちらの画面にする必要があります。

そして項目に仮のテキストなどを入力します。

Googleフォームに仮で入力

Googleフォームに仮で入力

ここは必須ではありませんが、入力しておいた方がやりやすいです。

そして上の画面を開いた状態でデベロッパーツール(検証モード)を開きます。

そして『entry.』で検索すると今回のカスタマイズに必要な情報が見つかります(Windowsではctrl+F、Macでは⌘+Fで検索欄が表示されます)

Googleフォーム:デベロッパーツールで『entry.』と検索

Googleフォーム:デベロッパーツールで『entry.』と検索

『name』のところですね。

あとはformタグ内の『action』の値も取得しておきます(上の長い赤枠部分)

 

HTMLでフォームを作成

次にHTMLでフォームを作成します。

この辺はご自身の環境に合わせて作成して下さい。

<form class="contact" method="post">
  <div class="contact__list">
    <div class="contact__item">
      <label for="name">お名前<span>(※必須)</span></label>
      <input
        type="text"
        name=""
        id="name"
        placeholder="じゅんぺい"
        required
      />
    </div>
    <div class="contact__item">
      <label for="company">メールアドレス<span>(※必須)</span></label>
      <input
        type="email"
        name=""
        id="mail"
        placeholder="sample@gmail.com"
        required
      />
    </div>
    <div class="contact__item">
      <label for="dog">好きな犬種<span>(※必須)</span></label>
      <input
        type="text"
        name=""
        id="dog"
        placeholder="パピヨン"
        required
      />
    </div>
    <div class="contact__item">
      <label for="contents">お問い合わせ内容<span>(※必須)</span></label>
      <textarea
        name="entry.151970012"
        id="contents"
        cols="30"
        rows="10"
        placeholder="お問い合わせ内容が入ります。"
        required
      ></textarea>
    </div>
  </div>
  <div class="submit-btn">
    <input type="submit" value="送信"/>
  </div>
</form>

ここで『name』に先ほどデベロッパーツールで確認した値を入れて、formタグには『actionタグ』を追加します。

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

<form class="contact" action="https://docs.google.com/forms/~省略~" method="post">
  <div class="contact__list">
    <div class="contact__item">
      <label for="name">お名前<span>(※必須)</span></label>
      <input
        type="text"
        name="entry.2033431696"
        id="name"
        placeholder="じゅんぺい"
        required
      />
    </div>
    <div class="contact__item">
      <label for="company">メールアドレス<span>(※必須)</span></label>
      <input
        type="email"
        name="entry.174359942"
        id="mail"
        placeholder="sample@gmail.com"
        required
      />
    </div>
    <div class="contact__item">
      <label for="dog">好きな犬種<span>(※必須)</span></label>
      <input
        type="text"
        name="entry.61465666"
        id="dog"
        placeholder="パピヨン"
        required
      />
    </div>
    <div class="contact__item">
      <label for="contents">お問い合わせ内容<span>(※必須)</span></label>
      <textarea
        name="entry.1095025400"
        id="contents"
        cols="30"
        rows="10"
        placeholder="お問い合わせ内容が入ります。"
        required
      ></textarea>
    </div>
  </div>
  <div class="submit-btn">
    <input type="submit" value="送信"/>
  </div>
</form>

あとはCSSでデザイン通りにコーディングすればOKです。

 

送信テスト

ここまで終わったらサーバーにアップして送信テストをしてみます。

するとGoogleフォームの作成画面に回答が来ているのが分かります。

Googleフォーム:送信テスト

Googleフォーム:送信テスト

しかし、お問い合わせをした後はこのようにGoogleフォームのデフォルトの送信完了画面が表示されてしまいます。

Googleフォーム:送信完了画面

Googleフォーム:送信完了画面

せっかくお問い合わせフォームのデザインをカスタマイズしても、サンクスページがこれでは残念ですよね

なぜならクライアントはGoogleフォームと分からないようにしたい場合が大半だからです。

このままだとお問い合わせフォームはデザイン通りでも、サンクスページはGoogleフォームのままです。

なのでサンクスページも自作して、お問い合わせフォームで送信ボタンを押したら自作のサンクスページに飛ぶようにしたいと思います。

 

Googleフォームのサンクスページを作成

サンクスページの作成自体に変わった事はないので割愛します(ここではファイル名を『thanks.html』にします)

ここで一工夫が必要になるのはお問い合わせフォームの方になります。

まずはformタグにコードを追加します。

<form
  action="https://docs.google.com/forms/~省略~"
  method="post"
  target="hidden_iframe"
  onsubmit="submitted=true;"
>

下の2行ですね。

あとはform閉じタグの後あたりにこちらのコードを追記します。

<script type="text/javascript">
  var submitted = false;
</script>
<iframe
  name="hidden_iframe"
  id="hidden_iframe"
  style="display: none"
  onload="if(submitted)  {window.location='thanks.html';}"
></iframe>

下から2行目の『thanks.html』については、作成したサンクスページのファイル名を書きます。

今回はお問い合わせフォームのファイルと同じ階層にある設定です。

そして完成形がこちらになります。

<form
  action="https://docs.google.com/forms/~省略~"
  method="post"
  target="hidden_iframe"
  onsubmit="submitted=true;"
>
  <div class="contact__list">
    <div class="contact__item">
      <label for="name">お名前<span>(※必須)</span></label>
      <input
        type="text"
        name="entry.2033431696"
        id="name"
        placeholder="じゅんぺい"
        required
      />
    </div>
    <div class="contact__item">
      <label for="email"
        >メールアドレス<span>(※必須)</span></label
      >
      <input
        type="email"
        name="entry.174359942"
        id="email"
        placeholder="sample@gmail.com"
        required
      />
    </div>
    <div class="contact__item">
      <label for="dog">好きな犬種 <span>(※必須)</span></label>
      <input
        type="text"
        name="entry.61465666"
        id="dog"
        placeholder="パピヨン"
        required
      />
    </div>
    <div class="contact__item">
      <label for="contents">お問い合わせ内容<span>(※必須)</span></label>
      <textarea
        name="entry.1095025400"
        id="contents"
        cols="30"
        rows="10"
        placeholder="お問い合わせ内容が入ります。"
        required
      ></textarea>
    </div>
  </div>
  <div class="submit-btn">
    <input type="submit" value="送信" />
  </div>
</form>
<script type="text/javascript">
  var submitted = false;
</script>
<iframe
  name="hidden_iframe"
  id="hidden_iframe"
  style="display: none"
  onload="if(submitted)  {window.location='thanks.html';}"
></iframe>

これで送信ボタンを押したら自作のサンクスページに飛ぶようになります。

サンクスページについてはこちらの記事を参考にさせて頂きました🙇

オリジナルデザインでGoogleフォームを埋め込んで、お問い合わせフォームとスプレッドシートを連携させる裏技!

Googleフォームを使う機会があったらぜひ参考にしてみて下さい。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, HTML
-