Open In App

How to Create an Email Newsletter ?

Last Updated : 05 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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="">
 
        <!-- Title and the content -->
        <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>
 
        <!-- Fill up form for the user -->
        <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>
 
        <!-- Button to subscribe -->
        <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




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;
}


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="">
 
        <!-- Title and the content -->
        <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>
 
        <!-- Fill up form for the user -->
        <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>
 
        <!-- Button to subscribe -->
        <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


Similar Reads

Create a Newsletter Sourcing Data using MongoDB
There are many news delivery websites available like ndtv.com. In this article, let us see the very useful and interesting feature of how to get the data from ndtv.com via scraping feature i.e. extracting the contents from ndtv.com and storing them into MongoDB. MongoDB is a NoSQL Documentum model database. Using Mongoose, Node JS, and Cheerio, the
7 min read
Create Newsletter app using MailChimp and NodeJS
Nowadays, every business uses email marketing to promote their business and send regular updates to their users via email. Maybe, you are also subscribers of some websites such as GeeksforGeeks and many more. It's simple if you subscribe, you will get regular email from their side, and if you unsubscribe, you will stop receiving emails. Have you th
6 min read
How to check if an email address exists without sending an email ?
In this article, we will learn to check if an address exists without sending an email. Approach: By using some free APIs we can easily check whether an email is valid or not. One of the easiest way to check whether an email address is valid is to use PHP's filter_var() function. Example 1:The following method can only check if the format is a valid
3 min read
How To Create a Temporary Email Address?
A temporary email is a random temporary address that does not require any registration process. It is also known as disposable and throwaway email. and It is used for various purposes such as website testing, signup in untrusted websites, advertisement, etc. If you are using a temporary email then you are safe to avoid leaking your information and
4 min read
How to create a text that permit to send email in HTML document when button is clicked ?
In this article, we will learn How to create the text that permits sending the email in the HTML document when the button is clicked. We can simply create a form that can be used for creating the text i.e body of the message as well as it can be used for sending the email to the respective address. The action property of the form is used to specify
2 min read
How to Create a Link to Send Email in HTML ?
Incorporating email links into HTML pages facilitates a smooth way for users to send a message directly from the webpage. We will see how to create these email links, making your web pages user-friendly and interactive. Table of Content Using Mailto Protocol with Predefined SubjectCreating Link to send Email with predefined CC and BCC Using Mailto
2 min read
How to implement Email Registration and Login using Firebase in React?
When building a full-stack application we sometimes want to do build the authentication part quickly without writing much code, then there comes Firebase to our rescue which offers multiple authentication methods like Email-Password, Google, Facebook, etc. Following are the steps which cover how to authenticate users through email id and password i
3 min read
How to extract the user name from the email ID using PHP ?
Given a string email address, extract the username. Input: ‘priyank@geeks.com’ Output: priyank Input: ‘princepriyank@gfg.com’ Output: princepriyank Approach 1: Using PHP strstr() to extract the username from the email address. In this, “@” symbol is the separator for the domain name and user name of the email address. The strstr() PHP function is u
2 min read
PHP | Send Attachment With Email
Sending an email is a very common activity in a web browser. For example, sending an email when a new user joins a network, sending a newsletter, sending greeting mail, or sending an invoice. We can use the built-in mail() function to send an email programmatically. This function needs three required arguments that hold the information about the re
7 min read
7 Steps for Mastering the Intro Email to a Prospective Employer
Emailing a prospective employer is a tricky task irrespective of the career stage you are at. You might be a seasoned and experienced executive or a fresher just starting out, the content in your introductory email to the potential employer is something that can make or break your prospects to be hired. First impressions matter a lot and the intro
5 min read
Article Tags :