お問い合わせフォームの作成

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

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

フォームのマークアップ

今回の項目は「お名前」「メールアドレス」「お問い合わせ内容」です。サンプルでは、ラベルを span で置き、必須バッジを並べています。

<section class="top-contact l-section">
    <form>
        <div class="top-contact-inner">
            <div class="top-contact-item">
                <span class="top-contact-item-label">
                    お名前
                    <span class="top-contact-required">必須</span>
                </span>
                <div class="top-contact-item-body">
                    <div class="top-contact-item-text">
                        <input type="text" class="c-input-text" required />
                    </div>
                </div>
            </div>
            ...
            <button type="submit" class="top-contact-button">送信する</button>
        </div>
    </form>
</section>

実務では label の for と入力要素の id を対応させるのが基本です。このサンプルは見た目重視の構成なので、まずはレイアウトと部品の組み立てを優先して問題ありません。

スタイリング

入力欄は、先ほど作った c-input-text / c-textarea を使います。ダーク背景では、枠線を少し明るくすると入力欄が見つけやすくなります。

送信ボタンは top-contact-button として、フォーム専用の見た目にしています。

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