如何在 Contact Form 7 中的 Input Type 上添加 ID 和 Class 属性答案

【问题标题】：How to add ID and Class attribute on Input Type in Contact Form 7如何在 Contact Form 7 中的 Input Type 上添加 ID 和 Class 属性
【发布时间】：2017-02-09 10:37:28
【问题描述】：

我想在我们的联系表单 7 中为特定输入类型添加 Id 和 Class 属性。

当我添加下面的示例时，它会在输入类型上方的 SPAN 标记上应用 Id 和 Class

[radio amount id:amount class:amount-select default:1 "50" "100" "200" "500" "Other"]

这是上面代码生成的源码截图：

提前致谢

【问题讨论】：

标签： contact-form-7

【解决方案1】：

没有办法通过联系表格 7 插件来做到这一点。为此，您需要添加一些自定义 javascript，例如，对于您的特定 [radio] 标签，您可以在 cf7 编辑页面中执行类似的操作，

    <label> My radio button
       [radio amount id:amount class:amount-select default:1 "50" "100" "200" "500" "Other"]</label>
    [submit]
    <script>
       (function( $ ) {
         $(document).ready( function(){
           $('form.wpcf7-form input').each(function(){
             var span = $(this).parent('span');
             if(span){
               var idAttr = span.attr('id');
               $(this).attr('id',idAttr);
               span.attr('id','');
             }
             //or you could also do this which is even less maintenance
             var name = $(this).attr('name');
             var type = $(this).attr('type');
             switch(type){
               case 'radio':
               case 'checkbox':
                 name += '-'+$(this).attr('value');
             }
             $(this).attr('id',name);
           });
         });
       })( jQuery );
    </script>

这会在页面加载时将所有 span id 移动到输入元素，您也可以使用相同的逻辑将非 wpcf7 类移动到输入元素。

[编辑] 我添加了一个需要较少维护的附加方法，但请记住，对于单选/复选框元素，您需要将值附加到 id 以使其唯一。

【讨论】：

是的，我添加了与自定义 javascript 相同的内容。非常感谢您的回答。

【解决方案2】：

如果您使用的是 SASS 样式规则，为什么不将 Contact form 7 类扩展到您自己的类？使用这种方法需要编写 JavaScript。

请参阅下面的示例：

.wpcf7-form label {
    @extend .control-group__label;
}

.wpcf7-form-control {
  @extend .control-group__control;
}

.wpcf7-submit {
  @extend .btn;
  @extend .btn-submit;
}

【讨论】：