Zenn
📨

Google FormをHTML/CSSでデザインしたフォームで運用する方法

2021/12/18に公開
CSS
HTML
Google
Google Forms
#
コーディング
tech

WEBサイトをつくっているとぶつかる問い合わせフォーム制作案件。

問い合わせフォームのためだけにWordPress使うのも面倒だし、かといってGoogle Formは便利だけどそのまま埋め込むと味気ない。

Google Formをそのまま埋め込んだ場合デザインのトンマナが崩れがちだし手抜き感も出る…。

今回はこの埋め込みをHTML/CSSでコーディングしてそれっぽい感じでデザインする方法について紹介します。

Google FormをHTML/CSSでデザインして反映させた場合実はこれもGoogle Form！

▶デモページ

目次

  1. Google Formを作成する
  2. Google Formから必要な情報を抜き出す
  3. HTMLの問い合わせフォームに反映させる
  4. THANKSページを実装する

①まずはGoogle Formを作成する

まずはGoogle　DriveでGoogle　Formを作成しましょう。
（もう作成済みの方は②に移動してください。）

GUIで簡単に操作できるので詳しくは説明しませんが、テキストを打って作成することができます。

Google Formを作成したら、送信ボタンを押してリンクで共有できます。

このリンクをもとに次のステップを進めていきます。

②Google Formから必要な情報を抜き出す

Google Formが作成できれば、まずは普通にページとして表示させます。

▼こんな感じですね。
https://docs.google.com/forms/d/e/1FAIpQLSe00eJN0CWayVTtmGW0ONrc6MT8bA5no3F9iHgbGwaOm18KRw/viewform

そして、検証ツールを使って問い合わせフォーム作成に必要な情報を抜き出していきましょう。

必要な情報としてはこの２つ。

  • Google Formの長文リンク
  • 各項目のnameプロパティ

順に取得方法を解説していきます。

Google Formの長文リンク

まずはGoogle Formの長文リンクが必要です。（短縮リンクだとエラーが起こりました。）

確実にリンクを取得できるのはGoogle Form内に埋め込みから取るパターンですね。
検証ツールを使って取得しましょう。

▼　検索窓に<form と打ってGoogle Formの正式な（？）リンクを抜き出します。

この<form action="">の中身のリンクを使います。
https://docs.google.com/forms/u/1/d/e/1FAIpQLSe00eJN0CWayVTtmGW0ONrc6MT8bA5no3F9iHgbGwaOm18KRw/formResponseですね。

各項目のnameプロパティ

次に、入力した各項目の内容を取得できるようにnameプロパティを抜き出していきます。

検証ツールで各項目を選択してみましょう。

▼　各項目の題名である「名前（会社名）」とかがプロパティとして入力されているところを探しましょう。

使うのはこのタグ。

<div jsmodel="CP1oW" data-params="%.@.[2039937536,"お名前（会社名）",null,0,[[690315515,[],true,[],[],null,null,null,null,null,[null,[]]]],null,null,null,[]],"i1","i2","i3",false]">

このタグで言うところの690315515の数値がnameの内容になるのでメモしておきましょう。

↓data-params内の太字部分ですね。
data-params="%.@.[2039937536,"お名前（会社名）",null,0,[[690315515,[],true,[],[],null,null,null,null,null,[null,[]]]],null,null,null,[]],"i1","i2","i3",false]"

▼　同じ要領で他の項目の数値も抜き出します。

上の画像で言うと1726417427になりますね。

▼ こんな感じで情報が抜き出せれば次にHTMLで作成した問い合わせフォームに反映させていきましょう。

https://docs.google.com/forms/u/1/d/e/1FAIpQLSe00eJN0CWayVTtmGW0ONrc6MT8bA5no3F9iHgbGwaOm18KRw/formResponse
690315515
310605352
1726417427

③HTMLの問い合わせフォームに反映させる

Google Formに必要な情報がそれぞれ取得できれば、HTMLの問い合わせフォームに反映させていきましょう。

ベースのHTML/CSS

問い合わせフォームの画面とHTML/CSSはこんな感じです。

問い合わせフォームの画面

HTMLのコード
<p style="text-align: center; margin: 40px auto">
	お気軽にお問い合わせください。
