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

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

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

フォームのマークアップ

今回の項目は、法人名・お名・メールアドレス・お問い合わせ内容です。

<form class="contact-form">
    <div class="contact-item">
        <label class="contact-item-label">法人名</label>
        <div class="contact-item-body">
            <div class="contact-item-text">
                <input type="text" class="c-input-text" required autofocus />
            </div>
        </div>
    </div>
    ...
    <div class="contact-item contact-item--button">
        <div class="contact-button">
            <button type="submit" class="c-button c-button--size-medium">送信する</button>
        </div>
    </div>
</form>

項目ごとに contact-item → label + contact-item-body の入れ子にします。見た目の余白とラベル幅を揃えやすくなります。

実務では label の for と入力要素の id を対応させるのが基本です。まずはこのサンプルの構造を再現してみましょう。

スタイリング

入力欄は c-input-text / c-textarea を使います。textarea は高さを確保し、必要なら縦方向だけリサイズできるようにします。

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