Forms
联系表单
一个带验证的联系表单,包含姓名、邮箱、留言、加载状态和成功反馈。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度beginner
英文提示词
Create a contact form with name, email, and message fields. Include client-side validation: all fields required, valid email format, and 500 character limit on message. Show inline error messages, a loading state on submit, and a success message after submission. Use shadcn/ui Input, Textarea, Button, and Label components and Tailwind CSS. Make it accessible with proper labels and focus states.
中文提示词
创建一个包含姓名、邮箱和留言字段的联系表单。包含客户端验证:所有字段必填、邮箱格式正确、留言限制 500 字符。显示内联错误信息、提交时加载状态和提交后的成功提示。使用 shadcn/ui Input、Textarea、Button 和 Label 组件以及 Tailwind CSS。确保可访问性,包含正确标签和聚焦状态。

概述
一个带验证和反馈状态的标准联系表单。可直接连接到你的邮件服务或 API 端点。
功能特性
- 姓名、邮箱和留言字段
- 客户端验证
- 内联错误信息
- 加载提交状态
- 成功确认
- 可访问标签和聚焦样式
使用方法
将提示词复制到 v0 或 Cursor 中。将 onSubmit 处理程序连接到你的后端或邮件服务。
自定义选项
修改提示词以:
- 添加主题字段
- 包含 reCAPTCHA 或蜜罐
- 添加电话号码字段
- 通过 server action 或 API 路由发送