Forms & HTML

How to build an HTML newsletter signup form (Step by Step)

A beginner-friendly guide to creating an inline email subscription form in HTML and CSS.

April 19, 2026 · 5 min read · MyFormConnect

Growing an email list is crucial for any blog or business. Instead of a massive multi-field form, a newsletter signup form is usually just one input field (the email address) and a submit button placed side-by-side.

In this guide, we'll build a compact, inline newsletter signup form using basic HTML and Flexbox CSS.

What we will build

Here is the inline newsletter form we are going to create. It's perfect for placing at the bottom of articles or in the footer of your website.

Step 1: The HTML

Because the form is so simple, the HTML is very compact. Notice how we use a hidden label (using a screen-reader-only class) for accessibility.

<form class="newsletter-form" action="YOUR_ENDPOINT_URL" method="POST">
  <h3>Join our newsletter</h3>
  <p>Get weekly updates in your inbox.</p>
  
  <div class="input-group">
    <label for="email" class="sr-only">Email Address</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>
    <button type="submit">Subscribe</button>
  </div>
</form>

The Final Ready-to-Run Code

To get the input field and button to sit perfectly side-by-side, we use CSS Flexbox (display: flex) on the .input-group. Save the code below as newsletter.html and open it in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Newsletter Form</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background-color: #f3f4f6;
      display: flex;
      justify-content: center;
      padding: 40px 20px;
    }
    .newsletter-form {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 500px;
    }
    .newsletter-form h3 {
      margin: 0 0 8px 0;
    }
    .newsletter-form p {
      color: #6b7280;
      margin: 0 0 20px 0;
    }
    .input-group {
      display: flex;
      gap: 10px;
    }
    .input-group input {
      flex: 1; /* Makes the input take up remaining space */
      padding: 12px 15px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      font-size: 16px;
    }
    .input-group button {
      padding: 12px 20px;
      background-color: #111827;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
    }
    .input-group button:hover {
      background-color: #374151;
    }
    /* Hide label visually but keep for screen readers */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
    }
  </style>
</head>
<body>

  <form class="newsletter-form" action="https://myformconnect.io/submit/YOUR_FORM_ID" method="POST">
    <h3>Subscribe to our newsletter</h3>
    <p>Get the latest updates directly in your inbox.</p>
    
    <div class="input-group">
      <label for="email" class="sr-only">Email Address</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" required>
      <button type="submit">Subscribe</button>
    </div>
  </form>

</body>
</html>

Where does the email go?

By connecting this form to an endpoint service like MyFormConnect, you can automatically capture the email addresses. Through webhooks or Zapier integrations, you can even have the emails sent automatically to Mailchimp, ConvertKit, or your favorite email marketing tool.