How to Create an Email Newsletter ?

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. The 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 the 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 newsletter form.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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;
        }
           
        /* inout 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>

    chevron_right

    
    

Combining the HTML and CSS code: This example combines the above two sections (HTML and CSS code) to make an Email newsletter.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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;
        }
          
        /* inout 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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.