Hợp đồng thiết kế web mẫu chuẩn: template điều khoản scope — milestone và IP
· Tác giả: Trường — Founder Webchốt
Liên quan: Xem thêm trang dịch vụ web bán hàng của Webchốt.
Hợp đồng thiết kế web mẫu chuẩn không phải để “làm đẹp giấy tờ”, mà để hai bên nhìn cùng một bản đồ trước khi dev viết dòng code đầu tiên. Web SME Việt Nam thường vướng ba chỗ: scope trôi nổi khiến báo giá ban đầu vô nghĩa; milestone thanh toán không khớp tiến độ UI và staging; và tranh chấp IP khi khách muốn mang repo đi nhưng agency vẫn nợ đủ tiền hoặc ngược lại. Bài viết này đưa khung điều khoản thực dụng cho chủ đầu tư và studio Next.js: checklist có thể copy vào Google Doc, gợi ý template hợp đồng web để GHÉP vào luật định Việt Nam qua luật sư, và ví dụ nghiệm thu đo được trên Lighthouse, form, CMS. Cuối bài có liên kết tới configurator báo giá và hub công cụ như mẫu hợp đồng, báo giá để gói hồ sơ chào khách gọn hơn.
Scope ghi bằng bullet deliverable giúp tránh cãi nhau về “xong hay chưa” khi nghiệm thu web. | Nguồn: webchot.com
Template hợp đồng web Next.js: khung điều khoản tối thiểu cho SME
Một template hợp đồng web chất lượng phải biến backlog đã duyệt thành điều khoản có thể đối chiếu. Phần định nghĩa nên liệt kê rõ stack ví dụ Next.js, TypeScript, Tailwind, CMS headless nếu có, môi trường deploy Vercel hoặc self-host, và danh sách tích hợp như GA4, Resend, Zalo OA. Tránh viết chung chung kiểu “làm website đẹp”, mà chuyển thành “7 trang marketing, blog 2 cột, form liên hệ gửi email, sitemap và metadata OpenGraph đủ cho 20 bài đầu”. Mỗi mục đó nên có owner phía khách và phía studio để không bị kẹt vì chờ tài liệu hoặc ảnh sản phẩm.
Với template bạn lấy từ internet, hãy kiểm tra nó có đủ điều khoản bảo mật dữ liệu form — ai chịu trách nhiệm khi có spam, ai cấu hình reCAPTCHA — và điều khoản backup, bản quyền font, ảnh stock. Webchốt thường đính kèm một bảng acceptance gồm LCP dưới ngưỡng đã cam kết, không lỗi console nghiêm trọng trên Chrome mới nhất, và checklist nội dung seed từ phía khách. Cách làm này biến hợp đồng thiết kế web mẫu chuẩn thành công cụ vận hành chứ không chỉ là file PDF ký một lần rồi cất.
Tại sao hợp đồng thiết kế web lại hay vỡ ở scope và milestone
Nhiều tranh chấp bắt đầu từ ranh giới mơ hồ giữa thiết kế, nội dung, và dev. Khách có thể nghĩ “làm landing” đã gồm copywriting và chụp ảnh, trong khi studio chỉ báo giá layout và component. Ngược lại, studio có thể hiểu “responsive” là đủ mobile-first chuẩn Tailwind, nhưng khách kỳ vọng pixel-perfect giống file Figma trên Safari cũ. Khi không có change request có chữ ký, hai bên đều cảm thấy bị lừa.
- Điểm 1: Chốt phiên bản Figma và freeze sau khi ký nhận UI để mọi chỉnh layout sau đó là CR có giá và ngày.
- Điểm 2: Gắn milestone thanh toán với artifact có link cố định: staging URL, repo branch được tag, hoặc export CMS snapshot.
- Điểm 3: Giới hạn vòng chỉnh sửa trong giai đoạn QA ví dụ hai vòng layout và một vòng content nhỏ để không biến QA thành “thiết kế lại miễn phí”.
- Điểm 4: Ghi rõ ai chịu chi phí license asset và hosting staging trong giai đoạn UAT để không đùn nhau khi bill phát sinh.
Bảng so sánh ba kiểu khung hợp đồng web cho chủ đầu tư nhỏ
Chọn khung phụ thuộc mức độ phức tạp và mức rủi ro bạn chịu được. Dự án landing marketing 5–7 trang có thể dùng bản ngắn 4–6 trang A4 nếu scope đã khóa bằng wireframe; dự án có form, thu thập lead, và blog dài hơn nên có phụ lục kỹ thuật; còn dự án tích hợp thanh toán hoặc API nội bộ cần điều khoản SLA test, sandbox, và logging lỗi. Bảng dưới giúp bạn nhìn nhanh trước khi nhờ luật sư rà soạn bản tiếng Việt đầy đủ.
| Tiêu chí | Lựa chọn A | Lựa chọn B | Khuyên dùng |
|---|---|---|---|
| Độ dài và pháp lý | 2–4 trang, gọn cho micro business | 8–12 trang kèm phụ lục kỹ thuật | B nếu có form thu PII hoặc tích hợp API |
| Điều khoản IP và repo | Chỉ ghi “bàn giao website” | Ghi rõ repo Git, license fonts, tay quyền deploy | Bản chi tiết để khách self-host sau này |
| Đo lường nghiệm thu | Mô tả định tính “đẹp, chạy được” | KPI cụ thể LCP, CLS, checklist chức năng | KPI cụ thể giảm tranh chấp QA |
| Xử lý scope creep | Nói miệng hoặc chat Zalo | Change request có giá và timeline | Văn bản CR có chữ ký hoặc email xác nhận |
Nếu bạn đang ở lựa chọn A nhưng dự án đã có CRM webhook và pixel ads, hãy nâng lên B ngay từ đầu — chi phí luật sư ban đầu thấp hơn chi phí đàm phán lại giữa chừng khi có lead tràn vào spreadsheet và không ai chịu làm báo cáo.
Quy trình 5 bước để đóng gói hợp đồng thiết kế web trước khi dev code
- Bước 1: Thu thập sitemap và wireframe khứ hồi với khách, liệt kê trang, section, form, và ngôn ngữ nếu đa ngữ. Kết quả là một trang Google Doc làm phụ lục A đính kèm hợp đồng.
- Bước 2: Chốt stack và quyền truy cập tài khoản: domain DNS, repo GitHub, project Vercel, CMS. Ghi rõ ai là owner và ai là collaborator để không bị khóa khi nhân sự đổi.
- Bước 3: Đặt milestone thanh toán theo % hoặc số cố định gắn với nghiệm thu staging, sau đó production. Mỗi mốc kèm thời hạn thanh toán ví dụ 3–5 ngày làm việc.
- Bước 4: Viết tiêu chí nghiệm thu kỹ thuật: hiệu năng, SEO kỹ thuật tối thiểu, privacy note cho form, và quy trình rollback nếu deploy lỗi.
- Bước 5: Ký phụ lục bảo hành 30–90 ngày hoặc 12 tháng tùy gói, nêu phạm vi sửa lỗi so với “đổi tính năng mới”. Giai đoạn này cần ticket rõ ràng thay vì tin nhắn rời rạc.
Khi năm bước trên được điền đủ, team dev biết điểm dừng hợp lý và CS khách hàng không phải đoán “cái này có trong hợp đồng không”. Đó cũng là lúc template hợp đồng web của bạn bắt đầu có giá trị tái sử dụng cho dự án kế tiếp.
Báo giá, phụ lục kỹ thuật và liên kết nội bộ Webchốt cho hồ sơ hợp đồng
Sau khi điều khoản pháp lý đã có khung, phần kinh tế cần khớp với effort thực tế. Thay vì viết một con số cứng duy nhất trong body email, bạn có thể dẫn khách tới trang pricing của Webchốt để họ thấy configurator ước lượng theo số trang, CMS, và mức tùy biến UI — từ đó đính kèm báo giá PDF kèm hash ngày để tránh “hôm trước nói khác hôm nay”. Song song, team vận hành có thể dùng platform tools để in nhanh bảng kê milestone thanh toán, hoặc ghép đề nghị thanh toán sau mỗi vòng nghiệm thu; các công cụ này không thay luật sư nhưng giúp hồ sơ đi kèm hợp đồng trông chuyên nghiệp hơn khi làm việc với kế toán nội bộ.
Nếu bạn cần template UI kèm hợp đồng mẫu cho dự án Next.js, tham khảo kho template Webchốt để chọn bộ component phù hợp ngành, rồi map từng module vào phụ lục kỹ thuật. Cách làm này giúp hợp đồng thiết kế web mẫu chuẩn không chỉ mô tả trách nhiệm pháp lý mà còn phản ánh đúng những gì khách nhìn thấy trên demo staging. Khi hai nguồn — báo giá động và công cụ tài liệu — trùng khớp, tỷ lệ ký kết trong buổi họp thứ hai thường cao hơn vì khách cảm thấy minh bạch.
Bốn sai lầm phổ biến khiến hợp đồng web chỉ để… ký cho có
Một hợp đồng không được đọc kỹ thì chỉ là PDF trang trí. Sai lầm thường gặp là copy template tiếng Anh rồi dịch máy sang tiếng Việt nhưng không chỉnh khái niệm như “warranty” và “maintenance”, dẫn tới hiểu nhầm về phạm vi sửa lỗi. Thứ hai là quên ghi điều khoản force majeure hoặc pause hợp lý khi khách chậm cung cấp nội dung — studio bị kẹt tiến độ nhưng vẫn bị đòi deadline.
- Sai lầm 1: Không có danh mục out-of-scope rõ ràng. Mọi yêu cầu “nhỏ xíu” như thêm animation phức tạp hay tích hợp CRM lạ đều có thể balloon effort nếu không bị liệt vào CR.
- Sai lầm 2: Thanh toán 100% trước khi có staging duyệt. Rủi ro chất lượng tăng và khách mất đòn bẩy khi cần sửa nghiêm trọng.
- Sai lầm 3: Không quy định tài khoản analytics và pixel thuộc ai. Khi chia tay agency, dữ liệu ads và GA có thể bị mắc quyền truy cập.
- Sai lầm 4: Bỏ qua điều khoản bảo mật thông tin đăng nhập CMS và token API. Lộ key có thể biến thành sự cố pháp lý lớn hơn lỗi giao diện.
FAQ — hợp đồng thiết kế web mẫu chuẩn
Hợp đồng thiết kế web mẫu chuẩn cần những phần tối thiểu nào?
Tối thiểu nên có phạm vi công việc và deliverable đo được, lịch và milestone nghiệm thu, điều khoản thanh toán, quyền sở hữu trí tuệ và license thư viện bên thứ ba, SLA chỉnh sửa trong giai đoạn bảo hành, và cơ chế change request khi phát sinh. Với site có form thu dữ liệu cá nhân, bổ sung trách nhiệm bảo mật và backup. Sau khi chốt, đính kèm wireframe hoặc link Figma làm phụ lục để tránh tranh cãi về “đã thống nhất UI nào”.
Template hợp đồng web có thể copy nguyên xi từ mạng không?
Không nên vì ngữ cảnh hosting, CMS, và API khác nhau. Hãy dùng bản tiếng Việt phù hợp SME, chỉnh lại điều khoản thanh toán và IP theo luật địa phương, và nhờ luật sư rà nếu giá trị hợp đồng lớn. Template chỉ là điểm khởi đầu; phần quan trọng là phụ lục kỹ thuật bám sát backlog thực tế và log quyết định khách đã ký nhận.
Nên chia thanh toán thiết kế web thế nào trong hợp đồng?
Chia theo milestone gắn artifact: ký kết, duyệt UI, hoàn thành frontend trên staging, và nghiệm thu production. Mỗi mốc có ngưỡng chỉnh sửa cố định để QA không phình. Tránh trả trước toàn bộ; giữ một phần nhỏ sau khi chạy production ổn định 1–2 tuần nếu cần đòn bẩy cuối. Ghi rõ phí chậm thanh toán hoặc tạm dừng công việc khi quá hạn.
Quyền sở hữu source code và design file cần ghi rõ ra sao?
Ghi thời điểm chuyển giao sau khi thanh toán đủ và nghiệm thu; nêu repo, branch production, và quyền truy cập Vercel hoặc server. Với asset stock, ghi license commercial và giới hạn thời gian. Nếu agency giữ quyền tái sử dụng component nội bộ, phải tách phần IP chung và phần brand riêng của khách để không xung đột khi scale.
Khi chủ đầu tư đổi scope giữa chừng thì điều khoản nào bảo vệ hai bên?
Dùng change request có mô tả, estimate effort, chi phí phát sinh, và điều chỉnh timeline bằng văn bản xác nhận. Freeze backlog sau mỗi vòng duyệt lớn; mọi “ý hay mới” phải đi qua CR thay vì chat đêm. Nếu khách pause dự án, nêu phí giữ slot hoặc chi phí đã làm đến thời điểm đó để studio không làm việc miễn phí vô hạn.
Liên Hệ Webchốt
Soạn hợp đồng thiết kế web mẫu chuẩn tốn thời gian nhưng tiết kiệm vài tuần đàm phán sau này nếu bạn gắn deliverable với KPI hiệu năng và CR rõ ràng. So với việc “làm rồi tính”, một bản hợp đồng có phụ lục kỹ thuật giúp giá trị gói Starter hay Business của Webchốt minh bạch hơn vì khách hiểu điều gì đi kèm milestone nào. Nếu bạn cần demo Next.js và bảng giá tham chiếu trước khi đóng pháp lý, cứ nhắn hotline hoặc Zalo bên dưới để team gửi checklist nghiệm thu và ví dụ phụ lục phù hợp ngành.
- Hotline / Zalo: 0905 151 701 — gặp anh Trường (founder/dev).
- Chat Zalo: zalo.me/0905151701 — phản hồi nhanh.
- Email: hi@webchot.com — phản hồi <12h làm việc.
- Studio: 262/1/93 Phan Anh, Phường Phú Thạnh, TP.HCM (T2–T7, 9h–18h).
Tham khảo thêm: 17 template Next.js · 10 dịch vụ web chuyên sâu · bảng giá Webchốt 2026 · 12 công cụ kế toán/tài chính miễn phí.
Reference: Next.js docs · web.dev Core Web Vitals.
