移动端优化WordPress的Contact Form 7表单：实现单列布局

要解决移动端每行仅展示一列的需求，无需修改表单的HTML代码，直接添加媒体查询CSS即可实现。步骤如下：

1. 进入WordPress自定义CSS面板 #

登录WordPress后台，依次点击「外观」→「自定义」→「额外CSS」（不同主题可能命名为「自定义CSS」，找到对应入口即可）。

2. 添加移动端适配CSS #

将以下代码粘贴到自定义CSS框中：

/* 移动端适配：屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
  /* 将表单行改为垂直排列 */
  .quote_form_row {
    flex-direction: column !important;
    gap: 15px; /* 可选：增加列之间的垂直间距，提升可读性 */
  }

  /* 让每个表单列占满整行宽度 */
  .quote_form_row .col {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* 可选：调整标签和输入框的间距，优化移动端体验 */
  .quote_form_row label {
    display: block;
    margin-bottom: 8px;
  }
}

代码说明 #

• @media (max-width: 768px)：针对屏幕宽度≤768px的移动设备生效，可根据需求调整这个阈值（比如改成600px）。
• flex-direction: column：把原来的横向flex布局改为垂直排列，直接实现单列效果。
• flex: 1 1 100%和width:100%：强制每个表单列占满整行宽度，避免出现元素挤在一起的情况。
• 额外的间距调整是为了让移动端的表单元素更易点击、可读性更强，可根据实际视觉效果调整数值。

添加完成后点击「发布」，刷新移动端页面即可看到效果。

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