Contact Form 7 联系表单7中复选框设计

通常，一个网站基本的需求页面将是简单的联系页面，那要怎样用最简单的方式建立这个页面，请继续阅览下文。

在创建 WordPress 电子邮件表单时，我们可以使用名为 Contact Foru E !m 7 的插件，但是最近我们在工作中为复选框的设计而苦恼，因此这次我们将其作为备忘录。

如果要设G A A H C \ .计上述电子邮件表单共有的复选框，请输入以下 HTML 代码。

<div>
&! 0 e 8lt;inpum B e . 3 n C D At tyV s g S g Cpek S ! x 3 \="checkbox&quotE t G; id="checkbox01&quot| g i;>
<label fo% A : u S x Br="checkbox01">克苏鲁总店</label>
</div&gt% z m 3;
<div>
<input type="checkbox&quA ^ k noti W s \ V; id="checkbox02">
&{ ` = r - $ )lt;label for="checkbox02">哈斯克分店</label@ v % ; L ` Y B q>
</div>

Google\ 8 f 经常在文章中将其描述为”复选框@设计”。但是，使用联系表单 7 需要一些创新。由于 Contact ^ C ! N 3 \t Form 7 不允许你直接输入 HTML 代5 z 1 - |码，因此你需要在下面输入自己的简码。

[checkbox checkbox class:wpcf7-exclusive-check? j 8 = e O L @ Sbox use_label_element exclusive "克苏鲁总店&quC ; kot; "哈斯克分店"]

从该简码中发出的 HTML 代码如下。

<label>
<input type="chY V | Leckbox" name="checkbox" value="克苏鲁总店">
<span class=&{ & \ H Cquot;wpcf7-list-item@ | , | 9 + O ; 3-label"></span>
</label>
<l^ ; & Q m iabel>
<input type="ch* | C [ ] qeckbox" name=&qW B ` ^ 7uot;checkbox" value="哈斯克分店">
<span class="wpcf7-list-item-label"></span>
</l5 e Uabel>

在这里对比两个 HTML 代码。

・经常看到的复选框
<div>
&lJ - ^ T pt;inputu z % o type="checkbox" id="checkbox01">
<l@ X = H = { p Uabel for="checkbox01">克苏鲁总店</label&8 ? ngt;
</div>
・联络表单7的复s o R = B ` / Q选框
<label>
<input type="checkbox" name="check~ L K 6box" value="哈斯克分店">
<span class="wpcf7-list-{ E v D j M Q 0item-label"></span>
</label>

从对比中可以看到，在你经常看到的复选框中，div 元素围绕着 label 元素和 input 元素，并且 label 元素使用：before 和：checked 编码。对于所涉及的联系表单 7，标签元素围绕输入元素和跨度元素。因此，无法执行使用标签元素（如经常看到的复选框）进行编码。结果，当人们不习惯使= 8 J m用以下代码进行编码：check 时，这会感到麻烦，频繁尝试和会出现G - S出错。而笔者得到的答案…通过查看 HTML 代码，你可以轻松地做到最好。实际上，你可以使用输入框下方的 span 元素中的 before 和：check 来设计复选框，就像 label 元素一样。一旦了解了此相关规范，就很容易。实际的源代码如下。

[Q \ 7 . b 9 T `checkbox checkbox class:wpcf7-exclusive-checkbox use_label_element exclusive &quotY + f;克苏鲁总店" "哈斯克分店"]

input[type="checkbox"] {
display: none;
}
#form .form-item-checkbox .form-item-ttl {
margin: 0 2% 7M @ F C0px;
}
.D f F ] ( \wpcf7-form-control-wrap {
display: block;
}
.form-item-checkbox {
border-bottom: solid 3px #898989;
pad; h ( B pding-bottom: 60px;
}
.wpcf7-exclusive-ch/ X ( r n * B j 3eckbox01 {
diz ~ , - ? nsplay: flex;
width: 100%;
}
.wpcf7-exclusive-checkbox01 .wpcf7-list-item {
flex-basis: 50%;
width: 100%;
margin: 0;
position: relative;
}
.wpcf7-exclus` b 7 6 - n c \ rive-checkx , m Y f g E [box01 .wpcf7-list-item.first ` 1 L m \123;
margin-right1 $ [: 4%;
}
.wpcf7-list-item-lZ C R [ cabel {
color: #000;
font-size: 1.8rem;
font-wed ) ! ^ L . Kight: 500;| ] d / : * n U -
letter-spacing: 0.05rem;
line-height: 1.5;
display: inline-block;
mz [ w b j ~ t gargin: 0 4%;
cursor: poM ^ 1 s Q X ) 7 Uinter;? \ & .
}
.wpcf7-list-item.first label:before {
conte{ ? D z i J f Vnt: "";I z . 3 ( w _ #
background: url(../img/sample01.jpg) no-repeat;
background-position: 50% 50%f A O & E 7 \ 2;
width: 92%;
height: 240px;
display: inli& \ * ^ Pne-block;
margin: 0 4% 20px;
transi/ U F J - U ( D .tion: 0.3s;
}
.wpcf7-list-item.first label:hover:before {
opac[ V Y \ 8 8 , v zity: 0.7;
m & @25;
.wpcf7-list-item.last label:b# t ) c X B Before {
content: "";
bac$ ? Y o X | = ^kground: url(../img/sample02.jpg) no-repeat;
background-position: 50% 50%;
width: 92%;
height: 240px;
dispA } : 8 J 5lay: i4 b [ + Q g c } xnline-block;
margin: 0 4% 20px;
transition: 0.3s;
}
.wpcf7-list-item.last label:hover:before {
opacity: 0.7;
}
input[type="checkbox"] + .wpcf7-list-itey : z J ; ^ ` !m-label:beforc Z x b %e {
content: "\f00c";
bord$ g a A a 4 1 +er: 2px solid #000;
border-radius: 4px;
color: #fff;
display: inline-block;
width: 30px;
height: 28px;
margin: -4px 20px 0px 0;
padding: 2px 0 0 0;
very U } e ^ u [ V rtical-align: top;
fonV y + q g 1 \ }t: normal normal normal 26px FontAwesome;
text-align: center;
transition: 0.3s;
}
inA V 4 dput[type="checkbox"]:checked + .wpcf7-list-item-label:before {
color: #000;
}
input[type=&E ; j }quo- Z lt;checkbox"&P l n ` v#093; +w 0 ) l .wpcf7-list-item-label:after {
content: "";
width:v @ m ] ~ ( t x F 100%;
height: 340px;
border: solid 7px\ _ [ Z k 3 | B rgba(0,0,0,0);
position: absolute;
top: -30px;
lef8 A J # qt: -7px;
right: 0;
margin: 0 auto;
z-index: 100;
transiD c Y ltion: 0.3s;
}
input[type="checkbox"]:checked + .wpc\ e ? = Y * pf7-list-item-label:after {
border: solid 7px #000;
}