【2021年最新版】Googleフォームをデザイン・カスタマイズしてホームページに埋め込みする作り方!

【2021年最新版】Googleフォームをデザイン・カスタマイズしてホームページに埋め込みする作り方!Web制作
Sponsored Links
<strong>Googleフォームを使いたい人</strong>
Googleフォームを使いたい人

Googleフォームをデザイン・カスタマイズしてホームページに埋め込みたいんだけど、仕様変更されていて、作り方が全然分からない…

こんな疑問に答えます。

だれでも簡単にフォームを作ることができる「Googleフォーム」。

Googleフォームはデザインがイジれないので、カスタマイズして自分のホームページに埋め込みたいっていう人も多いと思います。

Googleフォームは簡単にカスタマイズ可能でした。

ただGoogleフォームの仕様が変更して、ソース自体が変わってます。

Googleフォームのカスタマイズの方法を書いたサイトは多数あるけれど、みんな仕様変更前のもので、全く参考にならならい…。

どのサイトもname属性の値「entry.xxxxxx」が簡単に見つかるように書いてあるけれど、これが仕様が変わっていて、見つからない…。

たしげん
たしげん

ボクも途方に暮れましたよ。

それで、自分でいろいろ試してたら、解決できたので、みなさんと共有しようと、この記事を書いています。

そこでこの記事では、「Googleフォームをデザイン・カスタマイズしてホームページに埋め込みする作り方」を解説します。

この記事で得られること
  • Googleフォームの作り方が分かる
  • Googleフォームをカスタマイズしてホームページに埋め込みする方法が分かる
  • Googleフォームの仕様変更についてが分かる

Googleフォームは思いのほか簡単にカスタマイズできるので、どんどんあなたのオシャレなデザインのサイトに取り入れてみてはいかかがでしょうか?

Sponsored Links

仕様変更したGoogleフォームをホームページに埋め込みする方法

仕様変更したGoogleフォームをホームページに埋め込みする方法

Googleフォームをホームページに埋め込みするためには、name属性の値「entry.xxxxxx」が必要です。

しかし、Googleフォームが仕様変更されていて、name値が見つからない。

解決法から言ってしまうと、最初に仮でいいので、フォームの全ての項目を入力します。

それから「検証」を開いて、「⌘(command)+F」で「entry.」で検索すると、全ての項目のname属性が”hidden”になってますが、上の画像みたいにまとめて現れます。

たしげん
たしげん

結果、仕様変更前よりも簡単に見つけることができますよ。

name属性の値の見つけ方
  1. フォームの全ての項目を入力
  2. 「検証」を開く
  3. 「⌘(command)+F」「entry.」で検索

Googleフォームをデザイン・カスタマイズしてホームページに埋め込みする作り方!

Googleフォームをデザイン・カスタマイズしてホームページに埋め込みする作り方!

ここからはGoogleフォームを簡単にカスタマイズして、ホームページに埋め込みする方法を詳しく解説していきます。

Googleフォームの作り方
  1. まずはHTMLフォームを作る
  2. Googleフォームでフォームを作る
  3. GoogleフォームをHTMLフォームに埋め込み

1. まずはHTMLフォームを作る

たしげん
たしげん

まずはこんな感じで自分のサイトにフォームを作りましょう!

まずはHTMLフォームを作る

自分でいい感じにHTMLフォームを作って、CSSでデザインもしておきましょう。

2. Googleフォームでフォームを作る

ここからはGoogleフォームで、HTMLフォームと同じ項目のフォームを作っていきます。

Googleフォームの作り方
  • STEP1
    Googleフォームにアクセス
    Googleフォームにアクセス

    Googleにログインし、「パーソナル」「Googleフォームを使ってみる」

  • STEP2
    新しいフォームを作成
    新しいフォームを作成

    「新しいフォームを作成」「空白」

  • STEP3
    メールアドレスを収集するにチェック
    メールアドレスを収集するにチェック

    「設定」「全般」「メールアドレスを収集する」にチェック→「保存」

  • STEP4
    独自フォームと同じ項目を作る
    フォームと同じ項目を作る

    あなたの作ったフォームと同じ項目のGoogleフォームを作ります。
    「必須」のチェックは忘れずに!
    (詳しいGoogleフォームの作り方は割愛しますm(_ _)m)

3. GoogleフォームをHTMLフォームに埋め込み

ここからが仕様変更の箇所になります。

