MeDo

AI联系表单生成器。

描述您需要的字段、想要的语气和重要的验证规则——MeDo在几秒内将您的提示词转化为完整的、无障碍的联系表单组件。

联系表单
联系表单

每个网站都需要一个出色的联系表单

联系表单通常是访客在成为潜在客户之前最后交互的组件——然而大多数只是事后考虑。糟糕的字段设计、缺失的验证和令人困惑的错误状态会在意向产生的确切时刻制造摩擦、扼杀转化。精心设计的联系表单传达专业性、减少放弃率，让合适的人轻松联系到您。

6 个模板

可以生成的 联系表单 模板

每个模板都是真实的提示词，而不是截图。复制到任意 AI 编辑器，或在 MeDo 中运行，直接拿到 React + Tailwind 代码。

BasicInquiry

Name, Email, Message Form

Three fields and nothing else. The right default when you have no routing logic yet — every field you add past this point has to justify itself against a measurable drop in completions.

Create a three-field contact form — full name, email, message — inside a bordered card. Every input gets a visible label tied by htmlFor, and validates on blur rather than on every keystroke: name non-empty, email checked against a permissive pattern, message at least twenty characters with a live counter. Render each error in a span referenced by aria-describedby and set aria-invalid on the failing input. On submit, disable the button, swap its label for a spinner with role="status", then replace the card with a confirmation that names the reply window. On failure keep every typed value, show a retry banner and move focus to it. Add a honeypot field and a minimum time-to-submit check instead of a CAPTCHA.

在 MeDo 中尝试
QualifyingStudio

Project Type and Budget Form

Adds the two questions that decide whether you reply today or next week. Worth the extra friction for service businesses, wasteful for anything self-serve.

Create an agency inquiry form in a light card: full name, work email, a project type select (Brand Identity, Web Design, Motion, Other), a budget radio group (Under $5k, $5k-$20k, $20k+) wrapped in a fieldset with a legend, and a message textarea. Mark the select and the radio group required but validate on submit, not on mount, so the form never opens already covered in red. Collect the failures into an error summary above the card with in-page links to each field, set aria-invalid and aria-describedby on the offenders, and move focus to the summary heading. Show a pending state on the button, a success panel replacing the card, and a failure banner that preserves every answer.

在 MeDo 中尝试
BranchingSwitchboard

Sales or Support Split Form

One URL, two queues. Stops enterprise leads from landing in the bug tracker without asking you to maintain two contact pages that drift apart.

Create a contact form that opens with a two-option segmented control — Sales inquiry or Support request — built from radio inputs in a fieldset, and swaps the fields beneath it. Sales shows company, team size and budget; Support shows account email, affected feature and a severity select. Announce the swap through an aria-live="polite" region and move focus to the first field of the new branch. Validate only the visible branch, keep the hidden branch out of the submitted payload, and wire every error to its input with aria-describedby and aria-invalid. On submit show a pending button, then a success message naming the queue the request went to. Rate-limit repeat submissions from the same session and include a hidden honeypot.

在 MeDo 中尝试
High trustChambers

Confidential Consultation Form

For regulated practices, where the reassurance copy next to the submit button does more work than the field layout does. Say what happens to the data before you ask for it.

Create a consultation request form for a law or financial practice: full name, email, phone with a format hint in the label rather than as placeholder-only text, a matter type select for routing, a preferred contact method radio group, and a details textarea with a note that this form is not privileged communication. Put a one-line confidentiality statement directly above the submit button, not in the footer. Validate on blur, expose errors through aria-describedby, and set aria-invalid on failures. Submit button reads Request a confidential consultation, goes to a disabled pending state, then a success panel stating the response window and an alternative phone number. On failure show the error inline and never clear the textarea.

在 MeDo 中尝试
Two columnLedger

Contact Details Beside the Form

Form on the right, address, hours and direct email on the left. Cuts the volume of people who fill in a form to ask a question the sidebar already answered.

