デイトラweb制作中級編 DAY18

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

①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もなかなかコーディングできなくて苦戦しました。。。

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

コメントを残す

メールアドレスが公開されることはありません。