Google フォームのデザインカスタマイズ・内容をメールで送信

クリックできる目次

フォームの内容を自分宛てにメール

フォームが送信されたときに、入力内容と同じものを自分宛てにメールできるようにしましょう。

右上の縦の…アイコンから

アドオンをクリックします。

Email Notifications for Forms をインストール

フリー版では送信制限があり1日20通までとなっています。

アドオンの一覧が表示されるので「Email Notifications For Forms」をさがしてクリックしましょう。

見つからなければ上の検索欄で検索できます。

アドオン一覧

インストールをクリック

インストール

アドオンのインストールには権限が必要なので、Googleアカウントの確認をします。

権限

フォーム作成画面に戻り、ブラウザを再度読み込みしましょう。

右上にアドオンアイコンが追加されるので、クリックして「Email Notification for Forms」を選択します。

アドオンアイコン

新しくメール通知を設定するときは一番上の「Create Email Notification」を選択しましょう。

通知ルールを作成

右下にアドオンの設定画面が表示されます。

{{ XXX }} の部分はGoogleフォームで入力された内容が自動的に入ります。そのままコピペして下さい。

  • Rule Name:ルール名
  • Email Address(es) to Notify : ここに送信先の自分のメールアドレス
  • Sender’s Email:そのままでOK
  • Sender’s Name:{{お名前}}
  • Reply-to Address:{{連絡先メールアドレス}}
カスタム1
カスタム2

メールの内容をカスタマイズすることができます。

「Code Your Own HTML」を選択。

「Email Subject」には通知メールの件名を入力しましょう。

「Email Message Body」の中に以下のコードをコピペします。

<p>【マイブログ】のフォームからお問い合わせ</p>
<p>【送信日時】{{Response Date}} </p>

<p>[お名前]<br>{{お名前}} </p>
<p>[メールアドレス]<br>{{連絡先メールアドレス}} </p>

<p>[件名]<br>
<pre>{{件名}}</pre></p>

<p>[お問い合わせ内容]<br>
<pre>{{お問い合わせ内容}}</pre></p>

最後に、一番下の「SAVE RULE」をクリックして保存して下さい。

「MANAGE RULES」から既存のルールを編集できます。

ここで、日時の設定を日本に合わせておきましょう。

「Date Format & Timezone」からタイムゾーンを 「GMT+9:00 tokyo」にします。

そして、 「Specify Date Format」を 「yyyy/MM/dd HH:mm」と入れましょう。

UPDATE」をクリックして保存します。

日時

これで完成です。

実際にフォームから送って動作を確認してみましょう。

こんな感じで自分宛てにメールが届きます。

フォーム送信者にもメールを送る

送信ルールの中で、「Nofify Form Submitter」にチェックを入れておくと、フォームを送信した人にも同じ内容のメールが届きます。

必須ではありませんが、確認メールを送りたい場合はチェックしておきましょう。

Google フォームの回答をスプレッドシートに保存

フォームで送信された内容をGoogle スプレッドシート(表計算ソフト)に保存できます。

あとで内容を集計する際などに非常に便利です。

フォーム編集画面上部の「回答」を選んで右のアイコンをクリックしましょう。

スプレッドシート

回答の保存先を作成します。

新しくスプレッドシートが作成されました。フォームが送信されると下の列に挿入されていきます。

こんな感じで追加されます。

Google フォームのデザインをカスタマイズ

  • 入力内容・文字数を検証
  • 入力欄が問題なければ色を変えてチェックマークを表示

まずはこちらのコードをエディターなどにコピペしてください。

<div class="form-box">
    <form class="contact-form" action="https://docs.google.com/forms/u/5/d/e/XXXXX/formResponse">

        <p><label for="name"><span class="must">必須</span> お名前<br>
        <input id="name" class="form-text" name="entry.XXXXXXXXX" required="" type="text" pattern=".{2,}" placeholder="例) 山田 花子"></label></p>

        <p><label for="email"><span class="must">必須</span> 連絡先メールアドレス</label><br>
        <input id="email" class="form-text" name="entry.XXXXXXXXX" required="" type="text" pattern="[email protected]+..+" title="メールアドレスは、[email protected] のような形式で記入してください。" placeholder="例) [email protected]"></p>

        <p><label for="subject"><span class="free">任意</span> 件名</label><br>
        <input id="subject" class="form-text-op" name="entry.XXXXXXXXX" type="text" placeholder="ご自由に入力して下さい。"></p>

        <p><label for="msg"><span class="must">必須</span>お問い合わせ内容</label><br>
        <textarea id="msg" class="form-area" name="entry.XXXXXXXXX" required="" minlength="20" title="20文字以上ご入力ください。" placeholder="ご自由に入力して下さい。"></textarea></p>

        <p><label for="robot"><span class="must">必須</span><i class="fas fa-robot"></i> スパムロボット対策中</label><br>
        <input id="robot" class="form-robot" name="entry.XXXXXXXXX" required="" type="text" pattern="みかん" title="入力内容を確認してください。" placeholder="ここにひらがなで「みかん」と入力してください。"></p>

        <p><button type="submit" class="form-submit">フォームを送信</button></p>
    </form>
