联系人表单7复选框样式

Question

首先，我为我的无知提前道歉，我对这种事情非常陌生，但我正在努力学习..

所以我的问题是我试图在联系人表单7中创建6个复选框，以6个网格显示，这是我在这个网站的帮助下创建的复选框。

​

.select-size input {
  display: none;
}

label {
  display: inline-block;
  width: 150px;
  height: 80px;
  text-align: center;
  border: 2px solid #FD484E;
  line-height: 80px;
  cursor: pointer;
  font-family: sans-serif;
  margin: 5px;
}

#windows:checked~label[for="windows"],
#doors:checked~label[for="doors"],
#roofline:checked~label[for="roofline"],
#conservatories:checked~label[for="conservatories"],
#extensions:checked~label[for="extensions"],
#repairs:checked~label[for="repairs"] {
  background: #FD484E;
  color: #fff;
}

<div class="select-size">
  <input type="checkbox" name="s-size" id="windows" />
  <input type="checkbox" name="s-size" id="doors" />
  <input type="checkbox" name="s-size" id="roofline" />
  <input type="checkbox" name="s-size" id="conservatories" />
  <input type="checkbox" name="s-size" id="extensions" />
  <input type="checkbox" name="s-size" id="repairs" />

  <label for="windows">Windows</label>
  <label for="doors">Doors</label>
  <label for="roofline">Roofline</label>
  <label for="conservatories">Conservatories</label>
  <label for="extensions">Extensions</label>
  <label for="repairs">Repairs</label>
</div>

​

我的联系人表7代码：

​

 <div class="row">
<div class="col-xs-12 col-lg-6">

[text* your-name placeholder "Your Name"]

[email* your-email placeholder "Your Email"]

[tel* tel-395 placeholder "Your Telephone"]



</div>

<div class="col-xs-12 col-lg-6">

[checkbox* checkbox-495 id:checkbox use_label_element "Windows" "Doors" "Conservatories" "Roofline" "Extensions" "Repairs"]

</div>
</div>

<div class="row vertical-center">
<div class="col-xs-12 col-lg-6">
<p>We will contact you within one business day.</p>
</div>
<div class="col-xs-12 col-lg-6 submit-button-align-right">
[submit "Send Message"]
</div>
</div>

​

现在……我被困在如何将两者合并在一起？这超出了我的能力范围，我一般都能应付过去，但这真的把我难住了。

如果有人能给我任何帮助，我将不胜感激。

提前谢谢你，

问候

Answer 1

Contact Form7使用的格式与HTML略有不同，但有一些目标选项应该足以获取所需的任何元素。

在创建表单时，您将生成一个复选框短代码，如下所示

[checkbox my-checkbox id:my-checkboxes use_label_element "foo" "bar"]

This code will generate:

的一组两个复选框

A中的

- Each of the two is wrapped in a  element (the text itself is

)

-带有复选框“my-id=”`的父元素

因此，输出标记将如下所示(以及一些wpcf7和Wordpress类)

         foo                 bar      

由于父元素上有一个ID，因此可以使用CSS或JQuery中的选择器来定位表单的这一特定部分和其中的元素。

例如，#mycheckboxes > label > input和#mycheckboxes > label > input + span。

为了获得更好的目标选项，您还可以为每个快捷代码创建一个复选框，并为每个复选框容器分配一个ID。

[checkbox my-checkbox id:a-checkbox use_label_element "foo"]
[checkbox my-checkbox2 id:another-checkbox use_label_element "bar"]

希望对此有所帮助，谢谢你

Answer 2

try this for 3 box per row
<div class="row">
    <div class="col-xs-12 col-lg-6">
      <label for="windows">Windows</label>
      <input type="checkbox" name="s-size" id="windows" />
      <label for="doors">Doors</label>
      <input type="checkbox" name="s-size" id="doors" />
      <label for="roofline">Roofline</label>
      <input type="checkbox" name="s-size" id="roofline" />
    </div>
    </div>
    <div class="row">
    <div class="col-xs-12 col-lg-6">
      <label for="conservatories">Conservatories</label>
      <input type="checkbox" name="s-size" id="conservatories" />
      <label for="extensions">Extensions</label>
      <input type="checkbox" name="s-size" id="extensions" />
      <label for="repairs">Repairs</label>
      <input type="checkbox" name="s-size" id="repairs" />
    </div>
    </div>

Answer 3

在那里，框在选择时不会突出显示，并且不能隐藏原始的复选框。

有没有人？

contact snippet

​

#checkbox {
  display: none;
}

.checkbox {
  float: left;
  width: 150px;
  height: 80px;
  text-align: center;
  border: 2px solid #FD484E;
  line-height: 80px;
  cursor: pointer;
  font-family: sans-serif;
  margin: 2px;
}

#windows:checked~label[for="windows"],
#doors:checked~label[for="doors"],
#roofline:checked~label[for="roofline"],
#conservatories:checked~label[for="conservatories"],
#extensions:checked~label[for="extensions"],
#repairs:checked~label[for="repairs"] {
  background: #FD484E;
  color: #fff;
}

<div class="row">
  <div class="col-xs-12 col-lg-6">

    [text* your-name placeholder "Your Name"] [email* your-email placeholder "Your Email"] [tel* tel-395 placeholder "Your Telephone"]



  </div>

  <div class="col-xs-12 col-lg-6">

    [checkbox* checkbox-203 id:windows class:checkbox use_label_element "Windows"] [checkbox* checkbox-203 id:doors class:checkbox use_label_element "Doors"] [checkbox* checkbox-203 id:conservatories class:checkbox use_label_element "Conservatories"] [checkbox*
    checkbox-203 id:roofline class:checkbox use_label_element "Roofline"] [checkbox* checkbox-203 id:extensions class:checkbox use_label_element "Extensions"] [checkbox* checkbox-203 id:repairs class:checkbox use_label_element "Repairs"]

  </div>
</div>

<div class="row vertical-center">
  <div class="col-xs-12 col-lg-6">
    <p>We will contact you within one business day.</p>
  </div>
  <div class="col-xs-12 col-lg-6 submit-button-align-right">
    [submit "Send Message"]
  </div>
</div>

​