BTP EA Rénovation
六个字段，一个都不多：表单本身就是产品。
- 年份
- 2026
- 制作周期
- 3 周
- 技术栈
- Next.js · React · TypeScript · Tailwind · Vercel
- 设计
- 开发
- 本地 SEO
- 转化漏斗
- 文案撰写
- 筛选字段
- 6
- 回电承诺
- 48 小时
- 地区页面
- 9+
- CAPTCHA 验证码
- 0
需要解决的问题。
背景
一家立足里昂的装修工程工匠——涂装、石膏抹灰、地面与墙面饰材、浴室翻新——服务范围覆盖里昂及里昂大都会区。
限制
建筑工匠流失客户，不是因为曝光不够，而是因为需求没有经过筛选。无效来电耗费大量时间：工地不在服务区、预算不匹配、要做的活儿他根本不接。网站必须在来电之前完成筛选，同时又不能把优质询价挡在门外。
对策
报价表单放在首屏，而不是页脚，而且非常简短：六个字段就能界定一项工程——工程类型、面积、房间、所在市镇、期限、联系方式。正是这一步筛选让回电变得高效；没有它，每通电话都要先花五分钟问问题。
每一个设计取舍，及其理由。
首屏即报价
表单不在页面末尾，而是紧挨着服务承诺。访问工匠网站的人早已知道自己要什么；让他先滚动三屏才能行动，纯属损失。
六个字段，逐一斟酌
每删掉一个字段，填写完成率就会上升；每增加一个字段，筛选精度就会提高。六个是最终的平衡点：再多，放弃率带来的损失就会超过信息增益。
用前后对比，而不是施工照片
工匠喜欢展示施工中的现场，客户想看的却是最终效果。作品集以“施工前/施工后”成对呈现，并注明具体的工程内容。
明确公示回电承诺
“48 小时内回电”是一个有具体数字的承诺，就写在表单上方。含糊的说法（“我们会尽快回复您”）无法让任何人安心。
项目配色
工地蓝
#1D4E77
结构、信任感
安全橙
#D9601A
行动、报价
混凝土灰
#F2F3F5
背景
墨色
#1C2126
正文
字体系统
标题字体
Outfit 700
正文字体
Inter 400
稳重，不加修饰。面积与工期数字采用等宽数字，在报价汇总中保持对齐。
幕后的技术实现。
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
客户端与服务端双重校验
表单实时校验，帮助用户正确填写；保存前再在服务端重新校验一次。只做客户端校验，十秒钟就能绕过，任何内容都能混进来。
不用 CAPTCHA 的反垃圾机制
蜜罐字段、提交时间戳与频率限制。CAPTCHA 会给网站唯一需要保护的环节增加阻力——而且它本身就是公认的无障碍障碍。
即时通知
每条询价都会通过电子邮件发出，所有筛选信息都写在邮件主题里。工匠在两个工地之间看手机：有用的信息必须在预览里就能看全。
网站如何被搜索到。
每个区一个页面
里昂的九个区，加上大都会区的各个市镇。每个页面都有专属内容——街区、建筑类型、工程案例——而不是简单替换城市名称。
按工种搜索，而不是按行业
“Peintre en bâtiment Lyon 3”（里昂三区 建筑油漆工）、“rénovation salle de bain Villeurbanne”（维勒班 浴室翻新）：客户搜索的是工种加市镇，从来不会搜“建筑公司”。
HomeAndConstructionBusiness 结构化标记
使用专用类型，声明服务区域，并以 Service 列出各项服务。这直接决定能否出现在本地搜索结果包（local pack）中。
人人都能使用。
自2025年6月起，《欧洲无障碍法案》（European Accessibility Act）要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理，而非事后补救。
真正无障碍的表单
标签与字段关联，错误信息会被朗读并与对应字段绑定，Tab 键顺序经过核验。表单是网站中最常出现无障碍问题的组件——而在这里，它是唯一真正重要的组件。
交付了哪些内容。
- 首页——快速报价
- 服务项目（涂装、石膏抹灰、地面、浴室）
- 施工前/施工后案例
- 服务区域——9 个区 + 大都会区
- 联系我们
项目的推进过程。
需求筛选
根据工匠错失的来电，与他一起确定六个字段。
设计
首屏报价、前后对比作品集、量化承诺。
开发
双重校验、无 CAPTCHA 反垃圾、邮件通知。
本地 SEO
按区建页、行业结构化标记。
