デイトラweb制作中級編　DAY18

2022年6月2日 最終更新日時 : 2022年6月7日 nakanonakano

お問い合わせフォームのコーディング

①HTML

「contact__from」の詳細

<section class="contact section">
    <div class="contact__inner inner">
        <div class="contact__head section-title">Contact</div>
        <div class="contact__from">
            <form action="" class="contact-from">
                <dl class="contact-from__dl">
                    <div class="contact-from__row">
                        <dt class="contact-from__label"><label for="your-name" class="is-required">お名前</label></dt>
                        <dd class="contact-from__input"><input id="your-name" type="text" placeholder="山田　太郎"></dd>
                    </div>
                    <div class="contact-from__row">
                        <dt class="contact-from__label"><label for="your-email" class="is-required">メールアドレス</label></dt>
                        <dd class="contact-from__input"><input id="your-email" type="email" placeholder="text@example.com"></dd>
                    </div>
                    <div class="contact-from__row">
                        <dt class="contact-from__label"><label for="your-kind">お問い合わせ種別</label></dt>
                        <dd class="contact-from__input">
                            <select name="" id="your-kind">
                                <option value="">セレクト1</option>
                                <option value="">セレクト2</option>
                                <option value="">セレクト3</option>
                            </select>
                        </dd>
                    </div>
                    <div class="contact-from__row">
                        <dt class="contact-from__label"><label for="your-message">お問い合わせ内容</label></dt>
                        <dd class="contact-from__input"><textarea name="" id="your-message"
                                placeholder="お問い合わせを入力してください"></textarea></dd>
                    </div>
                </dl>
                <div class="contact-from__radio">
                    // 「checked」で初期位置
                    <label><input type="radio" name="your-radio" checked><span>ラジオ1</span></label>
                    <label><input type="radio" name="your-radio"><span>ラジオ2</span></label>
                    <label><input type="radio" name="your-radio"><span>ラジオ3</span></label>
                </div>
                <div class="contact-from__check">
                    <label><input type="checkbox"><span><a href="">プライバシーポリシー</a>に合意する</span></label>
                </div>
                <div class="contact-from__button">
                    <input type="submit" value="送信する">
                </div>
            </form>
        </div>
    </div>
</section>

labelとフォームコントロールを結びつける

<label for="id名"></label>

<input id="id名" type="text">

※「label」「input」はセット

セレクトボックス（プルダウンメニュー）

<select name="" id="your-kind">
    <option value="">セレクト1</option>
    <option value="">セレクト2</option>
    <option value="">セレクト3</option>
</select>

※「name」は見た目が同じフォームでも識別可

複数行の入力が可能な入力欄

<textarea name="" id="" cols="30" rows="10"></textarea>

cols ・・・ 横の文字数

rows ・・・ 縦の行数

ラジオボタン

<label><input type="radio" checked>ラジオ1</label>

<label><input type="radio">ラジオ2</label>

<label><input type="radio">ラジオ3</label>

チェックボックス

<label><input type="checkbox"><span>プライバシーポリシーに合意する</label>

送信ボタン

<input type="submit" value="送信する">

※CSSで装飾する

②SCSS「.contact」~「.contact-from__label」

.contact {
    background: #EFEFEF;
}

.contact__from {
    margin: 80px auto 0;
    width: 800px;
    max-width: 100%;
    background: #fff;
    padding: 60px;

    @include mq('sp') {
        margin-top: 40px;
        padding: 24px;
    }
}

.contact-from__row {
    display: flex;

    @include mq('sp') {
        display: block;
    }

    &:not(:first-child) {
        margin-top: 60px;

        @include mq('sp') {
            margin-top: 30px;
        }
    }
}

.contact-from__label {
    width: 160px;
    padding: 5px 0 0;
    margin: 0;

    @include mq('sp') {
        width: 100%;
    }

    label {
        font-weight: 700;

        &.is-required {
            display: inline-block;
            position: relative;

            &::after {
                content: "必須";
                position: absolute;
                top: calc(100% + 2px);
                left: 0;
                font-size: 14px;
                font-weight: 700;
                color: #fff;
                background: #E81919;
                text-align: center;
                border-radius: 4px;
                padding: 2px 8px;
                line-height: 1;

                @include mq('sp') {
                    top: 50%;
                    transform: translateY(-50%);
                    left: calc(100% + 6px);
                    width: 44px;
                }
            }
        }
    }
}

③SCSS「.contact-from__input」~「.contact-from__radio」

