Newsletter: inline signup form

What you receive in Webflow

• 16 native elements and 10 classes.
• Breakpoints: mobile landscape (767px).
• States: focus, hover.
• The form pastes as a native Webflow form, with a success message and an error message.
• 1 Embed element keeps the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="nl">
  <div class="nl-inner">
    <div class="nl-copy">
      <h2 class="nl-title">The Sunday letter</h2>
      <p class="nl-text">One short email a week with the best ideas we found on design, product and building online. No fluff.</p>
    </div>
    <form class="nl-form" name="newsletter">
      <input class="nl-input" type="email" name="email" placeholder="you@company.com" required>
      <button class="nl-btn" type="submit">Subscribe</button>
      <p class="nl-note">Join 18,000 readers. Unsubscribe in one click.</p>
    </form>
  </div>
</section>
<style>
.nl { font-family: Georgia, 'Times New Roman', serif; background: #fef3c7; color: #422006; padding: 88px 24px; }
.nl-inner { max-width: 1040px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.nl-copy { max-width: 460px; }
.nl-title { font-size: 44px; line-height: 1.1; font-weight: 400; font-style: italic; margin: 0 0 14px; }
.nl-text { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 17px; line-height: 1.6; color: #713f12; margin: 0; }
.nl-form { flex: 1; max-width: 460px; display: flex; flex-wrap: wrap; gap: 10px; }
.nl-input { flex: 1 1 240px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; color: #422006; background: #fffbeb; border: 2px solid #422006; border-radius: 999px; padding: 15px 22px; outline: none; }
.nl-input:focus { background: #ffffff; border-color: #b45309; }
.nl-input::placeholder { color: #a16207; }
.nl-btn { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; font-weight: 700; color: #fef3c7; background: #422006; border: 2px solid #422006; border-radius: 999px; padding: 15px 26px; cursor: pointer; transition: background-color 0.2s ease; }
.nl-btn:hover { background: #b45309; border-color: #b45309; }
.nl-note { width: 100%; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; color: #92400e; margin: 4px 0 0 22px; }
@media (max-width: 767px) { .nl-inner { flex-direction: column; align-items: stretch; gap: 28px; } .nl-title { font-size: 34px; } .nl-btn { width: 100%; } }
</style>