お問い合わせフォームの機能をページに盛り込む場合、フォーム送信されたデータを受信してメールを送信する処理をWebサーバー側で行う必要があるので、一般的には実装するにはサーバー側のプログラミングの知識が必要です。
運用を考えると、Googleフォームのように、送信内容がスプレッドシートへ保存されると有難いです。
GoogleフォームをHTMLへ埋め込んでCSSでスタイル調整する方法は、Googleが推奨している方法ではありませんので、規定通りにフォームを埋め込む場合、Webサイトの雰囲気に合わせるには限度があります。（色の変更は少しできます）
Googleフォームへ画面遷移すると、Webサイトの外へ出てしまいますので、 なるべくサイトの中へ留まってほしいところです。
そこで、Googleフォームを作成し、ボタンをクリックしたらFancyboxでポップアップして表示するような動きを実装してみます。
Googleフォームを作成する
まずはGoogleフォームを作成しましょう。Googleアカウントでログインが必要です。
Google Forms
https://docs.google.com/forms/u/0/
「空白のフォーム」をクリックして、新しいフォームを作成しましょう。
フォームの作成例
フォームの作成例は、以下の動画を参考にしてください。
フォームを作成し終わったら、埋め込み用のHTMLコードをコピーしておきましょう。
ボタンをクリックしたらポップアップするエリアを作成する
Fancyboxを組み込み、modal要素の中にGoogleフォームの埋め込みタグ（iframeタグ）をペーストします。
HTML
予め、Fancyboxの組み込みを行っておきます。（以下参照）
https://learn.frog-eight.info/slider_popup/#index_id5
iframeタグの部分が、Googleフォームの埋め込みタグです。
<!-- セクション -->
<section class="section" id="gform">
<div class="container">
<h2 class="section-title">Googleフォーム</h2>
<div class="section-content">
<a class="btn-gform vibrate observerTarget" data-fancybox="gform" data-src="#modal-gform"
href="javascript:;">お問い合わせフォーム</a>
<div class="modal" id="modal-gform">
<!-- Googleフォームの埋め込みコード -->
<iframe
src="https://docs.google.com/forms/d/e/1FAIpQLSc0MujRjcZ2OZb0fJgDlAekJuaHMlQdTOUdTAI8vqK76BM5vA/viewform?embedded=true"
width="640" height="743" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
</div>
</div>
</div>
</section>CSS
modalは、非表示にしておきます。
Googleフォーム用のボタンのCSSを定義しています。
/*Fancybox*/
.modal {
display: none;
}
/*Googleフォーム*/
.btn-gform {
color: #fff;
text-decoration: none;
background-color: #4285f4;
padding: 10px 20px;
border-radius: 5px;
display: inline-block;
transition: 0.3s;
}
.btn-gform:hover {
background-color: #42adf4;
}Googleフォームの動作確認
埋め込んだフォームを起動してみましょう。
ポップアップ内でフォームを一番下までスクロールすると表示されている「このコンテンツは Google が作成または承認したものではありません。」という文章は、無料での利用では表示されてしまうようです。
（有料プランの場合は、文言を変更できます）
