Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
4
Help us understand the problem. What are the problem?

GoogleフォームをカスタマイズしてHPに埋め込む【こまりメモ】

こんにちは。
こまりまゆこです。
自分が学習したことを載せています。

「Googleフォームを自分でカスタマイズしてHPに埋め込もう」

【主な内容】

・Googleフォームをとは?
・土台となるフォームの作り方
・カスタムに必要な数字とURL
・完成形

Googleフォームとは?

googleform.png

一言でいうと、アンケートや問い合わせフォームを簡単に作れるGoogleのサービス。
誰でも無料で使えるのも人気な点で様々な場面で使用されている。
回答も集計してくれるなど大変使いやすい。
https://www.google.com/intl/ja_jp/forms/about/

実際にフォームを作ってみよう

①「Googleフォームを作ってみる」から入る

②作りたいフォームを選ぶ(今回は連絡先情報を選択)
カテゴリ.jpg

③フォームの項目を作る
form.jpg

「連絡先情報」を選択した場合は
名前 / メールアドレス / 住所 / 電話番号 / コメントの項目が既に入っている。

必要ない項目⇒ゴミ箱(赤丸)で削除
項目を追加したい⇒+ボタン(青丸)で追加
右下の必須をONにすると必須項目となる。

基本的には「記述式」がよく使用されているが、「ラジオボタン」も入れてみる。

radio.jpg

④フォームの完成形はこちら
https://forms.gle/iWHr1ijVq735uNjf6

※チェックしておくと良い事※
Googleフォーム設定の回答⇒「回答を一回に制限する」をONにすると何回も回答されることを防げる。
逆に何回も回答してOKなフォームにする場合、元々設定がONになっている事があるので、念のため確認しておくと良い:writing_hand_tone1:
完了.jpg

カスタムに必要な数字とURL

①まずは必要な数字を探します。
デベロッパーツールを開き「名前」を検索(CTRL+F)。

②3箇所くらいヒットする中のここの部分を見つける
→ここというのは項目名が大体載ってる箇所
検索.jpg

③すべての項目の数字をメモ

[[1987654320,"名前",null,0,[[123456789,nill,1]]]

前の部分の数字ではなく赤文字の部分の数字なので要注意!

④URLはデベロッパーツールで「<form」と検索
下記の部分をメモにコピペしておく。
「<form action="https://docs.google.com/forms/u/0/d/e/●●----------------●●" target="_self"」
url.jpg

フォームをカスタムしていく

記載されてるHTMLは自分が使用しているものなのでカスタムしてください。
(必須のところやボタン箇所)

①フォームコード1行目

メモしていたURLを入力。

index.html
<form action="https://docs.google.com/forms/u/0/d/e/●●----省略----●●/formResponse" target="_self">

②2行目から

メモした番号を「entry.番号」の「番号」に入れていく。
※性別の所だけに箇所番号があるが同じものを入れる。
コードの色付きがバラバラで見づらい為コピペして見てください:bow_tone1:

index.html
  <ul>
    <li>お名前<span>※必須</span>
      <input name="entry.番号" type="text" required="required" class="textbox" placeholder="お名前">
    </li>
    <li>メールアドレス <span>※必須</span>
      <input name="entry.番号" type="text" required="required" class="textbox" placeholder="メールアドレス">
    </li>
    <li>電話番号 <span>※必須</span>
      <input name="entry.番号" type="text" required="required" class="textbox" placeholder="電話番号">
    </li>
    <li>性別 <span>※必須</span></li>
      <label><input type="radio" name="entry.番号" value="男性">男性 </label><label><input type="radio" name="entry.番号" value="女性">女性</label>
    </li>
    <li>コメント
      <textarea name="entry.55207288" class="textbox" placeholder="コメント"></textarea>
    </li>

    <input type="submit" id="btn" value="送信する">

 </ul>
</form>

classなどはcssを作る際に使用する部分に入れています。

③必須項目、コメント欄確認

入力必須にする為のコード ↓

 required="required"

コメント欄の中に文字を入れる為に使用するコード ↓

placeholder="●●"

入っているか確認。

④完成形はこちら

凄いシンプルすぎる:sweat_smile:
完成.jpg

全てまとめたコードはこちら
<form action="https://docs.google.com/forms/u/0/d/e/●●----省略----●まる/formResponse" target="_self">
<ul>
    <li>お名前<span>※必須</span>
      <input name="entry.番号" type="text" required="required" class="textbox" placeholder="お名前">
    </li>
    <li>メールアドレス <span>※必須</span>
      <input name="entry.番号" type="text" required="required" class="textbox" placeholder="メールアドレス">
    </li>
    <li>電話番号 <span>※必須</span>
      <input name="entry.番号" type="text" required="required" class="textbox" placeholder="電話番号">
    </li>
    <li>性別 <span>※必須</span></li>
      <label><input type="radio" name="entry.番号" value="男性">男性 </label><label><input type="radio" name="entry.番号" value="女性">女性</label>
    </li>
    <li>コメント
      <textarea name="entry.55207288" class="textbox" placeholder="コメント"></textarea>
    </li>
    <input type="submit" id="btn" value="送信する">
 </ul>
</form>

CSSでカスタマイズ

cssで色付けして完成したものがコチラ!
お問い合わせフォーム.jpg

CSSはこちら
@charset utf-8;

body{
  background-image: url("images/背景.jpg");
  background-size:cover;
  background-repeat: no-repeat;
}

form {
  background-color: rgba(255, 255, 255, .8);
  width: 700px;
  height: 650px;
  margin: 100px auto;
  padding: 20px 40px 20px 0;
}

h1 {
  text-align: center;
}

ul {
  list-style-type: none
}

li {
  margin: 15px 0;
}

p {
  font-weight: bold;
}

span {
  background-color: rgba(255, 102, 102, .5);
  font-size: 10px;
  border-radius: 5px;
  padding: 3px;
}

.textbox{
  display: block;
  padding: 10px 0 10px 10px;
  width: 640px;
}

label {
  padding-right: 10px;
}

#btn {
  border: 1px solid #000;
  background-color: rgba(133, 198, 181, .3);
  border-radius: 5px;
  padding: 10px 20px;
  margin: 10px 0 0 40px;
  font-weight: bold
}


※レスポンシブデザインではない為ご自身で自由に編集してください
背景も画像になってますが色でもOK。

上記の手順で完成となります!

最後に

次回は送信を押したときのサンクスページの追加方法です!
メモを載せていますがどなたかの参考になれば嬉しいです:person_frowning_tone1:

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?