contact-form-7 相关问题

如何去除联系表 7 中的跨度包装纸？

我在我的 WordPress 主题中使用联系表单 7。 它当前正在返回跨度和输入： 我在我的 WordPress 主题中使用 Contact Form 7。 目前正在返回span和input： <span class="wpcf7-form-control-wrap name"> <input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name"> </span> 但我只需要input: <input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name"> 如何去除span包装纸？ 我遇到了同样的问题，最后通过使用 wpcf7_form_elements 过滤器通过正则表达式删除 <span> 标签来结束。例如，您可以将此代码复制粘贴到您的 functions.php 文件中。这里我传递了一个匿名函数作为回调，所以请确保 PHP >= 5.3。 add_filter('wpcf7_form_elements', function($content) { $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content); return $content; }); 前几天我尝试过类似的东西，很多人提到，正则表达式不是改变 HTML/删除标签等的正确方法，它听起来很逻辑。 所以我选择了 DOMDocument 并提出了以下解决方案： add_filter('wpcf7_form_elements', function( $content ) { $dom = new DOMDocument(); $dom->preserveWhiteSpace = false; $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD); $xpath = new DomXPath($dom); $spans = $xpath->query("//span[contains(@class, 'wpcf7-form-control-wrap')]" ); foreach ( $spans as $span ) : $children = $span->firstChild; $span->parentNode->replaceChild( $children, $span ); endforeach; return $dom->saveHTML(); }); 编辑： 我现在还在表单中添加了一些 html/文本，并且在使用 DOMDocument 类后，第一个标题元素未正确换行。它从第一行开始，到表格的最后一行结束。所以我将整个表单包裹在一个 div 中，这使得标记再次正确返回。 从 WPCF7 版本 4.9 开始，调整上面的答案，以便错误消息不会丢失： 首先，在 CMS 的编辑器中，将输入字段和任何其他要分组的元素包装起来，例如： <span class="wpcf7-form-control-wrap your-name">{field codes, etc, here}</span> 请注意，您需要使用类“wpcf7-form-control-wrap”和与您的字段名称匹配的类。 接下来，在您的 functions.php 中使用此正则表达式代码。它可能需要适应您的特定需求 add_filter('wpcf7_form_elements', function($content) { preg_match_all('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', $content,$matches); foreach($matches[2] as $match): $content = str_replace(trim($match),trim(preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $match)),$content); endforeach; return $content; }); 这将去除输入字段周围的 span 标签，同时保持新的 span 标签完好无损。效果是基本上将 span 标签从仅围绕输入字段移动到围绕您想要包装的任何元素。 原因是不幸的是，表单提交的代码是硬编码的。为了对 HTML 结构有完全的自由，您需要： 更改rest-api.php中第295行左右的代码，将“into”值更改为不太具体的值。当然，这不是推荐的路线，尽管它可以让您完全自由地根据自己的意愿构建内容。它将被插件更新覆盖。 foreach ( (array) $result['invalid_fields'] as $name => $field ) { $invalid_fields[] = array( 'into' => 'span.wpcf7-form-control-wrap.' . sanitize_html_class( $name ), 'message' => $field['reason'], 'idref' => $field['idref'], ); } 点击 wpcf7:invalid 事件并对结果运行您自己的验证代码。不用说，这会重复插件已经为您完成的大量工作，当接受（目前）以上述方式使用带有“wpcf7-form-control-wrap”类的span标签时，保留了所有功能插件，同时撤消插件最烦人的硬编码之一。 您可以使用 jQuery 删除 span 包装器： $("#name").unwrap(); 它将删除输入的父元素，因此在这种情况下它将删除跨度。 请注意，删除跨度后，Contact Form 7 的某些功能可能无法正常工作。例如，验证可能不起作用。 $("button").click(function(){ $("#name").unwrap(); }); span { background-color: #333; padding: 20px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="wpcf7-form-control-wrap name"> <input type="text" name="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name" aria-required="true" aria-invalid="false"> </span> <button>Remove span</button> 这个示例对我有用，并展示了如何删除 <span class="wpcf7-form-control-wrap"></span> 输入包装器而不出现任何错误： 我已经合并了@Guicara的代码 add_filter('wpcf7_form_elements', function($content) { $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content); return $content; }); 使用@naccurshi 的答案并进行了一些编辑。 首先，您需要使用上面的代码删除<span class="wpcf7-form-control-wrap">。然后手动将具有与您的字段名称匹配的额外类 的 <span class="wpcf7-form-control-wrap"> 添加到表单模板中，作为所有字段的包装器。 检查下面的示例屏幕截图： 也许它很旧，但仍然是实际问题。以下是输出“原始”复选框|不带 id 属性的跨度的无线电的代码： add_filter('wpcf7_form_elements', 'contact_form_remove_checkbox_wrapping' ); function contact_form_remove_checkbox_wrapping( $content ) { preg_match_all('/<span class="wpcf7-form-control-wrap[a-zA-Z ]*"><span class="wpcf7-form-control wpcf7-[checkbox|radio]+" id="([^\"]+)"><span class="[^\"]+">(<input type="[checkbox|radio]+" name="[^\"]+" value="[^\"]*" \/>)<span class="wpcf7-list-item-label">[^\"]+<\/span><\/span><\/span><\/span>/i', $content, $out ); if ( !empty( $out[0] ) ) { $count = count( $out[1] ); for ( $i = 0; $i<$count; $i++ ) { $out[2][ $i ] = str_replace(' value=', 'id="' . $out[1][ $i ] . '" value=', $out[2][$i] ); } return str_replace( $out[0], $out[2], $content ); } return $content; } 我想出了一个简单的脚本，当输入聚焦时，它会向此范围添加类（我想使用input:focus + label，但这个范围打破了这个逻辑）； /*contact form inputs*/ var contactFormInputs = document.querySelectorAll('.wpcf7-form-control'); // or your custom input class contactFormInputs.forEach(function(element) { element.addEventListener('focus', function(event) { event.target.parentElement.classList.add("focused"); }); element.addEventListener('blur', function(event) { event.target.parentElement.classList.remove("focused"); }); element.addEventListener('change', function(event) { event.target.value ? event.target.parentElement.classList.add("valid") : event.target.parentElement.classList.remove("valid") }); }); 现在我可以使用 .wpcf7-form-control-wrap.focused, .wpcf7-form-control-wrap.valid { ~ .ui-block-label { top: -20px; font-size: 14px; color: $yellowDark; } } 在我的 SCSS 代码中。 除了Guicara的php代码之外，以下javascript代码也可以获取错误消息的文本： document.addEventListener('wpcf7invalid',function(e){ if ('validation_failed' === e.detail.apiResponse.status){ $.each(e.detail.apiResponse.invalidFields,function(i,el){ console.log('this is error response and form object',el.message, $('#'+el.idref)); }); } }); 联系表格 7：使用 Regex 包裹 <p> 和 <span> 删除 文字输入 复选框输入 add_filter('wpcf7_autop_or_not', '__return_false'); add_filter('wpcf7_form_elements', function($content) { $find = ['/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '/<(span).*?class="\s*(?:.*\s)?wpcf7-checkbox(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i' , '/<(span).*?class="\s*(?:.*\s)?wpcf7-list-item(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i']; $content = preg_replace( $find, '\2', $content); return $content; });

基于联系表 7 字段的条件自动回复

我想根据 Contact Form 7 表单中选择的字段设置自动回复器。例如，我将根据“职位名称”字段更改表单的字段。这个领域将会...

联系表单7添加禁用属性到按钮以防止重复提交

我有一个 WordPress 网站，并且有 Contact form 7 插件，我想添加 attr 提交按钮以禁用重复提交。 现在我有这个代码来防止重复提交 $(文档).on('c...

以编程方式更改 Wordpress ContactForm7 下拉菜单选项

列出项目 我想在我的网站中创建一个非常有用的 WordPress ContactForm7 部分。为了使其真正有用，我需要使用 JavaScrip 动态更改某些下拉菜单的值...

以编程方式更改 Wordpress 中的 ContactForm7 下拉菜单选择器选项

我想在我的网站中创建一个非常有用的 WordPress ContactForm7 部分。为了使其真正有用，我需要使用 JavaScript 动态更改某些下拉菜单的值。 我没有...

如何以编程方式更改 ContactForm7 下拉菜单选择器？

我想在我的网站中创建一个非常有用的 WordPress ContactForm7 部分。为了使其真正有用，我需要使用 JavaScript 动态更改某些下拉菜单的值。 我没有...

如何在联系表格 7 WordPress 中的预订系统中根据日期添加不同的时间

我正在开发预订/预订系统，需要使用联系表 7 中的日期选项为预订系统的日期添加不同的计时选项。例如： 从日历来看，如果...

WordPress ContactForm7 日期选择器字段 - 禁用/阻止特定日期？

我目前安装了一个 WordPress 网站，用户可以在其中预订参观我们的设施（我们是一所大学）。我已经使用 ContactForm7 插件在页面中创建了一个表单，访问者可以...

如何制作一个div按钮来链接到另一个网页

我正在制作联系表7，并尝试将现有的提交按钮链接到另一个网站。我应该在哪里插入链接？这是现有的代码： ... 我正在制作联系表 7，并尝试将现有的提交按钮链接到另一个网站。我应该在哪里插入链接？这是现有的代码： <div class="row"> <div class="col-md-12 col-sm-12">[submit class:btn class:btn_lg class:btn_primary class:btn_solid class:btn_lg "Submit"]</div> </div> 希望我能重用现有的联系表单作为横幅并保留现有的样式。 <div class="row"> <div class="col-md-12 col-sm-12"> <a href="https://example.com" target="_blank" rel="noopener noreferrer"> [submit class:btn class:btn_lg class:btn_primary class:btn_solid class:btn_lg "Submit"] </a> </div> 1.找到定义 Contact Form 7 提交按钮的 HTML 代码部分。 2.用锚标记包围现有的按钮短代码，该锚标记在其 href 属性中指定所需的 URL。 3.确保在锚标记中设置 target="_blank" 属性，以便在新的浏览器选项卡中打开链接的网站，增强用户体验。 4.出于安全目的，包含 rel="noopener noreferrer" 属性，减轻与选项卡操作相关的任何潜在安全风险。

提交前请重命名 7 中的联系人姓名

我正在尝试重命名7中联系人中的输入名称。与谷歌表格集成，输入名称必须与工作表中命名的列相同。问题是当你需要两个单词的名字时......

.wpcf7-mail-sent-ok 时 5000 秒后显示和隐藏 DIV

我制作了一份联系表 7，其中包含自定义的“谢谢！” wpcf7mailsent 之后出现的消息。 我需要它在几秒钟后反转。我当前的代码不起作用： addEventListener('wpcf7mail...

在联系表单 7 (CF7) 中发送 HTML 值

目前我有一个页面，其中有一些 JS 按钮和按钮下方的 CF7 联系表单 我在此页面上有一个字段，显示按钮设置的值 ...

联系表格7日期选择器，日期范围在2个日期之间

我希望在我的 WordPress 联系表 7 中有两个日期字段。开始日期和结束日期。这些字段将是“Contact Form 7 Datepicker”插件中的日期选择器。 当访客选择...

如何以 CF7 表单电子邮件发送 woocommerce 购物车项目

我需要通过联系表单 7 插件在电子邮件中发送 Woocommerce 购物车项目。 我想在结帐页面上制作一个仅包含电话字段的快速订单表 但也要通过电子邮件发送购物车详细信息。

联系表单“通过此字段提交了未定义的值。”

我的网站上有联系表格，我允许访客决定他们想要租用多少辆自行车（从 1-20 下拉），然后指定有多少男性（从 0-20）和多少女性（从 0-20） 20) t...

联系表格7 我想在提交后运行php代码？有可能吗？

联系表格7 我想在提交后运行php代码？是否可以 ？ 我有 php curl 代码我想运行它，但我不知道该怎么做。 我的PHP代码： 联系表格 7 我想在提交后运行 php 代码？是否可以 ？ 我有 php curl 代码，我想运行它，但我不知道该怎么做。 我的PHP代码： <?php $data = array( 'chatId' => '[email protected]', 'mentions' => array( '[email protected]' ), 'text' => 'Hi there!', 'session' => 'default' ); $options = array( 'http' => array( 'method' => 'POST', 'header' => "Content-type: application/json\r\n", 'content' => json_encode($data) ) ); $context = stream_context_create($options); $result = file_get_contents('http://1.1.1.1:3000/api/sendText', false, $context); echo $result; ?> 请问可以怎样做吗？ 是的，这是可能的。您需要使用 WordPress 挂钩 wpcf7_mail_sent 来完成此操作。您需要将 cURL 代码包装到一个函数中，然后使用钩子，如下所示： add_action('wpcf7_mail_sent', 'your_function');

更改输入类型提交的字体系列

我需要更改用于提交表单的输入字段的字体系列。 HTML 标记是从联系表单 7 生成的，并且使用 ::placeholder 伪类我能够更改...

wordpress 联系表 7 中的切换开关

我想创建一个类似于所附图像的切换开关。 它需要与联系表 7 集成作为选择字段。我希望访问者选择（在本例中）“ik...

CF7下拉菜单限制数量

我正在尝试构建一个联系表单，允许用户选择上课日期，并且我想限制提交的数量，以免过度预订课程。我通常每周提供一堂课，然后......

如何更改文本“未选择文件”及其在联系表单 7 插件的文件上传文件中的位置

亲爱的 Stackoverflow 会员， 我正在为我的 WordPress 网站使用 Contact Form 7 插件，并尝试自定义文件上传输入。 我能够用这行 CS 更改“选择文件”按钮...