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

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

在创建 wordpress 电子邮件表单时,我们可以使用名为 Contact Form 7 的插件,但是最近我们在工作中为复选框的设计而苦恼,因此这次我们将其作为备忘录。
Contact Form 7 联系表单7中复选框设计-云模板如果要设计上述电子邮件表单共有的复选框,请输入以下 HTML 代码。

  1. <div>
  2. <input type="checkbox" id="checkbox01">
  3. <label for="checkbox01">克苏鲁总店</label>
  4. </div>
  5. <div>
  6. <input type="checkbox" id="checkbox02">
  7. <label for="checkbox02">哈斯克分店</label>
  8. </div>

Google 经常在文章中将其描述为”复选框@设计”。但是,使用联系表单 7 需要一些创新。由于 Contact Form 7 不允许你直接输入 HTML 代码,因此你需要在下面输入自己的简码。

  1. [checkbox checkbox class:wpcf7-exclusive-checkbox use_label_element exclusive "克苏鲁总店" "哈斯克分店"]

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

  1. <label>
  2. <input type="checkbox" name="checkbox" value="克苏鲁总店">
  3. <span class="wpcf7-list-item-label"></span>
  4. </label>
  5. <label>
  6. <input type="checkbox" name="checkbox" value="哈斯克分店">
  7. <span class="wpcf7-list-item-label"></span>
  8. </label>

在这里对比两个 HTML 代码。

  1. ・经常看到的复选框
  2. <div>
  3. <input type="checkbox" id="checkbox01">
  4. <label for="checkbox01">克苏鲁总店</label>
  5. </div>
  6. ・联络表单7的复选框
  7. <label>
  8. <input type="checkbox" name="checkbox" value="哈斯克分店">
  9. <span class="wpcf7-list-item-label"></span>
  10. </label>

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

  1. [checkbox checkbox class:wpcf7-exclusive-checkbox use_label_element exclusive "克苏鲁总店" "哈斯克分店"]
  1. input[type="checkbox"] {
  2. display: none;
  3. }
  4. #form .form-item-checkbox .form-item-ttl {
  5. margin: 0 2% 70px;
  6. }
  7. .wpcf7-form-control-wrap {
  8. display: block;
  9. }
  10. .form-item-checkbox {
  11. border-bottom: solid 3px #898989;
  12. padding-bottom: 60px;
  13. }
  14. .wpcf7-exclusive-checkbox01 {
  15. display: flex;
  16. width: 100%;
  17. }
  18. .wpcf7-exclusive-checkbox01 .wpcf7-list-item {
  19. flex-basis: 50%;
  20. width: 100%;
  21. margin: 0;
  22. position: relative;
  23. }
  24. .wpcf7-exclusive-checkbox01 .wpcf7-list-item.first {
  25. margin-right: 4%;
  26. }
  27. .wpcf7-list-item-label {
  28. color: #000;
  29. font-size: 1.8rem;
  30. font-weight: 500;
  31. letter-spacing: 0.05rem;
  32. line-height: 1.5;
  33. display: inline-block;
  34. margin: 0 4%;
  35. cursor: pointer;
  36. }
  37. .wpcf7-list-item.first label:before {
  38. content: "";
  39. background: url(../img/sample01.jpg) no-repeat;
  40. background-position: 50% 50%;
  41. width: 92%;
  42. height: 240px;
  43. display: inline-block;
  44. margin: 0 4% 20px;
  45. transition: 0.3s;
  46. }
  47. .wpcf7-list-item.first label:hover:before {
  48. opacity: 0.7;
  49. }
  50. .wpcf7-list-item.last label:before {
  51. content: "";
  52. background: url(../img/sample02.jpg) no-repeat;
  53. background-position: 50% 50%;
  54. width: 92%;
  55. height: 240px;
  56. display: inline-block;
  57. margin: 0 4% 20px;
  58. transition: 0.3s;
  59. }
  60. .wpcf7-list-item.last label:hover:before {
  61. opacity: 0.7;
  62. }
  63. input[type="checkbox"] + .wpcf7-list-item-label:before {
  64. content: "f00c";
  65. border: 2px solid #000;
  66. border-radius: 4px;
  67. color: #fff;
  68. display: inline-block;
  69. width: 30px;
  70. height: 28px;
  71. margin: -4px 20px 0px 0;
  72. padding: 2px 0 0 0;
  73. vertical-align: top;
  74. font: normal normal normal 26px FontAwesome;
  75. text-align: center;
  76. transition: 0.3s;
  77. }
  78. input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
  79. color: #000;
  80. }
  81. input[type="checkbox"] + .wpcf7-list-item-label:after {
  82. content: "";
  83. width: 100%;
  84. height: 340px;
  85. border: solid 7px rgba(0,0,0,0);
  86. position: absolute;
  87. top: -30px;
  88. left: -7px;
  89. right: 0;
  90. margin: 0 auto;
  91. z-index: 100;
  92. transition: 0.3s;
  93. }
  94. input[type="checkbox"]:checked + .wpcf7-list-item-label:after {
  95. border: solid 7px #000;
  96. }

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/80456

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买