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

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

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

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

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

<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=".+@.+..+" 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>

/*--------------------------------------
コンタクトフォーム
--------------------------------------*/
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;
}