A good thank you page confirms what just happened, says what arrives next and when, and offers exactly one useful next step. Below are fifteen original designs for orders, sign-ups, bookings, downloads, donations and more, each written in plain HTML and CSS you can edit here and copy into your own site.
| Visitor just... | Confirm | Best single next step |
|---|---|---|
| Bought something | Order number, items, delivery estimate | Track order or create an account |
| Joined a newsletter | Which address, how often you send | Check inbox to confirm, or read a starter post |
| Booked a time | Date, time, place or video link | Add to calendar |
| Downloaded a file | File name, a backup download link | Related guide or tool |
| Sent a contact form | Reply time, a copy of their message | Browse answers to common questions |
| Donated | Amount, receipt by email | Share or set up a monthly gift |
Updated
Most visitors reach a thank you page at the moment they trust you most, then leave because the page says nothing. These examples are built for that moment. Each one is a complete, editable snippet for a fictional business, sized to drop into a page, and each shows a different way to steer the visitor toward the step that matters next.
The number is the first thing support will ask for, so it gets the largest type after the heading.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #f0fdf4; border: 1px solid #bbf7d0 }
.num { font: 700 26px ui-monospace, monospace; letter-spacing: 1px; margin: 6px 0 12px }
.btn { background: #15803d; color: #fff }
</style>
<div class="ty"><h2>Order confirmed</h2><p>Thanks, Priya. A receipt is on its way to [email protected].</p>
<div class="num">#HB-20481</div><p>Two loaves, ready for pickup tomorrow from 7am.</p><a class="btn" href="#">View or change order</a></div>Three steps show where the order is and set the delivery window before anyone has to ask.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fff; border: 1px solid #e5e7eb }
ol { display: flex; gap: 8px; padding: 0; list-style: none; margin: 12px 0 }
li { flex: 1; padding: 8px; border-radius: 8px; background: #f3f4f6; font-size: 13px; text-align: center }
li.on { background: #1d4ed8; color: #fff }
.btn { background: #1d4ed8; color: #fff }
</style>
<div class="ty"><h2>Your order is in</h2><p>Estimated delivery: Thursday 16 to Saturday 18 October.</p>
<ol><li class="on">Received</li><li>Packed</li><li>On its way</li></ol><a class="btn" href="#">Track parcel</a></div>A guest buyer already typed an email, so the page offers a password field to keep the order history.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fafaf9; border: 1px solid #e7e5e4 }
label { display: block; font-size: 14px; margin-bottom: 6px }
input { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid #a8a29e; border-radius: 8px; margin-bottom: 10px }
.btn { background: #292524; color: #fff; border: 0 }
</style>
<div class="ty"><h2>Paid. Thank you!</h2><p>Want to track this and future orders? Add a password and you are done.</p>
<label for="pw">Password for [email protected]</label><input id="pw" type="password"><button class="btn">Save my account</button></div>The offer sits under the confirmation details and relates to what was bought, so it reads as help rather than a hard sell.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fff; border: 1px solid #e5e7eb }
.add { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: #fef3c7 }
.add div { flex: 1 }
.btn { background: #b45309; color: #fff; font-size: 14px }
</style>
<div class="ty"><h2>Your tent is booked for dispatch</h2><p>Order #T-7712. Arrives in 3 to 5 working days.</p>
<div class="add"><div><strong>Matching footprint groundsheet</strong><br>Ships in the same box if added within an hour.</div><a class="btn" href="#">Add</a></div></div>Double opt-in lists need this step. Naming the sender and subject line helps people find the email quickly.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #eff6ff; border: 1px solid #bfdbfe; text-align: center }
.mail { font-size: 40px; line-height: 1 }
small { color: #6b7280 }
</style>
<div class="ty"><div class="mail" aria-hidden="true">✉</div><h2>One more step</h2>
<p>We sent a link to <strong>[email protected]</strong> from Garden Notes, subject "Confirm your subscription".</p>
<small>Nothing there after five minutes? Check spam or <a href="#">send it again</a>.</small></div>Once someone is subscribed, point them at the best thing you have already published instead of making them wait for the next issue.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fff; border: 1px solid #e5e7eb }
.card { display: block; padding: 12px; border-radius: 10px; background: #f5f3ff; color: #4c1d95; text-decoration: none; margin-top: 8px }
</style>
<div class="ty"><h2>You're on the list</h2><p>Garden Notes arrives every other Sunday. Start with the most-read issue:</p>
<a class="card" href="#"><strong>Planting garlic in October</strong><br>Six minute read</a></div>A short three step setup list turns an empty account into progress, with the first step marked as the place to begin.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #0f172a; color: #e2e8f0 }
.ty p { color: #cbd5e1 }
ol { margin: 0 0 12px; padding-left: 20px }
.btn { background: #38bdf8; color: #0f172a }
</style>
<div class="ty"><h2>Your 14 day trial is live</h2><p>Three things to try first:</p>
<ol><li>Import your client list</li><li>Send your first invoice</li><li>Turn on payment reminders</li></ol><a class="btn" href="#">Import clients</a></div>Date, time and place in a compact block, with calendar and reschedule links right next to them.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fff; border: 1px solid #e5e7eb }
dl { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; margin: 0 0 12px }
dt { color: #6b7280 } dd { margin: 0 }
.btn { background: #0f766e; color: #fff }
</style>
<div class="ty"><h2>See you on Friday</h2><dl><dt>When</dt><dd>Fri 17 Oct, 10:30 to 11:15</dd><dt>Where</dt><dd>Dock Street Physio, room 2</dd><dt>With</dt><dd>Ana Ruiz</dd></dl>
<a class="btn" href="#">Add to calendar</a> <a href="#">Reschedule</a></div>A short prep list makes the call more useful and quietly sets expectations for both sides.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fdf4ff; border: 1px solid #f5d0fe }
ul { margin: 0 0 12px; padding-left: 20px }
</style>
<div class="ty"><h2>Call booked for Tuesday at 2pm</h2><p>The video link is in your calendar invite. To make the 20 minutes count, think about:</p>
<ul><li>How many pages your site has today</li><li>Your launch date, if you have one</li></ul><a href="#">Need to move it?</a></div>Repeating the message back proves it arrived, and a real reply window stops people sending it twice.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fff; border: 1px solid #e5e7eb }
blockquote { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #9ca3af; background: #f9fafb; color: #374151 }
</style>
<div class="ty"><h2>Message sent</h2><p>We answer within one working day, usually sooner.</p>
<blockquote>Do you deliver to Westbrook on Saturdays?</blockquote><a href="#">Read delivery questions and answers</a></div>A reference number and a named person make a quote request feel handled rather than lost in a queue.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fffbeb; border: 1px solid #fde68a }
.ref { font: 600 15px ui-monospace, monospace }
</style>
<div class="ty"><h2>Quote request received</h2><p>Reference <span class="ref">Q-3391</span>. Tom will visit or call within two days to measure up.</p>
<p>Have photos of the roof? Reply to the confirmation email and attach them.</p></div>Browsers sometimes block automatic downloads, so a visible link and the file size cover the case where nothing appeared.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fff; border: 1px solid #e5e7eb }
.file { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: #f3f4f6; margin-bottom: 12px }
</style>
<div class="ty"><h2>Your checklist is downloading</h2><div class="file"><span>launch-checklist.pdf</span><span>320 KB</span></div>
<p>Did not start? <a href="#">Download it directly</a>. Next, try the matching guide on writing your homepage.</p></div>Saying what the gift does and confirming the receipt beats a generic thanks. The monthly option is offered once, gently.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #ecfeff; border: 1px solid #a5f3fc; text-align: center }
.amt { font-size: 32px; font-weight: 700; margin: 4px 0 }
.btn { background: #0e7490; color: #fff }
</style>
<div class="ty"><h2>Thank you for your gift</h2><div class="amt">$40</div><p>That covers a week of meals for one shelter guest. Your receipt went to [email protected].</p>
<a class="btn" href="#">Make it monthly</a></div>A ticket shaped block holds the details people look for on the day: date, doors and their name.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #fff; border: 2px dashed #6366f1 }
.t { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 14px; margin-bottom: 12px }
.btn { background: #4f46e5; color: #fff }
</style>
<div class="ty"><h2>You're registered</h2><div class="t"><span>Riverside Makers Fair</span><strong>Sat 25 Oct</strong><span>Name on the list: Dee Mills</span><span>Doors 10am</span></div>
<a class="btn" href="#">Add to calendar</a></div>A waitlist is the one place a share prompt fits, because inviting friends gives the visitor something they want.
<style>
.ty { max-width: 460px; margin: 0 auto; padding: 22px; border-radius: 14px; font-family: system-ui, sans-serif }
.ty h2 { margin: 0 0 6px; font-size: 22px }
.ty p { margin: 0 0 12px; color: #374151 }
.ty .btn { display: inline-block; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 600 }
.ty { background: #111827; color: #f9fafb }
.ty p { color: #d1d5db }
.link { display: flex; gap: 6px }
.link input { flex: 1; min-width: 0; padding: 8px; border-radius: 6px; border: 0 }
.btn { background: #f59e0b; color: #111827; border: 0 }
</style>
<div class="ty"><h2>You're number 412 on the waitlist</h2><p>Each friend who joins with your link moves you up 10 places.</p>
<div class="link"><input aria-label="Your invite link" value="https://example.com/r/k9f2" readonly><button class="btn">Copy</button></div></div>A form submission or checkout is the one time you know exactly what someone wanted. The page that follows can calm doubts, prevent support emails and start the next relationship step, or it can be a dead end that just says thanks.
Write the page as the answer to the visitor's next question. After paying, that is when the parcel arrives. After booking, it is where to go and how to reschedule. After a download, it is whether the file actually saved.
Give the page a clear heading such as Order confirmed rather than a lone icon, and avoid relying on colour alone for success. If you show the confirmation inline instead of on a new page, place it in an element with role="status" so screen readers announce it politely without moving focus.
Three things: a confirmation of exactly what happened, what the visitor should expect next and when, and one clear action to take now. Everything else is optional.
Usually not. Add <meta name="robots" content="noindex"> to the head. Google notes that if robots.txt blocks the page, its crawler never sees the noindex rule, so do not block the same page in robots.txt as well.
A separate page has its own address, which makes conversion tracking simple and gives you room for a next step. An inline message keeps people in place, which suits small forms like a comment box. Both should confirm what happened in words.
The order number in large type, a short summary of items and total, the delivery or pickup estimate, the email address the receipt went to, and a single link to track the order or manage it.
Yes, if the offer clearly relates to what they just did and it does not push the confirmation details down. A matching accessory or a referral reward is far more welcome than a generic sale banner.
Related: 404 page examples, Contact us page examples, Empty state examples, How to add a contact form, Sitemap and robots examples.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.