デイトラweb制作上級編パターン2　 DAY31~44⑪

2022年11月11日 最終更新日時 : 2022年12月18日 nakanonakano

卒業制作課題パターン2　11日目

page-reservation.php

Contact Form 7を自作テーマで使う

不要なタグの削除、ローカル環境下の受信メール確認について

→　上級編　 DAY31~44⑰

参考記事

・自作したFormを【Contact Form 7】で使う方法

①ラジオボタン

ラジオボタンを生成するための設定↓

変更前

HTML

<dd class="p-reservation__form-input">
<!-- ここから -->
    <!-- 左側のボタン -->
    <label class="p-reservation__form-radio">
        <input type="radio" name="your-radio" checked>
        <span class="p-reservation__form-radio-part">初診</span>
    </label>
    <!-- 右側のボタン -->
    <label class="p-reservation__form-radio">
        <input type="radio" name="your-radio">
        <span class="p-reservation__form-radio-part">再診</span>
    </label>
<!-- ここまで生成したコードで上書き -->
</dd>

SCSS

.p-reservation__form-radio {
    cursor: pointer;

    &:not(:first-child) {
        margin-left: 28px;
    }

    [type="radio"] {
        display: none;

        &:checked+.p-reservation__form-radio-part {
            &::after {
                opacity: 1;
            }
        }
    }
}

// 「初診」「再診」のspanタグの疑似要素でラジオボタンを作成
.p-reservation__form-radio-part {
    position: relative;
    padding-left: 32px;

    // 外周の〇
    &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border: 1px solid #1391E6;
        border-radius: 50%;
    }

    // 内側の点
    &::after {
        position: absolute;
        content: "";
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background: #1391E6;
        border-radius: 50%;
        transition: all 0.3s ease 0s;
        opacity: 0;
    }
}

変更後

HTML

<dd class="p-reservation__form-input">
    <span class="wpcf7-form-control-wrap" data-name="your-radio">
        <span class="wpcf7-form-control wpcf7-radio">
            <!-- 左側のボタン -->
            <span class="wpcf7-list-item first">
                <label>
                    <input type="radio" name="your-radio" value="初診" checked="checked">
                    <span class="wpcf7-list-item-label">初診</span>
                </label>
            </span>
            <!-- 右側のボタン -->
            <span class="wpcf7-list-item last">
                <label>
                    <input type="radio" name="your-radio" value="再診">
                    <span class="wpcf7-list-item-label">再診</span>
                </label>
            </span>
        </span>
    </span>
</dd>

SCSS

.wpcf7-radio {

    .wpcf7-list-item {

       // デフォルトの「margin-left: 1rem;」を上書き
        &:first-child {
            margin-left: 0;
        }

        &:not(:first-child) {
            margin-left: 28px;
        }

        // classがなくなった<label class="p-reservation__form-radio">
        label {
            cursor: pointer;

            [type="radio"] {
                display: none;

                &:checked+span {
                    &::after {
                        opacity: 1;
                    }
                }
            }

            // classがなくなった<span class="p-reservation__form-radio-part">
            span {
                position: relative;
                padding-left: 32px;

                // 「初診」「再診」のspanタグの疑似要素でラジオボタンを作成
                &::before {
                    position: absolute;
                    content: "";
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 24px;
                    height: 24px;
                    border: 1px solid #1391E6;
                    border-radius: 50%;
                }

                &::after {
                    position: absolute;
                    content: "";
                    left: 6px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 12px;
                    height: 12px;
                    background: #1391E6;
                    border-radius: 50%;
                    transition: all 0.3s ease 0s;
                    opacity: 0;
                }
            }
        }
    }
}

②チェックボックス

チェックボックスを生成するための設定↓

変更前

HTML

<dd class="p-reservation__form-input">
<!-- ここから -->
    <!-- チェックボックス1個目 -->
    <label class="p-reservation__form-box">
        <input type="checkbox" required>
        <span class="p-reservation__form-box-part">虫歯</span>
    </label>
    <!-- チェックボックス2個目 -->
    <label class="p-reservation__form-box">
        <input type="checkbox" required>
        <span class="p-reservation__form-box-part">被せ物がとれた</span>
    </label>
    <!-- チェックボックス3個目 -->
    ・
    ・
    ・
