直接在表单上显示 Contact form 7 输入答案

【问题标题】：Display Contact form 7 input directly on the form直接在表单上显示 Contact form 7 输入
【发布时间】：2019-09-17 19:23:42
【问题描述】：

我正在尝试实现以下目标，尝试在此处搜索但无济于事。

我想在点击提交按钮之前直接在表单中显示访客输入。

例如，有2个问题，输入-A 是日期：29/04/2019 Input-B 是文本：John

数字 3 将是一个框，其中 Input-A 和 Input-B 将在客人单击提交按钮之前显示。

示例：亲爱的 Input-B，您的预约日期为 29/04/2019。

=> 将是

亲爱的约翰，您的预约时间是 29/04/2019。

我需要使用 DF7 动态扩展吗？我是动态文本扩展的新手，如何使用动态文本扩展来实现？

【问题讨论】：

你说的是这个吗？

标签： wordpress contact-form-7

【解决方案1】：

这可以用 jQuery 来处理。如果你想移动结果，只要把它放在你想要的地方......

联系表 7 中的第一个。做这样的事情。

<label> Your Name (required)
    [text* your-name] </label>

<label>Enter Date
    [date the-date]</label>

<label> Your Email (required)
    [email* your-email] </label>

[submit "Send"]

<div id="result"></div>

然后你想把它添加到你的主题的 js 文件中。如果在 CF7 中禁用 auto-p https://stackoverflow.com/a/32540049/3821467，则可以直接将其粘贴到 CF7 中的 <script></script>

(function($) {
    $('input[name="the-date"]').blur(function(){
        var name = $('input[name="your-name"]').val();
        var date = $('input[name="the-date"]').val();
        $('#result').html('<p>Dear ' + name + ', your appointment will be on ' + date + '.</p>');
    });
})( jQuery );

这仅在用户输入日期并单击另一个字段后触发模糊时激活。要更改触发器或添加另一个触发器，您可以包含更多 jQuery 以在名称更改或其他任何内容后更新。

【讨论】：