.contact-from__input {
    width: calc(100% - 160px);
    margin: 0;
    padding: 0;

    @include mq('sp') {
        width: 100%;
        margin-top: 5px;
    }

    [type="text"] {
        box-shadow: none;
        border: 1px solid #707070;
        background: #fff;
        padding: 12px 16px;
        appearance: none;
        border-radius: 0;
        color: inherit;
        font-family: inherit;
        font-size: 14px;
        width: 100%;
    }

    [type="email"] {
        box-shadow: none;
        border: 1px solid #707070;
        background: #fff;
        padding: 10px 16px;
        appearance: none;
        border-radius: 0;
        color: inherit;
        font-family: inherit;
        font-size: 14px;
        width: 100%;
    }

    select {
        appearance: none;
        border-radius: 0;
        box-shadow: none;
        border: 1px solid #707070;
        padding: 10px 16px;
        color: inherit;
        font-family: inherit;
        font-size: 14px;
        width: 100%;
        background: #fff url(../img/select-arrow.png) no-repeat right 12px center / 17px 14px;
    }

    textarea {
        height: 240px;
        box-shadow: none;
        border: 1px solid #707070;
        background: #fff;
        padding: 10px 16px;
        appearance: none;
        border-radius: 0;
        color: inherit;
        font-family: inherit;
        font-size: 14px;
        width: 100%;
        resize: none;
    }
}

.contact-from__radio {
    margin-top: 32px;

    @include mq('sp') {
        margin-top: 26px;
    }
    // ラジオボタンを消す
    [type="radio"] {
        display: none;
    }
    // 新しくラジオボタンを作成
    span {
        display: inline-block;
        padding-left: 26px;
        position: relative;
        margin-right: 36px;

        @include mq('sp') {
            margin-right: 24px;
            margin-bottom: 8px;
        }

        &::before {
            content: "";
            width: 20px;
            height: 20px;
            border: 1px solid #707070;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: #fff;
            border-radius: 50%;
        }

        &::after {
            content: "";
            width: 10px;
            height: 10px;
            background: $color-main;
            position: absolute;
            left: 5px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
            display: none;
        }
    }
    // 選択すると装飾される
    [type="radio"]:checked + span {
        &::after {
            display: block;
        }
    }
}

疑似要素を使わずにアイコンをつける

inputやselectはコンテンツを持たないため、コンテンツの前後につける擬似要素は使えない

→　擬似要素の代わりに背景を使う

今回の場合

background: #fff url(../img/select-arrow.png) no-repeat right 12px center / 17px 14px;

right 12px center → 右から12px、上下中央

17px 14px　→　横幅17px、縦幅14px

サイズの変更を無効にする

textarea {
    resize: none;
}

④SCSS「.contact-from__check」~「.contact-from__button」

.contact-from__check {
    margin-top: 63px;
    text-align: center;

    @include mq('sp') {
        margin-top: 40px;
    }
    // チェックボックスを消す
    [type="checkbox"] {
        display: none;
    }
    // 新しくチェックボックスを作成
    span {
        display: inline-block;
        padding-left: 49px;
        position: relative;

        &::before {
            content: "";
            width: 25px;
            height: 25px;
            background: #fff;
            border: 1px solid #707070;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
        }

        &::after {
            content: "";
            width: 25px;
            height: 25px;
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
            background: transparent url(../img/checkbox.png) no-repeat center center / contain;
            display: none;
        }

        a {
            font-weight: 700;
        }
    }
    // 選択すると装飾される
    [type="checkbox"]:checked + span {
        &::after {
            display: block;
        }
    }
}

.contact-from__button {
    margin-top: 30px;
    text-align: center;

    [type="submit"] {
        // 背景でアイコンを設定
        background: $color-main url(../img/button-arrow.png) no-repeat right 12px center / 17px 14px;
        width: 304px;
        display: inline-block;
        font-weight: 700;
        color: #fff;
        padding: 14px 20px;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(#000, 0.16);
        appearance: none;
        font-family: inherit;
        border: none;
        font-size: 16px;
    }
}

まとめ

今回はお問い合わせフォームのコーディングをしました。

お問い合わせフォームを作るのは初めてで、SCSSだけでなくHTMLもなかなかコーディングできなくて苦戦しました。。。

少し苦手意識ができてしまいましたが、次からは使い回せるのでその時を楽しみにしておきたいと思います！

カテゴリー
中級編

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
デイトラweb制作中級編　DAY17
2022年5月31日
次の記事
デイトラweb制作中級編　DAY19
2022年6月4日