Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create an email newsletter with CSS?
Creating an email newsletter subscription form with CSS involves styling form elements to create an attractive and user-friendly interface. This form typically includes input fields for name and email, a checkbox for subscription preferences, and a submit button.
Syntax
form {
/* Container styling */
border: value;
padding: value;
background-color: value;
max-width: value;
}
input[type=text], input[type=email] {
/* Input field styling */
width: value;
padding: value;
border: value;
}
Basic Form Structure
First, create a form with the necessary input fields for name, email, and subscription options −
<form>
<h2>Subscribe to our Newsletter</h2>
<p>Get the latest updates in technology and web development</p>
<input type="text" placeholder="Name" name="name" required>
<input type="email" placeholder="Email address" name="email" required>
<label>
<input type="checkbox" name="subscribe" checked> Daily Newsletter
</label>
<input type="submit" value="Subscribe">
</form>
Styling the Form Container
Style the form with a border, background color, and centered layout −
form {
border: 3px solid #f1f1f1;
padding: 30px;
background-color: #f9f9f9;
max-width: 600px;
margin: 20px auto;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
Input Field Styling
Style the text and email input fields for better appearance and usability −
input[type=text], input[type=email] {
width: 100%;
padding: 15px;
margin: 10px 0;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
input[type=text]:focus, input[type=email]:focus {
border-color: #4CAF50;
outline: none;
}
Submit Button Styling
Create an attractive submit button with hover effects −
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 15px;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}
input[type=submit]:hover {
background-color: #45a049;
}
Complete Example
Here's a complete email newsletter form with modern CSS styling −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
}
.newsletter-container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 30px 20px;
}
.header h2 {
margin: 0 0 10px 0;
font-size: 28px;
}
form {
padding: 40px;
border: none;
}
input[type=text], input[type=email] {
width: 100%;
padding: 15px;
margin: 15px 0;
border: 2px solid #e1e5e9;
border-radius: 8px;
font-size: 16px;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=text]:focus, input[type=email]:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
.checkbox-container {
margin: 20px 0;
display: flex;
align-items: center;
}
input[type=checkbox] {
margin-right: 10px;
transform: scale(1.2);
}
label {
font-size: 16px;
color: #555;
}
input[type=submit] {
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 18px;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: transform 0.3s ease;
margin-top: 10px;
}
input[type=submit]:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
</style>
</head>
<body>
<div class="newsletter-container">
<div class="header">
<h2>Join Our Newsletter</h2>
<p>Stay updated with the latest tech news and tutorials</p>
</div>
<form>
<input type="text" placeholder="Your Name" name="name" required>
<input type="email" placeholder="Your Email Address" name="email" required>
<div class="checkbox-container">
<input type="checkbox" name="subscribe" id="daily" checked>
<label for="daily">Send me daily updates</label>
</div>
<input type="submit" value="Subscribe Now">
</form>
</div>
</body>
</html>
A modern newsletter subscription form appears with a gradient purple header, clean white form section, styled input fields with focus effects, a checkbox for daily updates, and an attractive submit button with hover animations.
Conclusion
Creating an email newsletter form with CSS involves styling form elements, input fields, and buttons to create an engaging user interface. Use modern CSS techniques like gradients, transitions, and box shadows to enhance the visual appeal and user experience.
Updated on: 2026-03-15T14:37:45+05:30
305 Views
Advertisements