Create Stylish Newsletter Subscription Box | HTML/CSS Tutorial

By Faraz - February 20, 2024

Step-by-step tutorial on creating a visually appealing newsletter subscription box with HTML and CSS. Increase subscriber count and enhance user engagement effortlessly.

Join us on Telegram

Read Also create a stunning flower shop landing page with html and css.jpg

Create a Stunning Flower Shop Landing Page with HTML and CSS (Source code)

A newsletter subscription box is a vital component of any website or online platform aimed at engaging with its audience and building a loyal subscriber base. It serves as the gateway for users to opt-in to receive regular updates, news, promotions, and valuable content directly to their email inboxes.

Whether you're a blogger, business owner, or content creator, incorporating a newsletter subscription box into your website is a powerful way to connect with your audience on a deeper level. It enables you to stay top-of-mind, establish credibility, and foster long-term relationships with your subscribers.

In the following sections, we'll delve into the intricacies of designing and implementing an effective newsletter subscription box using HTML and CSS. From structuring the form to styling it to match your brand's aesthetic, we'll provide you with the tools and techniques you need to create a compelling signup experience that encourages users to join your mailing list.

Source Code

Step 1 (HTML Code):

To create a newsletter subscription box, start by structuring it with HTML. Use <form> tags to define the form and input fields such as <input> for email address and <button> for submission. Here's a breakdown of each part:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which in this case is HTML5.

2. <html lang="en">: This tag defines the root element of the HTML document and specifies the language of the content, which is English in this case.

3. <head>: This section contains meta-information about the HTML document, such as character encoding, viewport settings, and the title of the page.

<meta charset="UTF-8">: This meta tag specifies the character encoding for the document, ensuring proper rendering of text.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag ensures the rendering mode of Internet Explorer to be the latest available.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport to the width of the device's screen and sets the initial zoom level to 1.0, ensuring proper scaling on mobile devices.
<title>Newsletter</title>: This tag sets the title of the webpage, which appears in the browser's title bar or tab.

4. <body>: This section contains the visible content of the webpage.

5. <div class="container">: This div element serves as a container for the content of the webpage.

<div class="details">: This div contains details about the newsletter.
<h1 class="title">Join my newsletter</h1>: This heading element displays the title of the newsletter.
<p class="desc">You like articles of the blog? Sign up for updates via email.</p>: This paragraph element provides a description or instruction for subscribing to the newsletter.

6. <form>: This form element contains input fields for subscribing to the newsletter.

<input type="text" class="email" placeholder="Email">: This input field allows users to enter their email address for subscription. The class="email" attribute assigns a class name to the input field for styling or scripting purposes, and the placeholder="Email" attribute provides a hint to users about the expected content.
<button>Subscribe</button>: This button triggers the subscription process when clicked by the user.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Newsletter Form</title>
</head>
<body>
    <div class="container">
      <div class="details">
      <h1 class="title">Join my newsletter</h1>
    <p class="desc">You like articles of the blog? Sign up for updates via email.</p>
    </div>
  <form>
    <input type="text" class="email" placeholder="Email">
    <button>Subscribe</button>
  </form>
    </div>
</body>
</html>

Read Also

How to Make a Calendar Widget using HTML, CSS, and JavaScript

Step 2 (CSS Code):

After creating the form structure, style it using CSS to make it visually appealing. Apply CSS to customize the appearance. Here's an explanation of each part:

1. body: Styles applied to the entire body of the webpage.

display: grid;: Sets the display property of the body to a grid layout.
place-items: center;: Centers the content both horizontally and vertically within the grid.
height: 100vh;: Sets the height of the body to 100% of the viewport height, ensuring that the content fills the entire screen.
color: #fff;: Sets the text color to white.
background: #212529;: Sets the background color to a dark shade of gray.

2. .container: Styles applied to the container element.

font-size: 16px;: Sets the font size to 16 pixels.
border: 1px solid #ffffffbf;: Sets a border around the container with a semi-transparent white color.
border-radius: 5px;: Rounds the corners of the container.
max-width: 600px;: Sets the maximum width of the container to 600 pixels.
padding: 20px;: Adds 20 pixels of padding around the content inside the container.
resize: horizontal;: Allows the container to be resized horizontally.
overflow: auto;: Enables scrolling if the content overflows the container.

3. form: Styles applied to the form element.

display: flex;: Sets the display property of the form to flex layout.
align-items: center;: Centers the items vertically within the flex container.
flex-wrap: wrap;: Allows the items within the flex container to wrap onto multiple lines if needed.
gap: 10px;: Sets a 10-pixel gap between the items within the flex container.

4. input: Styles applied to the input fields.

padding: 10px 14px;: Adds padding inside the input fields.
outline: none;: Removes the default outline around the input fields.
color: #e2e2e2;: Sets the text color inside the input fields to a light gray.
background: #dedede29;: Sets the background color of the input fields to a semi-transparent light gray.
border: 1px solid #ffffff8f;: Sets a border around the input fields with a semi-transparent white color.
border-radius: 4px;: Rounds the corners of the input fields.

5. .details: Styles applied to the details container.

flex: 1 0 130px;: Specifies the flex properties for the container, allowing it to grow, shrink, and have an initial width of 130 pixels.
font-family: sans-serif;: Sets the font family to a sans-serif typeface.
display: flex;: Sets the display property to flex layout.
flex-direction: column;: Arranges the items in a column layout.
text-align: center;: Centers the text horizontally within the container.

6. .title: Styles applied to the title heading.

font-size: 1.6rem;: Sets the font size to 1.6 times the default font size, making it larger.

7. .desc: Styles applied to the description paragraph.

color: gray;: Sets the text color to gray.

body{
  display: grid;
  place-items: center;
  height: 100vh;
  color: #fff;
  background: #212529;
}
.container{
  font-size: 16px;
  border: 1px solid #ffffffbf;
  border-radius: 5px;
  max-width: 600px;
  padding: 20px;
  resize: horizontal;
  overflow: auto;
}
form{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
input{
  padding: 10px 14px;
  outline: none;
  color: #e2e2e2;
  background: #dedede29;
  border: 1px solid #ffffff8f;
  border-radius: 4px;
}

.details{
  flex: 1 0 130px;
}
.email{
  flex: 1 0 130px;
}
button{
  flex: 1 0 40px;
  background: #0d6efd;
  padding: 10px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #e2e2e2;
  outline: none;
  border: 1px solid transparent;
}
.details{
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: 3px;
}
.title {
  font-size: 1.6rem;
}
.desc {
  color: gray;
}

Final Output:

Read Also

Create a Button with Hover Effects Using HTML and CSS

Conclusion:

In conclusion, implementing a newsletter subscription box on your website is a valuable strategy for engaging with your audience, driving conversions, and fostering long-term relationships. Throughout this guide, we've explored the importance of a well-designed subscription form and provided step-by-step instructions on how to create and style it using HTML and CSS.

By following the best practices outlined in this guide, you can create a visually appealing and user-friendly subscription box that encourages visitors to join your mailing list. Remember to regularly test and optimize your form to ensure maximum effectiveness and to stay responsive to your audience's needs and preferences.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: newsletter subscription, html, css, email marketing, user engagement, source code, how to create a newsletter signup form using html and css, designing a newsletter subscription box with html and css, increasing subscriber count with newsletter forms

End of the article