An HTML proposal template,
with a prompt, the code and an accept form

You want a proposal that looks like a web page, not a Word file: readable on a phone, with a pricing table and a button to accept. Searching for an HTML proposal template mostly turns up landing pages with the word "proposal" on them. This guide gives you the structure that works, a prompt that has Claude, ChatGPT or Gemini write it from your notes, and the code if you would rather start by hand.

Then the part a template alone cannot do: sending it. Hostus is the option we put first, and the category matters: best if the proposal is one HTML page you send as a link, with an email gate that tells you when the client opened it and which section they read, and an Accept form whose responses reach you. Proposal software and Docs templates are covered below.

What a good HTML proposal template has

A proposal template is a structure, not a design. The design changes per client; the sections do not. These are the six that work, in the order clients read them, each a heading with an id so the page can be measured section by section once it is sent:

• summary: the problem in the client's words and the result in one paragraph. Most clients read this in full and skim the rest.
• scope: what is in and, in the same breath, what is out. This is where questions come from.
• options: two or three options in a pricing table, with the price in this section only. If they never opened Options, they never saw a number.
• timeline: dates, not durations. "Kickoff 3 November, launch 12 December" gets a reply; "six weeks" does not.
• about: who does the work and two past projects. Short.
• accept: a form with name, email and the chosen option, so saying yes takes one tap on a phone.

Keep it one page. The client scrolls; there is no "next page" to lose them on.

The prompt: have an AI write the proposal as one HTML page

Paste your notes under this prompt in Claude, ChatGPT or Gemini. With the Hostus connector on in Claude, it also publishes the page and sets up the form. Without it, download the .html file and drop it on Hostus.

Here are my notes for a proposal (pasted below): the client, the problem in their words, what is in and out of scope, two or three options with prices, the dates, who does the work, and two past projects.

Write it as one HTML proposal page with these sections, each a heading with an id:
- summary: the problem and the result in one paragraph, in the client's words.
- scope: what is included and, right after it, what is not.
- options: a table with one column per option (what is included, timeline, price) and a short line on which one I recommend and why. Prices appear in this section only.
- timeline: dates, not durations, as a short list from kickoff to delivery.
- about: who does the work and the two past projects, two lines each.
- accept: a form, <form method="post" name="accept">, with fields name, email, option (one radio per option) and notes (optional), and a button "Accept this proposal".

Use only the prices and dates I pasted. If one is missing, leave a visible placeholder instead of inventing it. Put the client's name and the date at the top, and a small "Valid until" line.

No action URL on the form, no key in the page, no external scripts except Google Fonts, no tracking, no backend, no localStorage, one HTML file, mobile first.

Publish it to Hostus. Set the form to email me on every response and to show "Thanks. I will confirm by email within a day." after sending. Give me the link.

The form needs no action URL and no key: on Hostus any form with method="post" and named fields records its responses on the document. The form settings (email on every response, the thank-you message, closing after a number of responses) live on the document, not in the HTML, so you can change them in the dashboard later without touching the file.

The HTML proposal code, if you want a skeleton

