WordPress MailPoet表单：邮箱输入与订阅按钮同行及容器嵌入问题

1. 邮箱输入框与订阅按钮设置为同一行 #

完全可以实现，有两种常用方法：

方法一：利用MailPoet自带编辑器设置 #

打开MailPoet表单设计器，找到表单的布局设置（不同版本可能标注为“字段排列”或“显示方式”）：

• 选中邮箱字段和订阅按钮所在的区块，将布局模式切换为「行内」或「水平排列」；
• 部分版本支持直接拖拽字段调整位置，将按钮拖到输入框右侧即可实现同行显示。

方法二：自定义CSS强制同行 #

如果编辑器自带选项无法满足需求，可通过自定义CSS实现：

1. 用浏览器开发者工具（F12）查看表单的类名（通常为mailpoet_form，或带有特定ID如mailpoet-form-1）；
2. 在WordPress后台「外观」→「自定义」→「额外CSS」中添加以下代码：

/* 让输入框和按钮同行 */
.mailpoet_form .mailpoet_field.mailpoet_text {
  display: inline-block;
  width: 70%;
  margin-right: 10px;
  vertical-align: middle;
}
.mailpoet_form .mailpoet_submit {
  display: inline-block;
  width: calc(30% - 10px);
  vertical-align: middle;
}

/* 移动端自动切换为垂直排列 */
@media (max-width: 768px) {
  .mailpoet_form .mailpoet_field.mailpoet_text,
  .mailpoet_form .mailpoet_submit {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}

根据实际需求调整宽度比例和间距即可。

2. 将MailPoet表单放入落地页容器与其他按钮相邻显示 #

核心思路是把表单和其他按钮放在同一个布局容器内，具体操作分两种场景：

场景一：使用页面构建器（如Elementor、Beaver Builder） #

1. 在落地页编辑界面添加一个行模块，根据需要划分列数（比如2列）；
2. 在其中一列插入「短代码模块」，粘贴MailPoet生成的表单短代码（可在MailPoet表单列表中复制）；
3. 在另一列添加按钮模块，设置好按钮样式和链接；
4. 调整列的宽度比例，确保表单和按钮对齐，同时开启响应式设置，移动端自动堆叠。

场景二：纯主题编辑/自定义HTML #

1. 在落地页的自定义HTML模块（或模板文件）中，将表单短代码和按钮HTML放入同一个容器div：

<div class="action-bar-container">
  <!-- MailPoet表单短代码 -->
  [mailpoet_form id="1"]
  <!-- 其他按钮 -->
  <a href="/your-link/" class="secondary-button">其他操作按钮</a>
</div>

2. 添加CSS调整容器内元素的排列：

.action-bar-container {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* 适配移动端 */
@media (max-width: 768px) {
  .action-bar-container {
    flex-direction: column;
    align-items: stretch;
  }
}

这样表单和按钮就会在同一容器内相邻显示，且适配不同屏幕尺寸。

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