<!-- ここまで生成したコードで上書き -->
</dd>

SCSS

.p-reservation__form-box {
    cursor: pointer;
    display: inline-block;
    padding-bottom: 16px;
    margin-right: 28px;

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

    &:last-child {
        padding-bottom: 0;
        margin-right: 0;
    }

    &:nth-child(4n) {
        margin-right: 0;

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

    &:nth-child(3n) {

        @include mq('sp') {
            margin-right: 0;
        }
    }

    [type="checkbox"] {
        display: none;

        &:checked+.p-reservation__form-box-part {
            &::after {
                opacity: 1;
            }
        }
    }
}

.p-reservation__form-box-part {
    position: relative;
    padding-left: 32px;

    // 「虫歯」「被せ物」がとれたなどのspanタグの疑似要素でチェックボックスを作成
    &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        border: 1px solid #1391E6;
    }

    &::after {
        position: absolute;
        content: "";
        left: 6px;
        top: 50%;
        transform: rotate(-45deg) translateY(-50%);
        width: 17px;
        height: 10px;
        border-left: 3px solid #1391E6;
        border-bottom: 3px solid #1391E6;
        margin-top: -4px;
        transition: all 0.3s ease 0s;
        opacity: 0;
    }
}

変更後

HTML

<dd class="p-reservation__form-input">
    <span class="wpcf7-form-control-wrap" data-name="your-checkbox">
        <span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required">
            <!-- チェックボックス1個目 -->
            <span class="wpcf7-list-item first">
                <label>
                    <input type="checkbox" name="your-checkbox[]" value="虫歯">
                    <span class="wpcf7-list-item-label">虫歯</span>
                </label>
            </span>
            <!-- チェックボックス2個目 -->
            <span class="wpcf7-list-item">
                <label>
                    <input type="checkbox" name="your-checkbox[]" value="被せ物がとれた">
                    <span class="wpcf7-list-item-label">被せ物がとれた</span>
                </label>
            </span>
            <!-- チェックボックス3個目 -->
            ・
            ・
            ・
        </span>
    </span>
</dd>

SCSS

.wpcf7-checkbox {

    .wpcf7-list-item {
        display: inline-block;
        padding-bottom: 16px;
        margin-right: 28px;
        // デフォルトの「margin-left: 1rem;」を上書き
        margin-left: 0;

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

        &:last-child {
            padding-bottom: 0;
            margin-right: 0;
        }

        &:nth-child(4n) {
            margin-right: 0;

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

        &:nth-child(3n) {

            @include mq('sp') {
                margin-right: 0;
            }
        }

        // classがなくなった<label class="p-reservation__form-box">
        label {
            cursor: pointer;

            [type="checkbox"] {
                display: none;

                &:checked+span {

                    &::after {
                        opacity: 1;
                    }
                }
            }

            // classがなくなった<span class="p-reservation__form-box-part">
            span {
                position: relative;
                padding-left: 32px;

                // 「虫歯」「被せ物がとれた」などのspanタグの疑似要素でチェックボックスを作成
                &::before {
                    position: absolute;
                    content: "";
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 24px;
                    height: 24px;
                    border: 1px solid #1391E6;
                }

                &::after {
                    position: absolute;
                    content: "";
                    left: 6px;
                    top: 50%;
                    transform: rotate(-45deg) translateY(-50%);
                    width: 17px;
                    height: 10px;
                    border-left: 3px solid #1391E6;
                    border-bottom: 3px solid #1391E6;
                    margin-top: -4px;
                    transition: all 0.3s ease 0s;
                    opacity: 0;
                }
            }
        }
    }
}

まとめ

今回も卒業制作課題を進めました。

カスタム投稿がうまくいかず。。。

それよりも先に1つ目の卒業制作課題でも作ったフォームから終わらせました。

ラジオボタンや日付をContact Form 7で作るのは初めてでしたが意外にうまくいったので良かったです。

カテゴリー
上級編、卒業制作課題2

コメントを残す

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

前の記事
デイトラweb制作上級編パターン2　 DAY31~44⑩
2022年11月9日
次の記事
デイトラweb制作上級編パターン2　 DAY31~44⑫
2022年11月13日