表单与转化

官网的转化路径（留言、订阅、报名）在移动端是一条单列短表单：字段砍到最少、 label 上置、主按钮吸底。桌面上「多栏并排」的表单在 375px 上会让输入区不足 200px，一律改纵向堆叠。

表单页范式

三种典型控件：文本输入（EwField + EwInput，label 上置）、多行文本、底部选择面板（枚举字段用 EwActionSheet 点选，能选不输）。主按钮吸底，与拇指收势位置对齐。

单列留言表单

label 上置 + 整行控件 + 枚举字段底部面板点选 + 吸底提交。

9:41

联系我们

称呼

联系方式

来意

请选择›

留言

vue

<script setup>
import { ref } from 'vue'

const name = ref('')
const subject = ref('')
const sheetOpen = ref(false)
</script>

<template>
  <div class="mb-page">
    <EwField label="称呼"><EwInput v-model="name" placeholder="怎么称呼你" /></EwField>
    <EwField label="来意">
      <div class="picker" @click="sheetOpen = true">{{ subject || '请选择' }}</div>
    </EwField>
    <EwField label="留言"><EwTextarea v-model="message" :rows="3" /></EwField>
  </div>

  <!-- 吸底提交：真机补 env(safe-area-inset-bottom) -->
  <div class="submit-bar">
    <EwButton type="primary" style="width: 100%;" @click="onSubmit">提交留言</EwButton>
  </div>

  <EwActionSheet v-model="sheetOpen" title="选择来意" :actions="subjects" @select="pick" />
</template>

规则：

键盘跟字段走：邮箱字段 inputmode="email"、电话 inputmode="tel"，减少切换成本。
校验内联：错误提示放在字段下方（EwField 的 error），不用弹窗报错。
转化即按钮：一屏一个主 CTA；EwContactForm 桌面版的双栏行在移动端建议改单列后使用。

轻反馈

提交结果用轻提示反馈（成功 / 失败 / 网络），不阻塞页面；需要用户决策的确认（如「放弃填写？」）用底部动作面板或居中小对话框，不要用原生 alert。

提交反馈

提交后以轻提示确认，按钮 loading 期间防重复提交。

表单与转化 ​

表单页范式 ​

轻反馈 ​

表单与转化

表单页范式

轻反馈