Question

如何在字段Contact Form 7 中添加自定义属性而不使用javascript ？

例如，页面上有这样一个字段：

<input type="text" name="name" class="form-control" id="name-1" data-attr="custom" data-msg="Текст 1">

问题：是否可以在管理面板中设置这些字段的自定义属性（data-attr，data-msg）？

Answer 1

找到您的字段的名称。

如果您的字段名称=＆＃34; text-21＆＃34;，就像在我的示例中一样，请将此代码添加到function.php文件中。

[text* text-21]

注意，它会将自定义属性添加到名称为text-21的所有表单元素中，在所有名称为＆＃34; text-21的表单中，如果要阻止它，则为表单元素添加一些唯一名称[ text * inique-name]

然后将代码更改为

add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );
function imp_wpcf7_form_elements( $content ) {
    $str_pos = strpos( $content, 'name="text-21"' );
    $content = substr_replace( $content, ' data-attr="custom" data-msg="Текст 1" ', $str_pos, 0 );
    return $content;
}

Answer 2

还可以添加多个属性。例如

add_filter( 'wpcf7_form_elements', 'imp_wpcf7_form_elements' );

function imp_wpcf7_form_elements( $content ) {
    $str_pos = strpos( $content, 'name="your-email-homepage"' );
    $content = substr_replace( $content, ' aria-describedby="emailHelp" ', $str_pos, 0 );

    $str_pos2 = strpos( $content, 'name="your-fname-homepage"' );
    $content = substr_replace( $content, ' aria-describedby="fnameHelp" ', $str_pos2, 0 );

    $str_pos3 = strpos( $content, 'name="your-lname-homepage"' );
    $content = substr_replace( $content, ' aria-describedby="lnameHelp" ', $str_pos3, 0 );
    return $content;        
}

Answer 3

这是一个真正的解决方案，不涉及对名称和属性进行硬编码

add_filter( 'wpcf7_form_tag', function ( $tag ) {
    $datas = [];
    foreach ( (array)$tag['options'] as $option ) {
        if ( strpos( $option, 'data-' ) === 0 ) {
            $option = explode( ':', $option, 2 );
            $datas[$option[0]] = $option[1];
        }
    }
    if ( ! empty( $datas ) ) {
        $name = $tag['name'];
        $tag['name'] = $id = uniqid();
        add_filter( 'wpcf7_form_elements', function ($content) use ($name, $id, $datas) {
            return str_replace("name=\"$id\"", "name=\"$name\" ". wpcf7_format_atts($datas), $content);
        });
    }
    return $tag;
} );

它适用于所有数据属性，因此您可以像这样使用它

[text* my-name data-foo:bar data-biz:baz]
Output: <input type="text" name="my-name" data-foo="bar" data-biz="baz">

由于wpcf7没有提供直接挂钩选项的解决方案，因此解决方案使用了一个技巧，并用唯一的ID临时替换了字段名称，然后在以后的过滤器中将其替换为正确的名称和添加的属性

如果您需要它不仅用于数据属性，还可以通过替换此行来将更多属性列入白名单

if ( strpos( $option, 'data-' ) === 0 ) {

类似于以下内容

if ( preg_match( '/^(data-|pattern|my-custom-attribute)/', $option ) ) {

Answer 4

从Tofandel的解决方案中扩展，以那些获得99％的解决方案但遇到验证问题的人的利益为例-我已经解决了我的情况，并希望提供一种扩展的解决方案，该解决方案可以达到Tofandel的解决方案（将属性放入适当的表单中），而且在提交时也可以成功进行验证。

    add_filter('wpcf7_form_tag', function($tag) {
      $data = [];
      foreach ((array)$tag['options'] as $option) {
        if (strpos( $option, 'autocomplete') === 0) {
          $option = explode(':', $option, 2);
          $data[$option[0]] = apply_filters('wpcf7_option_value', $option[1], $option[0]);
        }
      }
      if(!empty($data)) {
        add_filter('wpcf7_form_elements', function ($content) use ($tag, $data) {
          $data_attrs = wpcf7_format_atts($data);
          $name = $tag['name'];
          $content_plus_data_attrs = str_replace("name=\"$name\"", "name=\"$name\" " . $data_attrs, $content);

          return $content_plus_data_attrs;
        });
      }
      return $tag;
    } );

我们并没有将标签ID更改为随机值，而只是稍后将其替换为“真实”值，而是仅首先引用了真实值，替换了wpcf7_form_elements过滤器中内容的相关部分（在我的情况下为自动完成，但正如Tofandel的示例所示，可以将其扩展为您想要的任何数据属性。

Answer 5

它可能很旧，但是对于遇到此问题的您来说，我可以通过执行以下操作来克服它：

假设这是以下形式：

 public class Player
{
    public string steamid { get; set; }
    public int communityvisibilitystate { get; set; }
    public int profilestate { get; set; }
    public string personaname { get; set; }
    public int lastlogoff { get; set; }
    public int commentpermission { get; set; }
    public string profileurl { get; set; }
    public string avatar { get; set; }
    public string avatarmedium { get; set; }
    public string avatarfull { get; set; }
    public int personastate { get; set; }
    public string realname { get; set; }
    public string primaryclanid { get; set; }
    public int timecreated { get; set; }
    public int personastateflags { get; set; }
}

public class Response
{
    public List<Player> players { get; set; }
}

您可以在脚本标签内添加以下代码：

<script>
hbspt.forms.create({
    css: '',
    portalId: '',
    formId: 'YOUR_FORM_ID'
});
</script>

引用：https://developers.hubspot.com/global-form-events

如何添加自定义属性？

5 个答案: