デイトラweb制作中級編 DAY30~32③

実在するサイトをゼロから作成する 3日目
今回進めた範囲(PC) ↓

今回進めた範囲(レスポンシブ) ↓

苦戦したところ
Googleフォームとの紐づけ
自分で作成したコンタクトフォームだけだと入力した内容が送信されないため、Googleフォームを利用する
→ 公式サイト
①作成画面の機能(使用したものだけ)
画面1

画面2

②必要なものを引用する
フォームが完成したらプレビュー画面に移動、デベロッパーツールを使って、「<form」と検索
(Windowsの場合 Ctrlキー + F で検索バーを表示)
→ 下線部分を<form>の「action」に引用

「entry.」と検索
→ 4つ該当する箇所が出るため、上から「お名前」「お問い合わせ内容」「法人/個人の選択」「プライバシーポリシー」の<input>の「name」にそれぞれ引用する
→ メールアドレスは<input>の「name」に emailAddressと入れるだけ
例:「法人/個人の選択」の場合

→ <input>は2つあるので同じ<name>を2つ作成
※「_sentinel」は含まない
内容を入れて送信を押すと、

回答の画面で入力内容が確認できる

まとめ
今回でようやく中級総復習編が終わりました。
ゼロからサイトを作るのはまだ自分にはまだ難しいですね。
特にコンタクトフォームは、分からないことだらけで全部と言っても良いほど動画を見ながら作っていました。
次にサイトを作る時はこの経験を活かして、もっと速くサイトを作れるようにしたいです!