Website kits
Mobile app thank-you page
App thank-you page for after a sign-up form: confirmation, three next steps, both store buttons, a share-by-email prompt and a link back home.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page a visitor reaches after submitting the email-me-the-link form, and the page to measure the campaign by. Because it is only reached after a real sign-up, its URL is the cleanest conversion signal you have: make it the form’s redirect target and count a view of it as the conversion in your ad account or analytics. The headline says exactly what was sent and where to look for it, and both store buttons follow for visitors already holding their phone. Three next-step cards set expectations for the first ten minutes in the app, which reduces the drop-off between installing and actually planning a week. The share band asks for one easy action while interest is high, and a final button leads back to the home page for anyone who wants the full tour. Keep this page out of search results and out of every menu, so the only way to reach it is the form; stray visits would inflate your conversion count.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 17
- Container (grid, 3 columns) × 1
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 10
- Button × 5
- Icon × 1
- Heading × 4
- Icon Box × 3
- Image × 1
Things worth knowing
- This is the page to point the landing page form’s Redirect action at, and the URL to use as the conversion in your ad account or analytics. It contains no form itself.
- The green check at the top converts to a standalone Icon widget in a stacked circle frame, and the three next-step cards to Icon Box widgets with arrow, check and star icons.
- Share by email is a Button widget whose mailto: link carries a prefilled subject and message; edit the encoded text in the link field. The two store buttons link to # as placeholders and need your real store URLs.
- Set the page to Elementor Canvas, and mark it noindex in your SEO plugin so it is only reached through the form. Below 780px the next-step cards and the share band stack, with the photo above the text.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Check your inbox — Simmerly</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#2a1736;background:#ffffff}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Outfit',Helvetica,Arial,sans-serif;color:#2a1736;font-weight:700}
h1{font-size:54px;line-height:1.06;letter-spacing:-.03em;margin:0 0 18px}
h2{font-size:38px;line-height:1.12;letter-spacing:-.02em;margin:0 0 14px}
h3{font-size:21px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#6d5f75;margin:0 0 18px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2e8b57;margin:0 0 14px}
.top{background:#fff3d6}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{margin:0;font-family:'Outfit',Helvetica,Arial,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#2a1736}
.logo a{color:#2a1736;text-decoration:none}
.back-top{display:inline-block;padding:9px 18px;border-radius:12px;border:2px solid #2a1736;color:#2a1736;text-decoration:none;font-weight:800;font-size:15px}
.done{background:#fff3d6;padding:56px 0 80px;text-align:center}
.done .inner{max-width:700px;margin:0 auto}
.badge{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:#2e8b57;color:#ffffff;font-size:34px;margin:0 0 24px}
.done .lead{font-size:19px}
.stores{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 0 14px}
.store{display:inline-block;padding:16px 24px;border-radius:14px;background:#2a1736;color:#ffffff;text-decoration:none;font-weight:800;font-size:16px}
.store-alt{display:inline-block;padding:14px 22px;border-radius:14px;border:2px solid #2a1736;color:#2a1736;text-decoration:none;font-weight:800;font-size:16px}
.fine{font-size:14px;margin:0}
.head{max-width:660px;margin:0 auto 40px;text-align:center}
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:#fff3d6;border-radius:24px;padding:30px}
.card-icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:#2a1736;color:#ff6b35;font-size:22px;margin:0 0 18px}
.card p{font-size:16px;margin:0}
.share{background:#2a1736}
.share .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.share h2{color:#ffffff}
.share p{color:#fff3d6}
.share-img{width:100%;height:440px;object-fit:cover;border-radius:32px;display:block;background:#fff3d6}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 18px}
.mail{display:inline-block;padding:15px 24px;border-radius:14px;background:#ff6b35;color:#2a1736;text-decoration:none;font-weight:800;font-size:15px}
.invite{font-size:15px;margin:0}
.invite strong{color:#ffffff}
.home{text-align:center}
.home p{max-width:540px;margin:0 auto 24px}
.back{display:inline-block;padding:14px 26px;border-radius:14px;border:2px solid #2a1736;color:#2a1736;text-decoration:none;font-weight:800;font-size:15px}
.legal{background:#2a1736;padding:24px 0}
.legal .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal p{margin:0;font-size:14px;color:#fff3d6}
.legal a{color:#fff3d6}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.top .wrap{padding-top:14px;padding-bottom:14px}
.logo{font-size:22px}
.back-top{padding:7px 14px;font-size:14px}
.done{padding:36px 0 56px}
.next,.share .wrap{grid-template-columns:minmax(0,1fr);gap:24px}
h1{font-size:36px}
h2{font-size:29px}
.done .lead{font-size:17px}
.share-img{height:300px}
.legal .wrap{flex-direction:column;gap:6px}
}
</style>
</head>
<body>
<header class="top">
<div class="wrap">
<p class="logo"><a href="/">Simmerly</a></p>
<a class="back-top" href="/">Back to home</a>
</div>
</header>
<section class="done">
<div class="wrap">
<div class="inner">
<span class="badge">✓</span>
<h1>Check your inbox — your download link is on its way</h1>
<p class="lead">We sent one email with both store links to the address you entered. It usually arrives within two minutes; if it does not, look in your spam or promotions folder.</p>
<div class="stores">
<a class="store" href="#">Download on iPhone</a>
<a class="store-alt" href="#">Get it on Android</a>
</div>
<p class="fine">Already holding your phone? Skip the email and use the buttons above.</p>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">What happens next</p>
<h2>Your first week in three moves</h2>
</div>
<div class="next">
<div class="card"><span class="card-icon">→</span><h3>Open the email on your phone</h3><p>Tap the link for your phone’s store. It opens the Simmerly page directly, so there is nothing to search for.</p></div>
<div class="card"><span class="card-icon">✓</span><h3>Set up your household</h3><p>Answer four quick questions about diet, allergies, how many you cook for and how much time you have on weeknights.</p></div>
<div class="card"><span class="card-icon">★</span><h3>Plan your first week</h3><p>Review seven suggested dinners, swap any you do not like, and your grocery list is ready to take to the store.</p></div>
</div>
</div>
</section>
<section class="share">
<div class="wrap">
<img class="share-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/app/sofa-phone.jpg" width="1200" height="1200" alt="Young man relaxing on a sofa and smiling at his phone, the screen turned away from the camera">
<div>
<p class="eyebrow">Share Simmerly</p>
<h2>Cooking for two? Bring the other cook</h2>
<p>Planning works best when everyone who shops can see the list. Send this to your partner, flatmate or the friend who always asks what to make for dinner.</p>
<div class="actions">
<a class="mail" href="mailto:?subject=Try%20Simmerly&body=I%20plan%20our%20dinners%20with%20Simmerly%3A%20https%3A%2F%2Fsimmerly.example.com%2F">Share by email</a>
</div>
<p class="invite">Or send them this link: <strong>simmerly.example.com</strong></p>
</div>
</div>
</section>
<section class="home">
<div class="wrap">
<h2>Want to look around first?</h2>
<p>The home page has the full feature tour, the plans and answers to common questions.</p>
<a class="back" href="/">Back to the Simmerly home page</a>
</div>
</section>
<footer class="legal">
<div class="wrap">
<p>© 2026 Simmerly Labs, Inc. · 48 Quillon Lane, Brookhaven</p>
<p><a href="/privacy/">Privacy policy</a> · <a href="/terms/">Terms of use</a> · <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</footer>
</body>
</html>
