Subscribe form using HTML and CSS

If you're looking to add a subscription form to your website, you've come to the right place! In this blog post, I'll guide you through the process of creating a simple yet stylish subscription form using HTML and CSS.

Output:

HTML Structure:

  <main>
    <div class="subscribe-card">
      <h2>Stay up to date!</h2>
      <p>
  
          Subscribe to our weekly newsletter for <br />
  
        the latest news and tips.
      </p>
  
      <form class="form-email">
  
          <input type="email" aria-label="Email to subscribe" placeholder="email@example.com" class="input-email" required>          <p role="alert" class="error-message">*Please enter a valid email address!</p>
          <button type="submit" class="send-button">
  
          Subscribe now
        </button>
      </form>
    </div>
  </main>

Code Explanation:

<main>: This tag is used as the main content container. It holds the entire subscription form and helps with layout management.

<div class="subscribe-card">: This div wraps the form elements, creating a card-like layout for the subscription form. The card is centered and styled for a clean and modern appearance.

<h2>: The heading inside the card provides the main call to action, encouraging users to subscribe.

<p>: The paragraph offers additional context, explaining what users will receive by subscribing (e.g., weekly newsletter, latest news, and tips).

<form>: The form element contains the input field and the submit button, where users enter their email and click to subscribe.

<input type="email">: This input field is where users enter their email address. The type="email" attribute ensures that the input expects an email format, improving form validation.

<p role="alert" class="error-message">: This paragraph is initially hidden and only displayed when the user enters an invalid email address. The role="alert" attribute makes it accessible, ensuring screen readers announce the error.

<button type="submit">: The button allows users to submit the form. Once clicked, the form sends the entered email to the server for processing (if connected to a backend).

Click Here to download full code:

Download Now

If you like this content: Buy me a coffee