</p>
<form class="c-form">
	<div class="c-form__item">
		<label class="c-form__label" for="field-name"
			>名前・会社名<span class="c-form__required">必須</span></label
		>
		<input
			class="c-form__input"
			id="field-name"
			placeholder="株式会社 山田"
			type="text"
			required="required"
		/>
	</div>
	<div class="c-form__item">
		<label class="c-form__label" for="field-mail"
			>メールアドレス<span class="c-form__required">必須</span></label
		>
		<input
			class="c-form__input"
			id="field-mail"
			placeholder="sample@gmail.com"
			type="email"
			required="required"
		/>
	</div>
	<div class="c-form__item">
		<label class="c-form__label" for="field-message">メッセージ内容</label>
		<textarea
			class="c-form__input"
			id="field-message"
			placeholder="お問い合わせ内容"
		></textarea>
	</div>
	<div class="c-form__submit">
		<button type="submit">送信する</button>
	</div>
</form>
CSSのコード
.c-form {
	max-width: 600px;
	margin: 0 auto;
}
.c-form__item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin-bottom: 20px;
}
.c-form__label,
.c-form__input {
	padding: 10px;
}
.c-form__label {
	width: 90%;
}
.c-form__input {
	width: 90%;
	font-size: 16px;
	border: solid 1px #333;
	border-radius: 4px;
}
.c-form__input:focus-visible {
	outline: green auto 1px;
}
.c-form__required {
	color: #fff;
	background-color: green;
	border-radius: 4px;
	padding: 5px 5px;
	margin: 0 0 0 18px;
}
textarea.c-form__input {
	height: 160px;
}
.c-form__submit {
	text-align: center;
}
.c-form__submit button {
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	background-color: green;
	border: solid 1px green;
	border-radius: 4px;
	padding: 5px 32px;
	transition: 0.4s;
	cursor: pointer;
}
.c-form__submit button:hover {
	color: green;
	background-color: transparent;
}

@media (min-width: 640px) {
	.c-form__item {
		flex-wrap: nowrap;
	}
	.c-form__label {
		width: 40%;
	}
	.c-form__input {
		width: 55%;
	}
}

HTMLにGoogle Formの情報を組み込む

ベースのHTMLをもとに先程抜き出したGoogle Formの情報を組み込んでいきましょう。

まずは、<form>タグ。
<form action="">内に、リンクを載せて、ついでにPOST送信などの情報も書いておきます。

<form
　 action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSe00eJN0CWayVTtmGW0ONrc6MT8bA5no3F9iHgbGwaOm18KRw/formResponse"
  method="POST"
>

次に、各項目のinputタグやtextareaタグにnameに記載する数値を載せていきます。
注意点としては数値そのままではなく、数値の前にentry.が必要なこと。以下コードを参考に反映させてみてください。

<input
    name="entry.690315515"
    class="c-form__input"
    id="field-name"
    placeholder="株式会社 山田"
    type="text"
    required="required"
/>

同じ要領で、他の項目のタグにも反映させていきましょう。

<textarea
    name="entry.1726417427"
    class="c-form__input"
    id="field-message"
    placeholder="お問い合わせ内容"
></textarea>

一通り、項目に数値が反映させられれば、一旦問い合わせ機能としては成立します。🎉🎉🎉

④THANKSページを実装する

以上で問い合わせ機能としては成立しました。
ただ、問い合わせを受け付けたあとに表示するページがGoogle Formそのままなので、THANKSページを作成していきましょう。

THANKSページはHTMLで各自作成してください。
ページが作成できれば、HTMLを少しいじります。

いじるのはformタグと、bodyタグ前に設置するJavaScript。
以下のようにコードを追加しましょう。
THANKSページのURLだけは各々変更してみてください。

<form
    action="https://docs.google.com/forms/u/1/d/e/1FAIpQLSe00eJN0CWayVTtmGW0ONrc6MT8bA5no3F9iHgbGwaOm18KRw/formResponse"
    method="POST"
    target="hidden_iframe"
    onsubmit="submitted=true;"
    class="c-form"
>

<script type="text/javascript">
    let submitted = false;
</script>
<iframe
    name="hidden_iframe"
    id="hidden_iframe"
    style="display: none"
    onload="if(submitted){window.location='THANKSページのURL';}"
></iframe>

以上のコードを反映させれば、THANKSページに遷移されるかと思います。

最後に

ということで、Google FormをHTML/CSSでデザインしたフォームで運用する方法の解説でした。

問い合わせを埋め込みたいけどデザインのトンマナをあわせたい
フォームのためだけにWordPressを実装するのは面倒
問い合わせ内容をGoogle Formで管理したい

こういったときの参考になれば幸いです。

それでは。👋

Discussion