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