</div>

.entry-XXXXXXXXX となっているところを自分のフォームに合わせて編集する必要があります。

フォームの編集画面から目のアイコンでプレビューしてから、ブラウザで右クリックしてソースコードを開いて下さい。

Ctrl + F や ⌘ + F をして検索パネルを開き「entry.」を検索して、必要な箇所を探します。

今回の場合だとそれぞれ5つの項目に対応する entry.XXXXXXXX があるのでコピーして、さきほどのエディタのコードへ貼り付けて下さい。

  • お名前
  • 連絡先メールアドレス
  • 件名
  • メッセージ内容
  • スパムロボット対策

直前に「aria-label (読み上げ用のラベル)」があるので、それを参考にどの entry.XXXXXXXX をコピーしているのかを確認できます。

entryをさがす

そして今度は、ソースコード内で「form action」で検索します。すると action=”XXX” のところに、Googleフォームに送信するためのURLが表示されるのでこれをコピーして、エディタのコードへ貼り付けます。

貼り付けるところは、<iframe src=”XXX” …> のところです。

https://docs.google.com/forms/u/0/d/e/XXXXX/formResponse

ここまで終わったらコンタクトフォームを設置した固定ページの編集画面開いてカスタムHTMLブロックにコードを貼り付けて下さい。

スタイルシートを編集してデザインを整える

つづいてWordPress の子テーマ内の「style.css」へ追記しましょう。

/*--------------------------------------
コンタクトフォーム
--------------------------------------*/
form.contact-form {
	max-width: 600px;
	margin: 0 auto;
}

@media only screen and (min-width: 768px) {
	/*PCでの設定*/
	div.form-box {
		border: 1px solid #ddd;
		border-radius: 0px;
		padding: 2em 1em 1em;
	}
}

.must {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #F92931;
	border-radius: 20px;
}

.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #424242;
	border-radius: 20px;
}

form p {
	font-weight: 600;
}

input.form-text, .form-text-op, input.form-robot, textarea.form-area {
	width: 100%;
	padding: 8px 15px;
    margin: 8px 10px 10px 0;
	border: 2px solid transparent;
	border-radius: 20px;
	box-shadow: 0 0 10px #ddd;
	box-sizing: border-box;
    outline: 0;
}

input.form-robot {
	background: #fff5f7;
	border-color: rgba(255,84,102,0.4);
}

input.form-robot::placeholder {
	font-weight: 900;
	color: rgba(255,84,102,0.8);
}

textarea.form-area {
	height: 200px;
}

input.form-text:valid, textarea.form-area:valid,input.form-robot:valid  {
	background: rgba(222, 243, 255, 0.8);
	border: 2px solid  #fff;
}

input.form-text:valid,
textarea.form-area:valid,
input.form-robot:valid {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' id='_x35_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='width: 32px; height: 32px;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E	.st0{fill:%231B2D4E;}	.st1{fill:%23FFFFFF;}	.st2{opacity:0.1;fill:%23040000;}%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M512,256c0,15-1.3,29.6-3.8,43.8c-14.2,82.5-67.8,151.4-140.9,186.8C333.7,502.9,295.9,512,256,512		C114.6,512,0,397.4,0,256C0,114.6,114.6,0,256,0C397.4,0,512,114.6,512,256z'%3E%3C/path%3E%3Cpolygon class='st1' points='370.4,150.5 245,275.9 186.1,217.1 143.3,259.9 202.1,318.7 245,361.6 413.2,193.3 	'%3E%3C/polygon%3E%3Cpolygon class='st2' points='427.2,242.6 259,410.8 157.3,309.2 175,291.6 202.1,318.8 245,361.6 395.5,210.9 	'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
	background-position: 98%;
	background-repeat:no-repeat;
	background-size: 20px;
	border-color: #71ADE1;
}

button.form-submit {
	margin-top: 2em;
	background: linear-gradient(90deg, #1B2D4E 0%, #2F4E88 100%) no-repeat 50% 50% / 100% 100%;
	border: none;
	border-radius: 20px;
	width: 100%;
	height: 50px;
	font-size: 20px;
	color: #fff;
	border-radius: 50px;
	font-weight: 600;
	cursor: pointer;
	transition-duration: 500ms;
	border-radius: 50px;
}

button.form-submit:hover {
	opacity: 0.7;
}

Google フォームで別の入力欄や選択方式(ラジオボタン)などを設置した場合には個別カスタマイズが必要となります。

ConoHa WING

おすすめの国内最速級レンタルサーバー

月760円〜

初めてでも安心。ブログ移転もしやすい「WordPressかんたん移行」

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

この記事を書いた人

サーバーの魅力に取りつかれ、誰にでも分かりやすいサーバー紹介サイトを目指して日夜勉強中。ブログを作りたい人を応援します。

クリックできる目次
閉じる