如何在Contact Form 7中将reCAPTCHA与提交按钮置于同一行

嘿，我帮你搞定这个CF7的布局难题！核心问题就是Contact Form 7默认会给每个表单元素（包括[recaptcha]和[submit]）自动套一层<div>标签，块级元素自然上下排列。要实现reCAPTCHA左、提交按钮右的同行布局，给你两种靠谱方案：

方法一：纯CSS调整（不用改代码，新手友好） #

这种方法最省心，直接用自定义CSS调整布局就行：

1. 先给表单里的这两个元素套个自定义容器，打开CF7的表单编辑界面，把代码改成这样：

<div class="recaptcha-submit-group">
  [recaptcha]
  [submit "Send"]
</div>

2. 然后去WordPress后台的「外观→自定义→额外CSS」，把下面的CSS粘贴进去：

/* 让容器变成flex布局，强制两个元素在一行 */
.wpcf7-form .recaptcha-submit-group {
  display: flex;
  align-items: center;
  gap: 20px; /* 这里可以调整两个元素之间的间距，按需修改 */
}

/* 让reCAPTCHA占满左侧剩余空间，提交按钮自适应宽度 */
.wpcf7-form .recaptcha-submit-group .wpcf7-recaptcha {
  flex: 1;
}

/* 防止提交按钮文字换行 */
.wpcf7-form .recaptcha-submit-group .wpcf7-submit {
  white-space: nowrap;
}

3. （可选）加个响应式适配，小屏幕上自动换行，避免元素挤在一起：

@media (max-width: 768px) {
  .wpcf7-form .recaptcha-submit-group {
    flex-direction: column;
    align-items: flex-start;
  }
}

方法二：移除CF7自动添加的div标签（结构更干净） #

如果你嫌CF7自动加的div多余，想让HTML结构更简洁，可以用PHP过滤器去掉它们。打开主题的functions.php文件（或者用自定义插件，更安全），添加这段代码：

// 移除Contact Form 7自动为表单元素包裹的div标签
add_filter('wpcf7_form_elements', function($content) {
    $content = preg_replace('/<div(.*?)class="wpcf7-(.*?)".*?>(.*?)<\/div>/i', '\3', $content);
    return $content;
});

然后你就可以直接给两个元素套flex容器，甚至直接写行内样式：

<div style="display: flex; align-items: center; gap: 20px;">
  [recaptcha]
  [submit "Send"]
</div>

⚠️ 注意：移除自动div后，CF7的默认样式可能会失效，需要你自己确保主题的CSS能覆盖表单的基础样式哦。

额外提醒 #

• 这个问题只针对reCAPTCHA v2（就是那个带复选框的版本），如果用的是v3，它是隐形验证，不会显示在页面上，压根不需要调整布局。
• 改完后记得清空浏览器缓存，不然可能看不到效果！

内容的提问来源于stack exchange，提问作者Artur