ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.2 カスタマイズ編

 

 前回の続きです。

【GoogleForms】Googleフォームの埋め込み、カスタマイズ Part.1 - ABC ウェブエンジニアblog

 

前回ではサイトにGoogleFormsの見た目のままiframeというタグの貼り付けで埋め込む方法を実践しました。

 

ただそれでは見た目がサイトに合わない、、もっとGoogleフォームらしくない、サイトのデザインに沿ったものにしたいという時

 

カスタマイズする方法があります!

 

まずは自分でHTMLでフォームを作成

<form>
  <label for="email">メールアドレス</label>
  <input id="email" type="text" name="name" placeholder="example@mail.co.jp">
  <label for="msg">お問い合わせ内容</label>
  <textarea id="msg" name="name" placeholder="お気軽にお問い合わせください。">
  </textarea>
  <button type="submit" name="button" value="送信"></button>
</form>

 

↑こんな感じで自分のサイト内のフォームを設置したい場所にHTMLを書いてフォームを作成します。

メアドと問い合わせ内容だけの簡易サンプルなので、Googleフォームで作った内容と合わせて好きなように項目を追加してください。

デザインは自分のサイトなので自由にCSSなどでカスタマイズしちゃえます。


出来たら、Googleフォームに戻ってGoogleフォームのプレビュー画面に行きましょう。

Googleフォームのソースから情報を探す

Googleフォームのプレビュー画面のソースの開き方は

まずGoogleフォームの画面から

Googleフォームプレビュー方法

右上の目のアイコンをクリック。

 

Googleフォームのソースの表示方法

プレビュー画面のどこか背景部分などで右クリックで出てくる「ページのソースを表示」を選択します。

すると…

 

Googleフォームのソース表示例

こんな感じのコードがズララララっと出てくると思います。

そこでキーボードの「Ctr」+「F」を同時押しすると文字列を検索するウィンドウが表示されます。

 

そこでフォームのタグの部分と、作成したフォームの項目の名前で検索をかけます。

フォームタグについては

「<form action」

と検索すると出てきます。

この部分から「>」というformタグが閉じられている部分までをコピーしてメモ帳などに一旦ペーストしておきましょう。

 

項目名の方は僕の作成したフォームでいうと

Googleフォーム作成例、項目名

「メールアドレス」

「お問い合わせ内容」

 

この項目名でソースに対して検索をかけるといくつか候補が出てくるかと思いますが、その中でも以下のような場所↓

 

[[XXXXXXXX,"メールアドレス",null,0,[[XXXXXXXX,null,1]

 

[]で囲まれたJavaScriptの配列になっているところを探します。

XXXXXXXXXとしていますがここには数字が入っているかと思います。

この数字の後ろの方、上の例でいう赤い部分の数字をコピーして覚えておきます。

 

自分のサイトのフォームに割り当てる

先ほどのメモ帳などにコピペしておいたフォームタグと数字を自分のサイトのHTMLへ適用していきます。

まずは<form ~>をまるまる先ほどのコピーしたタグへ置き換えちゃいましょう。

必要なのは「acrtion="○○○○"」の部分ですが、全部置き換えても問題ないです。

 

そして、インプットやテキストエリアなど各タグのname属性に先ほどの配列からコピーしてきた数ケタの数字を入力します。。。。。

 

が、大事なのはここで

「name="entry.XXXXXXXXXXX"」

という風に「entry.」と数字の前に付け足す必要があります。

 

 

私の場合はこんな感じになりました。

 

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdZ2hGaDxtqpsl9GCmW8Fux3k-fFOozQH3-II1klwEr9rz7MQ/formResponse" >
  <label for="email">メールアドレス</label><br>
  <input id="email" type="text" name="entry.1215603079" placeholder="example@mail.co.jp" style="width: 100%; margin-bottom: 0.5em;"><br>
  <label for="msg">お問い合わせ内容</label><br>
  <textarea id="msg" name="entry.1925871011" placeholder="お気軽にお問い合わせください。" style="width: 100%; margin-bottom: 0.5em;"></textarea><br>
  <button type="submit" name="button" value="送信">送信</button>
</form>

 

ここまで出来たら完成!

 

 

 

ちゃんとフォームを入力してみてGoogleフォームへ送信されるか確認してみましょう。

 





 

まとめ

ちゃんと送信できたでしょうか。

一点、まだGoogleFormsっぽさが残る点としてはフォーム送信後にGoogleの画面に遷移してしまうこと。

そこはもう少し工夫が必要そうです。それについて対処法もあったのでまた追々書ければと思います((Part.3で画面遷移無しでフォーム送信する方法について書きました!

 

webabc.hatenablog.jp

 

ひとまずGoogleFormsを使えばWordpressPHPなどサーバーサイドを学ぶよりはるかに簡単にフォームが設置出来ました。

初学者の方などポートフォリオなんかでお問い合わせフォームが必要となったら実践してみるとよいのではないかと思います。

 

Googleフォームの埋め込み記事の他パートはこちら

 

webabc.hatenablog.jp

webabc.hatenablog.jp

 

 

▼レスポンシブ等よく使われるレイアウトを通して学習するオススメの参考書です。ブログカスマイズやフォームを埋め込む上でもしっかりHTML/CSSの基礎を学んでおくと良いと思います。

 

 参考・引用qiita.com

 

www.gorilla-web.net