contact-form-7 - 如何在 Contact Form 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

无法通过 contact form 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>

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

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