Newsletter signup band
A single-field email signup row with a heading, a note line and a submit button.
When to use it
Included with a warning attached, because a signup band is the clearest example of something that cannot fully convert. The layout, heading and note all come across; the form itself does not, and pretending otherwise would waste your afternoon. Use this to get the section styled and positioned, then swap the form for an Elementor Form widget connected to your actual mailing list. That is ten minutes of work and it is the only route that produces a form that really submits.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 1 — the band
- Container × 1 — the inner wrapper
- Heading × 1
- Text Editor × 1 — the note line
- HTML widget × 1 — the form, kept whole but not functional
Things worth knowing
- The form arrives as an HTML widget and its submit action is removed during cleanup. It will not send anything anywhere until you replace it with an Elementor Form widget pointed at a real destination.
- Replace the form first, then restyle. Doing it the other way round means styling a block you are about to delete.
- Keep the note line. Telling people how often you email and that they can unsubscribe raises signups more reliably than a bigger button.
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>Newsletter signup band</title>
<style>
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#14233a}
.band{background:#14233a;color:#fff;padding:64px 24px;text-align:center}
.inner{max-width:620px;margin:0 auto}
h2{font-size:32px;letter-spacing:-.03em;margin:0 0 12px}
.note{margin:18px 0 0;color:#9fb1c8;font-size:13px;line-height:1.7}
form{display:flex;gap:10px;margin-top:8px}
input{flex:1;padding:14px 16px;border:1px solid #33455e;border-radius:9px;background:#1c2f49;color:#fff;font-size:15px}
button{padding:14px 24px;border:0;border-radius:9px;background:#ff5b35;color:#fff;font-weight:800;font-size:15px;cursor:pointer}
@media(max-width:560px){.band{padding:46px 20px}h2{font-size:25px}form{display:block}button{width:100%;margin-top:10px}}
</style>
</head>
<body>
<section class="band">
<div class="inner">
<h2>Get the occasional build note</h2>
<form action="#" method="post">
<input type="email" name="email" placeholder="[email protected]" aria-label="Email address" required>
<button type="submit">Subscribe</button>
</form>
<p class="note">About one email a month. Unsubscribe in one click.</p>
</div>
</section>
</body>
</html>