お問い合わせページの作成

最後に、お問い合わせページを作ります。フォームの基本的なマークアップを確認しましょう。

フォーム作成についてさらに深く学びたい方は、弊社のUdemy教材もご活用ください。見た目のカスタマイズや、コーダーとして知っておくべき知識を解説しています。

フォームのマークアップ

今回の項目は「お名前」と「お問い合わせ内容」の2つです。

<form action="">
    <div class="contact-form-list">
        <div class="contact-form-item">
            <label for="name" class="contact-form-label">お名前</label>
            <input type="text" name="name" id="name" class="contact-form-name" placeholder="山田 太郎" />
        </div>

        <div class="contact-form-item">
            <label for="inquiry" class="contact-form-label">お問い合わせ内容</label>
            <textarea name="inquiry" id="inquiry" class="contact-form-inquiry" placeholder="お問い合わせ内容をご記入ください。"></textarea>
        </div>

        <div class="contact-form-button">
            <button type="submit" class="c-button-green">送信する</button>
        </div>
    </div>
</form>

label の for と、入力要素の id は必ず対応させます。これでラベルをクリックしても入力欄にフォーカスできます。

スタイリング

入力欄は、枠線・余白・角丸を整えるだけで見栄えが良くなります。textarea は高さを確保し、必要なら縦方向だけリサイズできるようにします。

送信ボタンは、共通コンポーネントの c-button-green を使います。

ここまでできたら、全5ページのサイト完成です。サンプルコードと見比べて、良いと思った書き方を取り入れてみてください。