レッスンお疲れさまでした。

本日は、問い合わせフォームなどを行いました。

まず、実際の問い合わせフォームの動作を確認しました。

フォームの各項目を入力し、確認ボタンで確認画面を表示、リセットボタンで入力した内容をクリアします。

よければ送信ボタンで送信、前画面に戻るボタンで前の画面へ戻ります。

送信後、ありがとうございました画面が表示され、トップページへ戻るで指定したトップページへ戻ります。

ダウンロードしたサンプルの問い合わせフォームは、レスポンシブ(スマホ)対応していませんので、スマホに対応できるよう修正します。

Bootstrapを使用しているので、1行を12カラムに分けレイアウトしていきます。

2カラムと10カラム

3カラムと9カラム

4カラムと8カラム

など。

2カラムと10カラムに分け、さらに10カラムの中を細かく分ける場合、10の中を5と5の合計10に分けるのではなく、10の中に12のカラムがあると考え、6と6の合計12になるように分けます。

htmlに入力フォームを作り、phpでメールの送信部分を作ります。

入力フォームにサンプルにはなかった項目を追加したい場合、ゼロから作るのは大変なので、追加したい項目に近いレイアウトをサンプルから探し、コピーして「name=”○○”」の○○部分を項目の名前にします。

php側の設定により、必須入力の項目やメールアドレスのチェック、オリジナルのありがとうございました画面を設定できます。