Create a two-column contact section: on the left, an office address, opening hours, a direct email and phone as real mailto and tel links; on the right, a card form with name, email, subject select and message. Stack the columns on mobile with the form first. Labels are always visible, errors validate on blur and attach via aria-describedby with aria-invalid on the input, and the submit button moves through idle, pending with a role="status" spinner, and success states. On failure show a banner above the form, focus it, and keep all values. Add a honeypot input hidden from assistive technology and a timestamp check to drop bot submissions.

在 MeDo 中尝试
Multi stepEnquire

Three-Step Contact Wizard

Splits a long inquiry into three short screens with a step indicator. Only pays off past about eight fields — below that the wizard adds clicks and removes context.

Create a three-step contact wizard: step one collects name and email, step two collects project type, budget and timeline, step three shows a message textarea and a read-only review of the earlier answers. Render a step indicator with aria-current="step" on the active item. Validate the current step before allowing Next, focus the first invalid field, and expose errors with aria-describedby and aria-invalid. Keep all answers in state so Back never loses data. The final submit shows a pending state, then a success screen replacing the wizard, and on failure returns to step three with a retry banner and every answer intact. Include a honeypot field.

在 MeDo 中尝试

如何自定义你的 联系表单

只问您真正会使用的信息

每增加一个字段都会降低完成率。审查您的表单：如果您无法描述某个字段如何影响您对提交的回应，就删除它。姓名、电子邮件和一个资格问题通常就足以开始对话。

编写引导而非斥责的验证错误

将"无效邮箱"之类的消息替换为"请输入有效的电子邮件地址，例如 you@example.com"。具体、可操作的错误文本减少了重新提交的摩擦，并与犯诚实错误的访客建立信任。

像设计表单一样精心设计成功状态

提交后的确认在大多数网站上是被忽视的机会。用它来设定期望（"我们将在一个工作日内回复"）、提供替代方案（"或直接预约通话"）或强化品牌声音——而不仅仅是通用的"谢谢"。

使用条件字段保持表单简短

仅在与之前的回答相关时才显示额外问题——例如，只有在访客选择"新项目"后才显示预算字段。条件逻辑减少了感知长度，让每个访客精确聚焦于对其情况重要的输入。

谁在使用 联系表单 组件

创意机构或自由职业者

机构联系表单通常在姓名和电子邮件之外包含项目类型选择器、预算范围和时间线字段——为工作室提供足够的上下文，在首次回复之前就能评估和优先排序传入的潜在客户。

SaaS或科技产品

产品联系表单通常在顶部分为"销售咨询"和"支持请求"，然后按路径显示相关字段——无需两个单独的页面即可将企业潜在客户与错误报告分开。

专业服务（法律、金融、医疗）

受监管行业的高信任联系表单强调保密保证，包含用于路由的事务类型下拉菜单，并将通用提交按钮替换为"申请保密咨询"等文案。

活动或会议网站

活动咨询表单询问参与类型、赞助层级的公司规模和首选主题——在活动开始之前同时充当潜在客户捕获和受众分群工具。

不同网站的 联系表单 方案

同一个 联系表单 组件，针对它所在网站的类型做调整。

01 / 06

Agency and Studio Contact Forms

Project type, budget band and timeline earn their place here because they decide reply order, not because they look thorough. The one field to cut first is company website — you can find it from the email domain in less time than the visitor spends typing it.

联系表单 的风格与变体

挑选与页面其余部分匹配的变体，然后生成它。

01 / 06

Card Form With Visible Labels

A bordered card, one column, labels above every input. The most boring option and the one that tests best, because a label above the field survives autofill, zoom and translation without collapsing into the value.

在 React、Next.js、Vue 与 Svelte 中使用 联系表单

React、Next.js、Vue 3、SvelteKit、Astro 或纯 HTML —— 同一个 联系表单，六种接入方式。

01 / 06

React Contact Form

