直接在表单上显示联系人表单 7 输入

Question

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

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

例有两个问题，输入 A 是日期 ： 29/04/2019输入-B 是文本：约翰

数字 3 将是一个框，即使在客人单击提交按钮之前，输入 A 和输入 B 也会显示。

例：亲爱的输入-B，您的预约时间为29/04/2019。

=> 将是

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

我需要使用 DF7 动态扩展吗？我不熟悉动态文本扩展，如何使用动态文本扩展实现？

Answer 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 中禁用自动 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 以在名称更改或其他任何内容后更新。