使用链接自动填充联系人7表单以锚定在同一页面上

auto populating contact 7 form with link to anchor on same page

本文关键字：一页 表单 链接 填充 联系人      更新时间：2023-09-26

我遵循本教程动态自动填充使用联系人表单7创建的表单。为了自动填写表格，我正在使用插件联系表格7动态文本扩展。

首先，我在函数中添加了以下函数。php

// chalet name for enquiry form
function parameter_queryvars( $qvars ) {
    $qvars[] = 'chalet';
    return $qvars;
}
add_filter('query_vars', 'parameter_queryvars' );
function echo_chalet() {
    global $wp_query;
        if (isset($wp_query->query_vars['chalet']))
        {
            print $wp_query->query_vars['chalet'];
        }
}

联系人7表格有一个主题的动态字段：

[dynamictext enquiry-chalet "CF7_GET key='chalet'"]

例如，有了这个，我可以将相同的表格用于不同的主题，这些主题会根据点击的链接自动填写。链接只需要包含一个关于小屋的查询。

www.mysitexyz.com/link/to/page/with/form.php?chalet=request

www.mysitexyz.com/link/to/page/with/form.php?chalet=cancellation

表格的主题是"请求"或"取消"。这很好用。

现在我想在链接所在的页面上自动填充一个表单

链接现在包含一个锚点：www.mysitexyz.com/link/to/page/with/form.php?chalet=chaletname#myFormDownHere

单击链接，页面将向下滚动到锚点。我的wordpress主题流畅地向下滚动。但该字段不是自动填充的。使用浏览器功能点击页面以在新选项卡中打开即可。然后页面向下滚动到锚点，表单字段被正确填写。但这不是人们通常所做的。

如何通过正常点击链接来获得相同的结果？

使用jQuery，您可以这样做：

<a href="#" data-chalet="YOUR-VALUE" class="chalet-choser">Click here</a>

然后

$('.chalet-choser').on('click', function(e) {
  e.preventDefault();
  $('input[name="enquiry-chalet"]').val( $(this).data('chalet') );
  return false;
})
相关文章：