Learn how to create an email newsletter with CSS.
Subscribe to the Newsletter
Lorem ipsum text about why you should subscribe to the newsletter blabla. Lorem ipsum text about why you should subscribe to the newsletter blabla. Lorem ipsum text about why you should subscribe to the newsletter blabla.
Daily Newsletter
How To Create a Newsletter
Step 1) Add HTML
Use a <form> element to process the input. You can learn more about this in the PHP tutorial. Then add inputs for each field, together with a "submit" button:
Example
html
<form action="action_page.php">
<div class="container">
<h2>Subscribe to the Newsletter</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked"
name="subscribe"> Daily Newsletter
</label>
</div>
<div class="container">
<input type="submit"
value="Subscribe">
</div>
</form>
Step 2) Add CSS:
Example
css
/* Style the form element with a border
around it */
form {
border: 4px solid #f1f1f1;
}
/* Add some padding and a grey background color to containers */
.container {
padding: 20px;
background-color: #f1f1f1;
}
/* Style the input elements and the
submit button */
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Add margins to the checkbox */
input[type=checkbox] {
margin-top: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
Tip: Go to the HTML Form Tutorial to learn more about HTML Forms.
Tip: Go to the CSS Form Tutorial to learn more about how to style form elements.