If you would rather start from code than from a prompt, this is the skeleton the prompt produces, without the styling. Copy it, fill the brackets, style it in your colors. The ids on the sections and the name on each field are the parts that matter.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Proposal for Client Name</title>
  <style>
    body{font-family:system-ui,sans-serif;max-width:720px;margin:0 auto;padding:24px 18px;line-height:1.55}
    table{width:100%;border-collapse:collapse} th,td{border:1px solid #ddd;padding:8px;text-align:left}
  </style>
</head>
<body>
  <h1>Proposal for Client Name</h1>
  <p>Prepared on [date] · Valid until [date]</p>

  <section id="summary"><h2>Summary</h2><p>...</p></section>
  <section id="scope"><h2>Scope</h2><ul><li>...</li></ul><p>Not included: ...</p></section>

  <section id="options"><h2>Options and pricing</h2>
    <table>
      <tr><th></th><th>Essential</th><th>Complete</th></tr>
      <tr><td>Includes</td><td>...</td><td>...</td></tr>
      <tr><td>Timeline</td><td>...</td><td>...</td></tr>
      <tr><td>Price</td><td>$...</td><td>$...</td></tr>
    </table>
  </section>

  <section id="timeline"><h2>Timeline</h2><ol><li>Kickoff: [date]</li></ol></section>
  <section id="about"><h2>About us</h2><p>...</p></section>

  <section id="accept"><h2>Accept</h2>
    <form method="post" name="accept">
      <label>Name <input name="name" required></label>
      <label>Email <input name="email" type="email" required></label>
      <label><input type="radio" name="option" value="Essential" required> Essential</label>
      <label><input type="radio" name="option" value="Complete"> Complete</label>
      <label>Notes <textarea name="notes"></textarea></label>
      <button>Accept this proposal</button>
    </form>
  </section>
</body>
</html>

The prompt is usually faster: you get the same structure with your copy, a layout that works on a phone, and a design you can change by asking ("use our navy and a serif for headings").

See a proposal made from this template

Here is a proposal page, live: a website redesign for a fictional dental clinic, with a summary, scope, timeline, two options with prices, the team and an Accept form at the end. The clinic does not exist and the prices are illustrative. Open it on a phone; it reads like a web page, because it is one.

Two things on it come from Hostus, not from the file. The client can ask the page a question ("is hosting included in the second option?") and get an answer from what the proposal says, with the section cited. And they can reply on a section ("the scope is fine, the deadline is not"), which reaches you by email in a thread only the two of you see.

Send it as a link: know when the client opens it, and what they read

An HTML file attached to an email arrives as a download the client has to find and open. Hosted on Hostus it is a link, your-slug.hostus.page, that opens on any phone. Pages are born private; switch the proposal to email-gated in the dashboard before you send it. Then:

• You know when the client opens it. The client types an email before the page opens, no account. You see who and when in the dashboard, and a daily email digest names the people who opened your docs the day before.
• Reading by section. How long each reader spent on Summary, Scope and Options, what they came back to, and where they stopped. Opened Options three times and no reply means the price is the question.
• Questions and replies. Ask and Reply are on by default. Every question the client asked the page is listed for you, with the ones the page could not answer.
• Request a version. The reader can ask for their own version of the page: a one-page summary for their boss, an excerpt, or a translation. It is off on gated pages until you turn it on, and the version they make stays private in their account, with a link back to yours.
• The accept reaches you. Each response to the Accept form is stored on the document and emailed to you, and Claude can read them with the connector on.
• Fix it on the same link. They want the timeline moved. Upload v2 to the same document; the link they have shows v2, and the last 20 versions stay in the history.

How to read the signal and write the follow-up is in how to know if a client opened your proposal.

Where to get a free HTML proposal template

Hostus first, for the case this page is about: a proposal that is one HTML page you send as a link, with the gate, the reading signal and the accept, on a free plan. The other places people get a template each have a case.

• Hostus, with the prompt above. The template is the prompt and the skeleton on this page, free. Hosting it with the email gate, reading by section, Ask, Reply and the Accept form is free for 20 documents and 100 form responses a month.
• A template marketplace or a code playground. Pick it if you want a finished design to adapt by hand. Most are landing pages relabeled as proposals: check for a pricing table and a form that posts somewhere before you start, and expect to wire the form yourself.
• Proposal software. Pick it if the accept has to be a legal e-signature in the same link, or you need a CRM behind it. The editors are their own, not HTML you keep. Prices and free plans are compared in the proposal as a web page guide.
• A Google Docs or Word template exported to PDF. The baseline. Free and familiar, and once it is sent you learn nothing, and the client cannot accept from the page.

Good to know before you switch

The Accept form is a record of who chose which option and when, not a legal e-signature; if the engagement needs a signed contract, send it separately. There are no payments on the page and no CRM. The gate is by email, not by password, and it never verifies that the typed address belongs to the person; restricting it to the client's addresses or domain only limits what can be typed.

Hostus hosts HTML, not PDF or Word. The free plan is 20 documents, 2 MB of storage in total and 100 form responses a month; paid is $9.99 a month or $49.99 a year. Pages carry a noindex meta, the link is your-slug.hostus.page with no custom domain, every page carries a small "Published with Hostus" pill, and the Accept form shows a small "Form by Hostus" line under its thank-you message.