Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create an Email Newsletter with CSS
A form that includes the details to subscribe to an email newsletter, includes the name and email-address input fields. With that, a checkbox to subscribe for the daily newsletter can also be created for the users. Also, a button to subscribe to the newsletter can also be seen. We will see here how to design an email newsletter form with HTML and CSS.
Create a form and set the input fields
A form is created using the <form>. The name, email address, and checkbox fields are set in the form. Also, the submit button is also set inside the form −
<form>
<h2>Subscribe to our Newsletter</h2>
<p>Subscribe to our Newsletter to get latest update in the world of technology and web</p>
<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>
<input type="submit" value="Subscribe">
</form>
Style the form like this. The maximum width is set using the max-width property −
form {
border: 3px solid #f1f1f1;
padding: 20px;
background-color: #f3f3f3;
max-width: 800px;
margin:auto;
}
Style the input fields
The input field text and button are styled like this. The width is set to 100% and the display property as inline-block −
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
Checkbox
The checkbox for the daily newsletter feature is created using the input type checkbox −
<label> <input type="checkbox" checked="checked" name="subscribe"> Daily Newsletter </label>
Example
The following is the code to create an email newsletter with CSS −
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;font-size: 20px;font-weight: bold;}
h1{
text-align: center;
}
form {
border: 3px solid #f1f1f1;
padding: 20px;
background-color: #f3f3f3;
max-width: 800px;
margin:auto;
}
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
font-size: 30px;
}
input[type=checkbox] {
margin-top: 16px;
}
input[type=submit] {
background-color: rgb(236, 255, 61);
color: rgb(0, 0, 0);
border: none;
font-size: 25px;
font-weight: bolder;
}
input[type=submit]:hover {
background-color: rgb(255, 238, 0);
}
</style>
<body>
<h1>Email Newsletter Example</h1>
<form>
<h2>Subscribe to our Newsletter</h2>
<p>Subscribe to our Newsletter to get latest update in the world of technology and web</p>
<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>
<input type="submit" value="Subscribe">
</form>
</body>
</html>
185 Views
