如何在联系表单7中的输入类型上添加ID和Class属性

Question

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

当我添加以下示例时，它在输入类型

上方的SPAN标记上应用Id和Class

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

以下是从上面代码生成的源代码截图：

提前致谢

Answer 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类移动到输入元素。

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

Answer 2

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

请参阅下面的示例：

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

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

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