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:
{getButton} $text={Download Now} $icon={download}
If you like this content: Buy me a coffee
