如果联系表单驻留在 AJAX 加载的内容中，则 AJAX 提交将不起作用

Question

如果 AJAX 加载的内容包含 CF7 联系表单，则 AJAX 提交将不适用于该表单。

建议的解决方法是将此行放在联系表单模板中：

<script src="/wp-content/plugins/contact-form-7/includes/js/scripts.js"></script>

这将使表单正常工作，但会导致另一个问题：普通的 CF7 联系表单，放置在页面的未由 AJAX 加载的部分中，提交时将显示多个微调图标。

可能是因为多次包含脚本会多次绑定表单代码，因为这些表单没有放在 ajax 加载的内容中。

Answer 1

自己找到了解决办法。如果您同时拥有 ajax 未加载的联系表单和 ajax 加载的联系表单，则对于第二个表单，您需要修改模板添加：

<div id="ajaxform_wrapper">
    <script>
        jQuery('#ajaxform_wrapper > div.wpcf7 > form').wpcf7InitForm();
    </script>
    ... contact form fields...
</div>

基本上，我们将表单字段包装到一个 div #ajaxform_wrapper（随机名称）中，并且我们添加了一行 Javascript，它将仅为该表单绑定 CF7 代码，避免在已初始化的表单上进行多次绑定。

这会起作用，并且在提交普通联系表单时您不会看到多个微调器。