Keep the form uncontrolled and read values from FormData on submit — controlled state on every field re-renders the whole form on each keystroke for no benefit. Hold only errors and status in state.

src/components/ContactForm.tsx

export function ContactForm() {
  const [status, setStatus] = useState('idle')

  async function onSubmit(e) {
    e.preventDefault()
    setStatus('pending')
    const data = new FormData(e.currentTarget)
    const res = await send(data)
    setStatus(res.ok ? 'success' : 'error')
  }

  return <form onSubmit={onSubmit} noValidate>{/* fields */}</form>
}

如何把 联系表单 加入项目

四个步骤，从挑选 联系表单 模板到上线生产环境。

01~30s

Pick a Contact Form Template

Match the template to how you triage replies — three fields if every message goes to one inbox, the branching form if sales and support are different queues.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Replace the placeholder select options with your real ones first, since the option list is what determines the routing you have to build behind it.

03~2min

Generate and Refine

You get React + Tailwind with a live preview. Follow up in plain English — "validate on blur, not on change", "add an error summary above the card", "keep the values on a failed submit".

04~2min

Wire Up the Submit Handler

Point the action at a serverless function, Resend, Formspree or your own API. Test the failure path before shipping: a form that silently drops a message is worse than no form at all.

关于 联系表单 的常见问题

什么是AI联系表单生成器？

AI联系表单生成器接受对所需字段、验证规则和设计的自然语言描述，生成带有可用代码的完整样式化表单组件。MeDo生成整个组件——布局、标签、错误状态、成功状态和无障碍属性——让您可以直接放入项目中。

如何用AI创建联系表单？

打开MeDo并用中文描述您的表单：列出所需字段、验证要求、视觉样式以及条件字段或自定义成功消息等特殊行为。MeDo立即生成组件。您可以用后续提示词进行优化——更改字段类型、调整验证或重新设计布局——直到完全满意。

构建联系表单的最佳AI工具是什么？

MeDo专为从提示词生成单个UI组件而设计，包括联系表单。与通用AI聊天工具不同，MeDo理解表单无障碍性（ARIA标签、键盘导航、焦点管理）、验证模式和组件结构——因此输出是生产就绪的，而不仅仅是看起来合理的代码。

AI能生成带验证的联系表单吗？

可以。当您在提示词中包含验证要求时——例如"必填字段"、"有效电子邮件格式"或"消息字段至少20个字符"——MeDo会在组件旁生成内联验证逻辑。您还可以根据技术栈要求特定的验证库或原生HTML5约束验证。

如何在不使用插件的情况下给网站添加联系表单？

用MeDo生成表单组件，然后将提交处理程序连接到任何HTTP端点——无服务器函数、Resend或Formspree等表单处理服务，或您自己的后端API。由于MeDo生成的组件代码不依赖外部表单库，您可以完全控制提交逻辑和数据路由。

联系表单应该包含哪些字段？

联系表单至少需要一个姓名字段、一个电子邮件地址字段和一个消息文本域。除此之外，只添加会改变您回应方式的字段：用于路由的主题或项目类型选择器、如果提供电话咨询则添加电话字段、服务型企业的预算范围。每增加一个必填字段都会增加放弃率，因此保持默认简短，在相关时使用条件逻辑扩展。

立即用 MeDo 生成你的 联系表单。

尝试任何提示词 — 免费，无需注册。

免费开始构建查看定价
CTA区块

CTA区块

将一句话简报变成高转化的行动号召区块。标题、支撑文案和按钮——全部生成，可直接嵌入你的页面。

相关组件
新闻通讯订阅

新闻通讯订阅

一句话简报即可生成精美的新闻通讯订阅区域。邮箱输入框、辅助文案、社交证明和样式化代码 — 全部生成，即可部署。

相关组件
页脚

页脚

描述您需要的页脚 — 栏目、链接、法律文字、社交图标 — MeDo在几秒内生成生产级代码。永远告别复制粘贴样板代码。

相关组件