GoogleフォームをHTMLフォームに埋め込み
  • STEP1
    プレビュー
    プレビュー

    右上の目のアイコンの「プレビュー」をクリック

  • STEP2
    検証
    検証

    プレビューが表示されたら、右クリックで「検証」

  • STEP3
    formタグを検索
    formタグを検索

    検証ツールを開いたら、「⌘(command)+F」「<form」を検索

  • STEP4
    actionの値をコピー
    actionの値をコピー

    formタグの「action属性の値」をコピー

  • STEP5
    HTMLのaction=””にペースト
    <section id="contact" class="contact">
        <h2 class="util-title">Contact</h2>
        <form action="https://docs.google.com/forms/u/0/d/e/xxxxxxx/formResponse" class="contact-form" method="POST">

    あなたのフォームのHTMLの「action=””」の中にペースト

  • STEP6
    Googleフォームの各項目を全て入力

    プレビューのフォームの各項目に仮でいいので、全て入力します

  • STEP7
    検証でentry.を検索

    また右クリックで「検証」を開いて、「⌘(command)+F」「entry.」で検索します。
    すると全ての項目のname属性が”hidden”になってますが、まとめて現れます。

  • STEP8
    各項目のname属性をコピー

    各項目の「entry.数字」をコピー。(数字は人それぞれで変わります。)
    ラジオボタンの項目が2つ以上ある場合は同じ数字でOK。
    メールアドレスは「emailAddress」でOK。

  • STEP9
    HTMLのname=””にペースト
    <section id="contact" class="contact">
         <h2 class="util-title">Contact</h2>
         <form action="https://docs.google.com/forms/u/0/d/e/xxxxxxx/formResponse" class="contact-form wow fadeInUp" method="POST">
         <p class="contact-text"><span class="contact-text-inline">*</span>は入力必須項目です</p>
         <dl class="contact-list">
              <div class="contact-item">
                    <dt class="contact-item-title">
                        お名前<span class="contact-item-title-inline">*</span>
                    </dt>
                    <dd class="contact-item-input">
                        <input type="text" name="entry.xxxxxxx" required>
                    </dd>
               </div>
               <div class="contact-item">
                    <dt class="contact-item-title">
                        メールアドレス<span class="contact-item-title-inline">*</span>
                    </dt>
                    <dd class="contact-item-input">
                        <input type="email" name="emailAddress" required>
                    </dd>
               </div>
               <div class="contact-item">
                    <dt class="contact-item-title">
                        法人/個人の選択<span class="contact-item-title-inline">*</span>
                    </dt>
                    <dd class="contact-item-input">
                    <div class="contact-radio-wrap">
                         <label class="contact-radio">
                                <input type="radio" name="entry.xxxxxxx" class="contact-radio-input" value="法人" required checked>
                                <span class="contact-radio-part">法人</span>
                         </label>
                         <label class="contact-radio">
                                <input type="radio" name="entry.xxxxxxx" class="contact-radio-input" value="個人" required>
                                <span class="contact-radio-part">個人</span>
                         </label>
                    </div>
                    </dd>
              </div>
              <div class="contact-item">
                   <dt class="contact-item-title">
                       お問い合わせ内容<span class="contact-item-title-inline">*</span>
                   </dt>
                   <dd class="contact-item-input">
                       <textarea name="entry.xxxxxxx" required></textarea>
                   </dd>
               </div>
          </dl>
          <div class="contact-footer">
               <p class="contact-footer-text">
               <label class="contact-privacy">
                      <input type="checkbox" name="entry.xxxxxxx" class="contact-privacy-input" value="プライバシーポリシーの同意" required>
                      <span class="contact-privacy-part"></span>
               </label>
               <a href="#" class="contact-privacy-link" target="_blank">プライバシーポリシー</a>に同意します。
               </p>
               <div class="contact-footer-submit">
                    <button class="util-link -submit" type="submit" disabled>送信</button>
               </div>
          </div>
      </form>

    あなたのフォームのHTMLの項目ごとに「name=””」の中にペーストしてください。

Googleフォーム使ったHTMLフォームで送信完了画面を作る

Googleフォーム使ったHTMLフォームで送信完了画面を作る

このままでは送信完了画面が表示されないので、jQueryのAjaxを使って、送信完了画面を作ります。

ここからはコピペでいいので、簡単に説明します。

まずHTMLに戻って、formタグに「id=”js-form”」つけておいてください。

<section id="contact" class="contact">
    <h2 class="util-title">Contact</h2>
    <form id="js-form" action="https://docs.google.com/forms/u/0/d/e/xxxxxxx/formResponse" class="contact-form" method="POST">

そして、送信完了のメッセージと送信失敗のメッセージを追加しておきます。

送信完了には「id=”js-success”」、送信失敗には「id=”js-error”」をつけておいてください。

<div id="js-success" class="contact-message">
     <p>送信完了しました。ありがとうございました。</p>
</div>
<div id="js-error" class="contact-message -error">
     <p>送信に失敗しました。ページを更新して再度送信してください。</p>
</div>

それからCSSで自由にデザインしておいてくださいね。

それでscript.jsにこのように書いていきます。

$(function() {

  //googleform
  let $form = $( '#js-form' )
  $form.submit(function(e) { 
    $.ajax({ 
     url: $form.attr('action'), 
     data: $form.serialize(), 
     type: "POST", 
     dataType: "xml", 
     statusCode: { 
        0: function() { 
          //送信に成功したときの処理
          $form.slideUp()
          $( '#js-success' ).slideDown()
        }, 
        200: function() { 
          //送信に失敗したときの処理
          $form.slideUp()
          $( '#js-error' ).slideDown()
        }
      } 
    });
    return false; 
  })
})

これでformがsubumit(送信)されたとき、ajaxが走るようになってます。

「0」が送信に成功したときの処理、「200」が送信に失敗したときの処理です。

それぞれslideUpさせます。

これで送信完了画面が表示されます。

Googleフォームをデザイン・カスタマイズしてホームページに埋め込みする方法は簡単!

Googleフォームをデザイン・カスタマイズしてホームページに埋め込みする方法は簡単!

ということで、「Googleフォームをデザイン・カスタマイズしてホームページに埋め込みする作り方」を解説してきました。

name属性の値の見つけ方
  1. フォームの全ての項目を入力
  2. 「検証」を開く
  3. 「⌘(command)+F」「entry.」で検索

Googleフォームの仕様変更があって、name属性の値を見つけるのに苦労しましたが、一度、作り方が分かれば簡単にできます。

Googleフォームを簡単にカスタマイズができることを知っておくと、クライアントの要望に対応できますね。

Googleフォームは思いのほか簡単にカスタマイズできるので、どんどんあなたのオシャレなデザインのサイトに取り入れてみてください。

たしげん
たしげん

最後にWeb制作で使える初心者向けのおすすめ本「1冊ですべて身につくHTML & CSSとWebデザイン入門講座」の紹介です!Webデザインについても学べますよ。

タイトルとURLをコピーしました