如何在联系表7中的输入类型上添加ID和类属性 [英] How to add ID and Class attribute on Input Type in Contact Form 7

问题描述

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

I want to add Id and Class attribute on specific input type in our contact form 7.

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

When I am adding with below example, it apply Id and Class on SPAN tag just above the input Type

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

这是从上面的代码生成的源代码的屏幕截图:

Here is the screenshot of source which is generated from above code:

预先感谢

推荐答案

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

There is no way to do so through the contact form 7 plugin. You'll need to add some custom javascript to do so, for example for your specific [radio] tag you would do something like this inside the cf7 edit page,

    <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类移至输入元素.

this would move all the span ids to the input elements when the page loads, you could use the same logic to move non-wpcf7 classes to the input element too.

我添加了一个需要较少维护的方法，尽管请记住，对于单选/复选框元素，您需要将值附加到id上以使其唯一.

I added an additional method which needs less maintenance, although keep in mind that for radio/checkbox elements you'll need to append the value to the id to make it unique.

这篇关于如何在联系表7中的输入类型上添加ID和类属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！