How to Create an Email Newsletter ?
Last Updated :
05 Jul, 2023
To create an Email Newsletter you need to use HTML and CSS. HTML will make the structure of the newsletter body and CSS will make its style looks good. Email newsletters are used to inform the reader or enthusiast geeks who are keenly interested in your content. If the user subscribed the newsletter then that user will get notification information about the daily update. This stuff is helpful to keep updated the users. They will be received updated information or newly published content through emails.
Creating Structure: In this section, we will create a basic form structure for the email newsletter.
- HTML code: It is used to design the structure of the newsletter form.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Email Newsletter</ title >
</ head >
< body >
< form action = "" >
< h1 >GeeksforGeeks</ h1 >
< p >
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to provide
well written, well thought and well explained
solutions for selected questions. Subscribe us to
get daily tech update.
</ p >
< div class = "container" >
< input type = "text" placeholder = "Name"
name = "name" required>
< input type = "text" placeholder = "E-mail"
name = "email" required>
< img src =
< br >< br >
< label >
< input type = "checkbox" checked = "checked"
name = "check" >
Daily newsletter
</ label >
</ div >
< div class = "btn" >
< button type = "submit" placeholder = "Subscribe"
value = "Subscribe" >
Subscribe
</ button >
< p id = test > </ p >
</ div >
</ form >
</ body >
</ html >
|
Designing Structure: In the previous section, we have created the structure of the basic form. In this section, we will design the structure for the email newsletter using CSS style.
CSS code: This CSS code is used with HTML code structure to make an email newsletter form.
CSS
h 1 {
color : green ;
}
.container {
padding : 24px ;
border : 2px solid #ccc ;
}
.container img {
border-radius: 50% ;
width : 50px ;
float : right ;
margin : 5px ;
}
input[type=text] {
width : 100% ;
padding : 12px ;
margin : 12px 0 ;
border : 1px solid #ccc ;
box-sizing: border-box;
}
input[type=checkbox] {
float : left ;
}
.btn button {
background-color : #0E9D57 ;
opacity: 0.8 ;
color : white ;
font-size : 12px ;
width : 100% ;
padding : 12px ;
margin : 12px 0 ;
border : none ;
border-radius: 5px ;
font-weight : bold ;
}
.btn button:hover {
opacity: 1 ;
}
|
Combining the HTML and CSS code: This example combines the above two sections (HTML and CSS code) to make an Email newsletter.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Email Newsletter</ title >
< style >
h1 {
color: green;
}
/* Container padding & border */
.container {
padding: 24px;
border: 2px solid #ccc;
}
/* Container image styling */
.container img {
border-radius: 50%;
width: 50px;
float: right;
margin: 5px;
}
/* input filed type text styling */
input[type=text] {
width: 100%;
padding: 12px;
margin: 12px 0;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* input filed type checkbox floating */
input[type=checkbox] {
float: left;
}
/* button styling */
.btn button {
background-color: #0E9D57;
opacity: 0.8;
color: white;
font-size: 12px;
width: 100%;
padding: 12px;
margin: 12px 0;
border: none;
border-radius: 5px;
font-weight: bold;
}
/* hover affect on button */
.btn button:hover {
opacity: 1;
}
</ style >
</ head >
< body >
< form action = "" >
< h1 >GeeksforGeeks</ h1 >
< p >
How many times were you frustrated while looking
out for a good collection of programming/algorithm
/interview questions? What did you expect and what
did you get? This portal has been created to
provide well written, well thought and well
explained solutions for selected questions.
Subscribe us to get daily tech update.
</ p >
< div class = "container" >
< input type = "text" placeholder = "Name"
name = "name" required>
< input type = "text" placeholder = "E-mail"
name = "email" required>
< img src =
< br >< br >
< label >
< input type = "checkbox" checked = "checked"
name = "check" >
Daily newsletter
</ label >
</ div >
< div class = "btn" >
< button type = "submit" placeholder = "Subscribe"
value = "Subscribe" >
Subscribe
</ button >
< p id = test > </ p >
</ div >
</ form >
</ body >
</ html >
|
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- OperaEmailSafari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...