---
url: /mobile/forms.md
---
# 表单与转化

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

## 表单页范式

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

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

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

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

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

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

规则：

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

## 轻反馈

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