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

卒業制作課題パターン2 11日目
page-reservation.php

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

不要なタグの削除、ローカル環境下の受信メール確認について
→ 上級編 DAY31~44⑰
①ラジオボタン

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

変更前
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で作るのは初めてでしたが意外にうまくいったので良かったです。