I got a couple of questions about adding media to the HTML email template.

Building on that foundation, I'll guide you through different ways of adding media to your HTML email template. Adding media such as images, videos, and audio can significantly increase the engagement and effectiveness of your communications.

Requirements

• A simple HTML email template. You can create one following this guide.

How to Add Images to Your Email Template

Images are the most common type of media added to emails. Here's how to include them in your HTML email templates:

• Before adding an image, ensure it is properly sized and optimized for web use. A common practice is to keep the image width under 600 pixels to fit most email clients without scaling. For this particular example we have a stock image and resized it to 600 x 750 pixels as shown below.

this is the image we shall be uploading

• Upload your image to a reliable web server or content delivery network (CDN). You'll need a stable URL to reference in your email.

For this example we'll use the imgbb website and upload our image. Click on "Start Uploading" and choose the image.

imgbb is one of the free image hosting platforms

After choosing the image to use, select "Don't Autodelete" and click on Upload.

Choose Don't Autodelete from the dropdown

After uploading, a URL will be generated. Click on the dropdown and choose "HTML full linked"

The embed code generated

• Copy the HTML code generated and insert it within a desired section in your email template as shown.

<a href="https://ibb.co/XpRp2N8">
    <img src="https://i.ibb.co/q9Q9yX5/600x750.jpg" alt="600x750" border="0"></a>

Feel free to try out other embed code options to test how your image will appear in the email template.

Below is the outcome of the inserted image:

image successfully inserted to our email template

Note: Always include the alt attribute to provide alternative text for scenarios where the image cannot be displayed.

How to Embed Videos in Your Email Template

Direct video playback is not supported in most email clients. Instead, you can embed a clickable thumbnail that links to a video hosted online:

• Create a Thumbnail: Capture a frame from your video or create a custom graphic that represents the video content. This will act as a placeholder. In this example, we'll use the same image as the thumbnail.

• From the dropdown, choose HTML thumbnail linked. Copy the code and paste it to your email template.

<a href="https://ibb.co/XpRp2N8"><img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"></a>

• Link to the Video: Modify the above code to use the thumbnail as a clickable image linked to the video URL.
• Change the URL in the <a href =""> to the video link as shown below.

<a href="https://youtu.be/UG8rjxYBfFg?si=xU2zqCtQW5-2z7nw">
    <img src="https://i.ibb.co/XpRp2N8/600x750.jpg" alt="600x750" border="0"</a>

This HTML snippet creates a linked image without a border. And this is how it will appear in our email Template:

linked thumbnail will appear like this

How to Embed YouTube Videos in Your Email Template

Alternatively you can directly embed a YouTube video to your email template. Here is how:

• Go to YouTube and choose the video you would like to embed.
• Click on share -> embed and an iframe will be generated. Below is an example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/UG8rjxYBfFg?si=nYBBM032nvBn5tNZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

• Copy the iframe and paste it to a <td> section of your HTML email template code. And you will have something looking like this:

this is an example of a youtube video within an email template

How to Add Audio to Your Email Template

Adding audio files directly to emails is also not supported by most email clients. Similar to videos, you can include a link to the audio file:

• Host the Audio File: Upload your audio file to a suitable platform or server. There are a number of audio platforms out there, like Google Drive, your own website, YouTube, sound cloud, and so on.
• For this example, we'll use a platform called audio.com. Simply create an account by clicking "join now for free" or sign in if you already have an account.

Click upload and choose your .mp3 file which will be stored in your account. Once the audio is complete, click on the share icon.

• This will bring you to a couple of options where you can copy the link or simply embed the link:

Click on embed, and you will see a preview of how your audio will appear. Copy the code and paste it to your email template section.

code generated by audio.com which can be embedded in the email template

You can also eliminate the div and just use the iframe . Also feel free to remove parts you would not want to appear in the email template and customize it to your preference.

Here is the code:

<div style="height: 228px; width: 600px;">
<iframe src="https://audio.com/embed/audio/1797114509131910?theme=image"
                            style="display:block; border-radius: 6px; border: none; height: 204px; width: 600px;"></iframe><a href='https://audio.com/nyayic-fanny' style="text-align: center; display: block; color: #A4ABB6; font-size: 12px; font-family: sans-serif; line-height: 16px; margin-top: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">@nyayic-fanny</a>
</div>

This is our final outcome for the above:

our audio will appear like this in our email template

Using audio tag

Besides embedding, we can use the audio tag and just add the URL to our audio source as shown below:

 <p>Audio added via audio tag</p> <br><br>
   <audio controls="controls">
   <source src="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">
      <p>? Listen: <a href="https://audio.com/nyayic-fanny/audio/past-life-jvna.mp3">Audio</a> (mp3)</p>
       </audio>

Just change the URL to your audio url . And this is how our entire modification should look.

our modified html email template

Note: Hotmail and clients that don’t support HTML5 will not work!

Best Practices for Media in HTML Emails

When integrating media into HTML emails, consider the following tips to optimize compatibility and user experience:

• Always use full, absolute URLs for images, videos, and audio to ensure they load correctly in all email clients.
• Test Your Emails: Different email clients display HTML content in various ways. Use tools like Litmus or Email on Acid to test how your email renders across different platforms.
• Keep Load Times in Mind: Optimize media file sizes to ensure that your emails load quickly, which is crucial for retaining the recipient's attention and improving engagement.
• Consider Accessibility: Provide descriptive alt text for images and captions or transcripts for audio and video content.

While there are limitations to what email clients can support, using linked images for videos and audio files provides a user-friendly solution that works across most platforms.

Always ensure you test your emails thoroughly and follow best practices to ensure a smooth and engaging user experience.

Happy Coding!

This project is perfect for newcomers eager to master email design basics!

Step 1: Set Up the Basic Structure

To build an email template, you can start with a basic HTML structure. This includes a DOCTYPE declaration for emails, defining the head and body sections, and using meta tags in the head section to ensure proper mobile rendering and zooming.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Email Template</title>
</head>
<body>
    <!-- Email content goes here -->
</body>
</html>

Step 2: Create the Email Structure

Use tables to create the basic structure of your email. This will ensure compatibility across different email clients.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="center">
            <table width="600" cellpadding="0" cellspacing="0" border="0">
                <!-- Email content goes here -->
            </table>
        </td>
    </tr>
</table>

Step 3: Add Content and Inline Styles

Email clients vary in how they render CSS, so it's safer to use inline styles. Here's an example of a simple email body:

<body style="font-family: 'Poppins', Arial, sans-serif">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" style="padding: 20px;">
                <table class="content" width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: 1px solid #cccccc;">
                    <!-- Header -->
                    <tr>
                        <td class="header" style="background-color: #345C72; padding: 40px; text-align: center; color: white; font-size: 24px;">
                        Responsive Email Template
                        </td>
                    </tr>

                    <!-- Body -->
                    <tr>
                        <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
                        Hello, All! <br>
                        Lorem odio soluta quae dolores sapiente voluptatibus recusandae aliquam fugit ipsam.
                        <br><br>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit. Incidunt, officia facilis  atque? Ipsam voluptas fugiat distinctio blanditiis veritatis.            
                        </td>
                    </tr>

                    <!-- Call to action Button -->
                    <tr>
                        <td style="padding: 0px 40px 0px 40px; text-align: center;">
                            <!-- CTA Button -->
                            <table cellspacing="0" cellpadding="0" style="margin: auto;">
                                <tr>
                                    <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
                                        <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td class="body" style="padding: 40px; text-align: left; font-size: 16px; line-height: 1.6;">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam corporis sint eum nemo animi velit exercitationem impedit.             
                        </td>
                    </tr>
                    <!-- Footer -->
                    <tr>
                        <td class="footer" style="background-color: #333333; padding: 40px; text-align: center; color: white; font-size: 14px;">
                        Copyright &copy; 2024 | Your brand name
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

Here's a breakdown of the main elements and their functions:

Body Tag and Font Setup

<body style="font-family: 'Poppins', Arial, sans-serif">

This sets the default font for the email to 'Poppins', with fallbacks to Arial and sans-serif if 'Poppins' isn't available.

Table Structure

<table width="100%" border="0" cellspacing="0" cellpadding="0">

This is the outermost table that takes up 100% of the email's width. The border, cellspacing, and cellpadding are set to 0 to remove default styling and spacing.

Nested inside this table is another <table class="content"> with a fixed width of 600px, centered by its parent with td align="center".

This inner table includes a border and specific styling, defining it as the main content area.

The Header Section

The header is styled with a dark blue background using inline CSS (#345C72), white text color, and larger text size (24px). It’s designed to grab attention right at the beginning of the email.

Note: You can customize this section with your brand name or logo instead.

The Body Content

The body section contains the main message of the email, set in a font size of 16px and line height of 1.6 for better readability. The content is aligned to the left, and the use of <br> tags helps in spacing out the lines.

Call to Action (CTA) Button

<!-- Call to action Button -->
                    <tr>
                        <td style="padding: 0px 40px 0px 40px; text-align: center;">
                            <!-- CTA Button -->
                            <table cellspacing="0" cellpadding="0" style="margin: auto;">
                                <tr>
                                    <td align="center" style="background-color: #345C72; padding: 10px 20px; border-radius: 5px;">
                                        <a href="https://www.yourwebsite.com" target="_blank" style="color: #ffffff; text-decoration: none; font-weight: bold;">Book a Free Consulatation</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>

The CTA button here is designed to stand out with a background color that matches the header, rounded corners (border-radius: 5px), and bold, white text.

The <a> tag within the button is styled to remove the default underline (text-decoration: none) and is linked to a webpage where recipients can "Book a Free Consultation."

Footer

The footer repeats the styling approach of the header but uses a darker background (#333333) and smaller font size (14px). It can contain copyright information and links or other contact details.

Illustration

illustration of the different parts of the template: header, CTA button, and footer

Step 4: Make It Responsive

To ensure the email looks good on mobile devices, you can use CSS media queries. While most of the styling are inline, for responsive behavior, you'll need to add a <style> block in the head.

Media queries adjust styles based on the device's width.

<style>
  @media screen and (max-width: 600px) {
    .content {
        width: 100% !important;
        display: block !important;
        padding: 10px !important;
    }
    .header, .body, .footer {
        padding: 20px !important;
    }
  }
</style>

Here’s a breakdown of this specific CSS snippet:

@media screen and (max-width: 600px) { ... }

This media query targets screens with a maximum width of 600 pixels. It applies the following styles only when the email is viewed on devices with a screen width of 600px or less, which typically includes smartphones and some smaller tablets.

Styles within the media query classes:

.content

• width_: 100% !important;_ : This style changes the width of the .content table to use the full width of the screen instead of the 600px specified in the HTML. The !important rule is used to override any other conflicting styles.
• display: block !important;: Although <table> elements are naturally block-level elements, setting display: block explicitly can help in some email clients to ensure the element behaves as expected.
• padding: 10px !important;: Adds padding around the content within the .content table, reducing it from the original 40px in the HTML to make better use of the reduced screen space on smaller devices.

.header, .body, .footer

• padding: 20px !important;: This style uniformly sets the padding of the header, body, and footer sections to 20px on all sides, optimizing the spacing for smaller screens. It overrides the various padding settings defined in the HTML, which include larger values in some cases.

In the context of email design, the use of !important is fairly common to ensure that the styles are applied as intended, overriding both default styles and other potentially conflicting styles that might be applied by the email client itself.

Step 5: Test Across Email Clients

It's crucial to test your email template across different email clients (like Gmail, Outlook, and Apple Mail) and devices to ensure compatibility and responsiveness. Tools like Litmus or Email on Acid can help with this.

Step 6: Adding Google Font

Incorporating Google Fonts into an HTML email template can improve its visual appeal significantly.

However, it's important to note that not all email clients support web fonts. Some, like Apple Mail, do support Google Fonts, but others like Gmail do not. To ensure your email looks great to all recipients, always provide a fallback font.

Here's how you can add a Google Font to your email template, along with a fallback option for clients that don't support it:

Choose Your Google Font

First, visit the Google Fonts website and choose a font. For this example, let's use "Poppins".

Add the Font Link to Your Email Head

Include the link to the Google Font in the <head> of your HTML document. Since this might not be supported in all email clients, ensure you have a suitable fallback font in your styles.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

Apply the Font in Your Styles

Use inline CSS to apply the Google Font to your HTML elements, and always include a generic fallback font. In email templates, it's safer to apply styles inline due to varying support for <style> tags across email clients.

Here's how to apply the font to the body of your email and include a fallback:

<body style="font-family: 'Poppins', Arial, sans-serif;">
    <table width="100%" cellspacing="0" cellpadding="0">
        <!-- Email content -->
    </table>
</body>

What We Created

Below is a screenshot of the email template we designed. It features a professional layout with a header containing a logo placeholder, a main body section for your message, and a dark footer with contact and subscription management links.

screenshot of the email template

Additional Tips:

• Keep your CSS inline as much as possible, because many email clients do not support <style> tags.
• Use web-safe fonts to ensure that your text appears correctly in all email clients.
• Always provide a plain text version of your email for clients that don't support HTML, or have HTML disabled.

I hope this guide provides you with a basic framework for creating a responsive email template. As you become more comfortable with email design, you can experiment with more complex layouts and styles.

Happy Coding!

But do you know you can do it for free? There is actually a way to do it, and besides the fact that having the professional email account is free, it will help you be more efficient, reliable and secure in your daily work.

In this article, you'll learn how to create and set up your own email address using Cloudflare and Mailgun to manage emails in Gmail. This means that you can send and receive emails directly in your Gmail inbox.

I've done this already for personal use and have taken screenshots of the entire process that you'll see in this article. So I'll share all the necessary steps you need to follow to set up your own email.

Let's figure out what you need to have before you start, what you are going to do, and how it will work.

What you need to have before you start

I assume that you already have a domain, let's call it "yourdomain.com". Specifically, you need to have accessibility to connect your domain with Cloudflare and setup DNS records there. A classic example of that is having a domain on some domain registrar (like GoDaddy, Namecheap), and adding your domain to Cloudflare by setting DNS records provided by Cloudflare on your domain registrar account.

Adding a domain to Cloudflare involves updating your domain's DNS nameservers to point to Cloudflare's nameservers. Once the domain is added, Cloudflare acts as an intermediary for web traffic, providing security features like DDoS protection, firewall, and SSL encryption, as well as performance enhancements through caching and content optimization.

If you haven't done that yet, here's the official video on YouTube on how to connect your domain to Cloudflare.

Additionally, Cloudflare manages DNS records for your domain, allowing you to control how traffic is routed and ensuring reliable delivery of services like email.
So, our work in this article will be focusing exactly on that: how to setup your domain on Cloudflare Email.

Cloudflare Email has been one of the services of Cloudflare since 2021, which can be used for free (as of now, at least).

The second assumption is that you have Gmail account, and you have access to its email settings. Simply, if you just have a regular "youremail@gmail.com" email, which isn't under the control of any administrator, then you have nothing to worry about. We'll explore and work on email settings later on.

What you are going to do

In simple words, you're going to create a custom email like "something@yourdomain.com", which you can use to send and receive emails using Gmail's platform. So you will be receiving and reading emails sent to "something@yourdomain.com" in Gmail, as well as sending emails from that custom email using Gmail.

You'll use Cloudflare Email for the email routing, and Mailgun's SMTP server for sending emails.

How it will work

When composing an email from Gmail with the sender set as "something@yourdomain.com", Gmail utilizes Mailgun's SMTP server through the provided credentials, transmitting the email. Mailgun then processes the message and forwards it to the recipient's email server, likely involving DNS lookups to find the recipient's server.

Emails sent to "something@yourdomain.com" are received by Cloudflare's email servers, configured via MX records in the domain's DNS settings. Cloudflare stores the received emails in the associated account, accessible through Gmail, which periodically connects to Cloudflare's servers (using IMAP or POP3 protocols) to retrieve new messages, enabling seamless access to incoming emails.

Email Routing on Cloudflare

Cloudflare Email Routing is designed to simplify the way you create and manage email addresses, without needing to keep an eye on additional mailboxes. With Email Routing, you can create any number of custom email addresses to use in situations where you do not want to share your primary email address, such as when you subscribe to a new service or newsletter. Emails are then routed to your preferred email inbox, without you ever having to expose your primary email address. (Cloudflare Docs)

Sign in to your Cloudflare account and navigate to the Dashboard.
Choose and click on the desired website. For me it's "boolfalse.com", as I want to create a custom email like "email@boolfalse.com".

Cloudflare: Websites

Navigate to Email Routing for the selected website.

Cloudflare: Email Routing

If you don't have email routing configured, you may see something similar to the screenshot above. Click "Get started". You may be able to create your own address to receive emails and take action.

We'll skip this without creating our own address because we'll do it manually.

Cloudflare: Custom Email

By default, email routing is disabled, so you need to enable it. Click the link to navigate to the Email Routing page.

Cloudflare: Email Routing

Submit it by clicking "Enable Email Routing".

Cloudflare: Enable Email Routing

You need to have three MX and one TXT records:

• Type: MX; Name: @; Mail Server: route1.mx.cloudflare.net; TTL: Auto; Priority: 69
• Type: MX; Name: @; Mail Server: route2.mx.cloudflare.net; TTL: Auto; Priority: 99
• Type: MX; Name: @; Mail Server: route3.mx.cloudflare.net; TTL: Auto; Priority: 40
• Type: TXT; Name: @; TTL: Auto; Content: _v=spf1 include:spf.mx.cloudflare.net ~all

You can see them at the bottom of the Email Routing page.

Cloudflare: DNS records for Email Routing

So, as already said, in the left menu, go to "DNS" -> "Records" and add the following records there.

Cloudflare: DNS records added

After creating these records, go to the Email Routing page again.

Here, you only need to have the records you just created. So if you have any other records, just delete them.

For example, I already had an unnecessary entry there that I should delete.

Cloudflare: existing records for Email Routing

Submit to delete existing unnecessary records.

Cloudflare: deleting unnecessary records

After removing unnecessary DNS records, you will see only the ones you need there.

You will now be able to enable email routing by clicking the "Add records and enable" button.

Cloudflare: Enable Email Routing

After enabling it you should see something like this:

Cloudflare: Email DNS records configured

How to Create a Custom Email on Cloudflare

Now go to the Routes tab and create an email by clicking the "Create address" button.

Cloudflare: Email Routing (enabled)

In this example, we'll create "email@boolfalse.com" email address, by adding "email" as a custom address, and a destination email address, where I'll be able to receive emails.

Cloudflare: Email Routing

You should see a notification about that.

Cloudflare: creating a custom email

You should also get an email for confirming this action.

Verifying the destination email

Go on and verify the email address.

Verify email address

Once you've verified the email address, you may get this page:

Cloudflare: custom email address is verified

You will probably get an email that you've verified your domain with Mailgun:

Notification about custom email address verification

How to Receive Emails in the Custom Email

Now, your email address is activated, and you can see that here:

Cloudflare: custom email address is active

At this point you can send emails to the custom email you just set up. In this case, it's "email@boolfalse.com".

Below is a test email sent from a different email.

Testing email receiving

You'll receive a test email to the custom email.

Test email has been received

Mailgun: Adding New Domain

You can now successfully receive emails, but you can't send emails from that custom email yet.

So, it's time to switch to the mail service provider. In our case, it will be Mailgun.
To do this, you just need to register and attach the card to your Mailgun account. After activating your account with the card attached, you can set up a domain for your email.

You don't have to worry about the card, because Mailgun does not charge for limited quantities. I think the amount it gives is quite suitable for a free package.
You can find the price packages in detail here.

Go to Sending -> Domains page, and click the "Add New Domain" button.

In our case it will be "mg.boolfalse.com", as Mailgun recommends that to be able to send emails from your root domain, that is: "email@boolfalse.com".

You should see that recommendation on the right in below image:

Mailgun: create a new domain

You can also select the domain region and DCIM key length, but you can leave everything as default.
I will leave DCIM key length as 1024 and "US" as a domain region.

After creating the domain, you may be shown some tips on how to verify your domain.

Mailgun: adding a new domain

Mailgun will give you two TXT records, two MX records and one CNAME record to add to your provider.

• Type: TXT; Name: _mailto._domainkey.mg.boolfalse.com_; TTL: Auto; Content:
• Type: TXT; Name: mg.boolfalse.com; TTL: Auto; Content: v=spf1 include:mailgun.org ~all
• Type: MX; Name: mg.boolfalse.com; Mail Server: mxa.mailgun.org; TTL: Auto; Priority: 10
• Type: MX; Name mg.boolfalse.com; Mail Server: mxb.mailgun.org; TTL: Auto; Priority: 10
• Type: CNAME; Name: email; Target: mailgun.org; TTL: Auto; Proxy Status: On

In our case, we will add them to Cloudflare.

Below is the first TXT record:

Mailgun: first TXT record for a new domain

Below is the second TXT record:

Mailgun: second TXT record for a new domain

Below is the first MX record:

Mailgun: first MX record for a new domain

Below is the second MX record:

Mailgun: second MX record for a new domain

After you've added two TXT and two MX records, you can check and verify them by clicking the "Verify DNS Records" button.

Mailgun: checking TXT and MX records for a new domain

Lastly, add CNAME record.

Mailgun: adding CNAME record for a new domain

You may see a warning icon on the left of the CNAME record. You don't need to worry about that. Here's what official documentation says about it:

If you recently added your domain to Cloudflare - meaning that your zone is in a pending state - you can often ignore this warning.
Once most domains becomes Active, Cloudflare will automatically issue a Universal SSL certificate, which will provide SSL/TLS coverage and remove the warning message.

After adding a CNAME record, you can check and verify it again by clicking the second "Verify DNS Records" button.

Mailgun: checking CNAME record for a new domain

If you have added all 5 records on the Cloudflare successfully, after clicking the verifying button, Mailgun will automatically redirect you to the Overview page.

Mailgun: 2 TXT, 2 MX and 1 CNAME records added for a new domain

It means you're ready to add a Sending API key on Mailgun.

Mailgun: Sending API key & SMPT User

Go to Sending -> Domain Settings page. Choose the Sending API keys tab at the top. You probably won't see any API keys there. You just need to create a new Sending API key.

Click "Add sending key" from the top right corner, and in the pop-up, fill the name of the key you're about to create.

Mailgun: creating a Sending API key

After pressing "Create sending key", you'll get the secret API key that you need to copy and save somewhere safe. After saving the key, you can just close the pop-up.

You should see the created key listed:

Mailgun: Sending API key created

You also need to create a new SMTP user in the Mailgun dashbaord.
Go to Sending -> Domain Settings page. Choose the SMTP credentials tab at the top and click the "Add new SMTP user" button on the top left corner. It will open up a pop-up.

Type user credentials there. In our case I'll create a user with the name "email". It will be like a login for your email on Gmail.

Mailgun: creating SMTP user

Once you create an SMTP user in Mailgun, you'll see it listed and a password for that user will be generated automatically. To get this password, copy it by clicking the "Copy" button in the pop-up notification in the lower right corner.

Mailgun: SMTP user created

Keep this in a safe place for future use. You will need this login and password to authenticate on Gmail.

You are now ready to set up email configurations with your email provider. In our case, we will do this in Gmail.

Open your Gmail account in your desktop browser and go to Settings by clicking the settings icon in the top right corner and click the "See all settings" button.

Mailgun: new domain is verified

Gmail Authentication with Mailgun SMTP Server

In the Gmail settings page choose the Accounts and Import tab and click on the "Add another email address" from the "Send mail as" section:

Gmail: Settings

It will open a pop-up for the authentication. Use the login and the password you just got by creating an SMTP user on Mailgun. Make sure to fill out the credentials correctly.

Gmail: authenticate a new user using a created SMTP server on Mailgun

Submit the form by clicking the "Add Account" button. It'll probably ask you to save the username/password in your browser. It's up to you.

And the last important thing here: it'll ask you to verify adding an account.

Gmail: authentication confirmation for a new user

For the verification, the confirmation email will be sent to your primary email.

Gmail: authentication verification email

You can either use the confirmation code to verify it using the pop-up window or simply follow the link provided in the confirmation email.

In this case, we'll click on a link which will open the page, where you'll be asked to confirm. Click on "Confirm" and simply close the previously opened pop-up window without worrying.

Gmail: verifying the authentication

Now you're ready to send and receive emails from the custom email you just created.

For sending an email from the custom email, you just need to choose that email as a sender email:

Gmail: sending emails

That's it!

An additional thing that may be useful to you is that you can set the custom email address you just created as the default address for sending emails from Gmail.

You can set this on the settings page in the "Send mail as" section:

Gmail: Settings (default sender)

I hope this guide will be a good resource for setting up your custom email.

Conclusion

In this article, you learned how to set up your own email to manage emails in Gmail using Cloudflare Email and Mailgun.

In conclusion, it is worth noting that the choice of tools is not mandatory, other tools can be used instead, but the basic idea and logic will be similar.

You can check out my website at: boolfalse.com

Feel free to share this article. 😇

While learning Nestjs, I wanted to be able to send test emails with Nodemailer but I had difficulty doing this in the context of a NestJS application. I searched the internet for a solution and after much research, I found one. It turned out to be really simple.

In this article, I will share my solution so you can use it in your NestJS projects.

Table of Contents

• How to Set Up a NestJS Project
• How to Configure Nodemailer in Your App
• How to Send emails with Nodemailer
• Conclusion

How to Set Up a NestJS Project

Ideally, when a user clicks on a forget password route, a link should be sent to the user's email, and through that link, the user should be able to reset their password. This article will demonstrate a test case scenario of how this works using Nodemailer.

Open your favorite IDE or navigate to the terminal and paste the following command:

$ npm i -g @nestjs/cli
$ nest new nodemailer-app

The above commands generates a new project called nodemailer-app.

After doing this, navigate to your project folder and install the Nodemailer packages, npm i --save @nestjs-modules/mailer nodemailer and types, npm i --save-dev @types/nodemailer.

How to Configure Nodemailer in Your App

Before moving on, make sure you have an account on mailtrap.io. If you do, just login and navigate to Email Testing. Create your own inbox if you don't have one. Navigate to the inbox and you should see your credentials which will be used to configure Nodemailer in your application.

In your project directory, go to the app module file and configure the package:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { AuthModule } from './auth/auth.module';
import { MailerModule } from '@nestjs-modules/mailer';

@Module({
  imports: [
    AuthModule,
    MailerModule.forRoot({
      transport: {
        host: process.env.EMAIL_HOST,
        auth: {
          user: process.env.EMAIL_USERNAME,
          pass: process.env.EMAIL_PASSWORD,
        },
      },
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

In the above code, you imported the MailerModule from @nestjs-modules/mailer. Then you called a forRoot() method on it. Inside the forRoot() method, you specified a transport property which contains the host and auth properties.

Do not forget to get the host, port, username and password from your credentials in your inbox on mailtrap.io.

You can create a .env file which would house all your credential details. It is advisable to do so. To be able to load the appropriate .env file in NestJS, install this:

$ npm i --save @nestjs/config

Then in your app.module.ts file, import a ConfigModule:

import { ConfigModule } from '@nestjs/config';

Still in your app.module.ts

// include the config module in your imports array

@Module({
  imports: [
    ConfigModule.forRoot({ envFilePath: '.env', isGlobal: true }),
  ],
  controllers: [AppController],
  providers: [AppService],
})

How to Send Emails with NodeMailer

After configuring Nodemailer, it is time to send emails with it.

In your app.service.ts file, paste the following code:

import { MailerService } from '@nestjs-modules/mailer';
import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  constructor(private readonly mailService: MailerService) {}

  sendMail() {
    const message = `Forgot your password? If you didn't forget your password, please ignore this email!`;

    this.mailService.sendMail({
      from: 'Kingsley Okure <kingsleyokgeorge@gmail.com>',
      to: 'joanna@gmail.com',
      subject: `How to Send Emails with Nodemailer`,
      text: message,
    });
  }
}

In the app.service.ts file, the MailerService is injected and then used in the class to send the email. Inside the class, the MailerService has a sendMail function which takes in an object as a parameter. The object contains a from, to, subject and text property.

Once you have done this, in the app.controller.ts file, paste the following code:

import { Controller, Get, Res } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  sendMailer(@Res() response: any) {
    const mail = this.appService.sendMail();

    return response.status(200).json({
      message: 'success',
      mail,
    });
  }
}

All that is done in the controller is to create a Get request which will call the sendMail function you have created in the service.

Ideally, in a real world application, all this will be done in a forgot password function. And an email will be sent to the user once they click on a forgot password route.

To test this little setup, open your Postman and go to localhost:3000 and hit send.

Then go to your mailtrap.io inbox and see your message.

Conclusion

In this article, you have learned how to send emails with Nodemailer, a software designed to help developers send emails to multiple people at once.

You have also learned how to configure and set it up in the context of a NestJs application.

If you want to connect with me, you can follow me on Twitter or on Linkedin

Email-based authentication is one of the most popular and widely used methods for user registration and login. But it's not always reliable, as users can enter fake or invalid email addresses during registration. This can lead to security risks and fraud. This is where Email Validation Services come in handy.

In this tutorial, you'll use the Email Validation Service to help you automate your email validation process during user registration by validating contact information.

The API checks the syntax, domain, and mailbox of an email address, and can even detect disposable and risky emails.

By integrating this API with your application, you can ensure that only valid and genuine email addresses are used for user registration, which will enhance the security of your application.

Prerequisites

Before you get started with the tutorial, make sure you have satisfied the following requirements:

• Working knowledge of Python
• Python 3.8+ installed on your system
• Basic knowledge of Flask, Flask Blueprints and Requests.

How to Set Up the Virtual Environment

Before you start coding, you'll need to make sure you have all the necessary tools and libraries installed. To ensure that you have a clean and isolated environment, you'll create a virtual environment using venv.

Create a project directory and navigate to it in the terminal:

mkdir email-validation
cd email-validation

Create a virtual environment named env using the following command:

python -m venv env

Python now ships with pre-installed venv library to create virtual environments.

Activate the virtual environment like this:

source env/bin/activate

Note: If you're on Windows, you'll need to use source env/Scripts/activate to activate the environment.

You should see (env) in your terminal prompt, indicating that the virtual environment has been activated.

How Email Validation Service Works

Email validation is an essential process for any web application that requires user authentication, and there are various ways to perform it.

One way is to use an email validation service such as emailvalidation.io. This API allows developers to validate email addresses by checking whether they are syntactically correct, whether the domain exists, and whether the mailbox can receive messages.

The API offers a range of pricing plans to suit different needs. The free plan allows developers to validate up to 100 emails, which should be sufficient for our testing purposes. The paid plans start at $9.99 per month and offer more requests, more features, and faster response times.

In this section, you'll write a Python function that sends a GET request to the API's endpoint and passes the email address to be validated as a parameter.

To authenticate the API request, you will also need to pass the API key with the request. Before proceeding, you must create an account on emailvalidation.io to obtain an API key. Once you've created your account, you will be redirected to a dashboard, similar to the one shown below. The API key is located in the black highlighted area.

To make a GET request, you'll need to install the requests library in your virtual environment:

pip install requests

Next, create a test.py file and add the following code there:

import requests
from requests.structures import CaseInsensitiveDict


def is_valid(email: str):
    url = f"https://api.emailvalidation.io/v1/info?email={email}"

    headers = CaseInsensitiveDict()
    headers["apikey"] = "your-api-key-here"

    response = requests.get(url, headers=headers)

    return response.json()


print(is_valid("support@emailvalidation.io"))
print(is_valid("venip42579@jdsdhak.com"))

The is_valid function takes an email address as an argument and constructs a URL with the email address to call the emailvalidation.io API. The CaseInsensitiveDict class from the requests.structures module is used to create a dictionary with case-insensitive keys to set the API key in the header of the request. You then return the JSON response from the function.

Finally, you call the is_valid function twice with different email addresses to demonstrate how the function can validate both a valid email address (support@emailvalidation.io) and an invalid email address (venip42579@jdsdhak.com).

Output:

{
   "email":"support@emailvalidation.io",
   "user":"support",
   "tag":"",
   "domain":"emailvalidation.io",
   "smtp_check":true,
   "mx_found":true,
   "did_you_mean":"",
   "role":true,
   "disposable":false,
   "score":0.64,
   "state":"deliverable",
   "reason":"valid_mailbox",
   "free":false,
   "format_valid":true,
   "catch_all":"None"
}
{
   "email":"venip42579@jdsdhak.com",
   "user":"venip42579",
   "tag":"",
   "domain":"jdsdhak.com",
   "smtp_check":false,
   "mx_found":false,
   "did_you_mean":"",
   "role":false,
   "disposable":false,
   "score":0.64,
   "state":"undeliverable",
   "reason":"invalid_mx",
   "free":false,
   "format_valid":true,
   "catch_all":"None"
}

You can learn about the different keys in the response here. To determine if an email address is valid or invalid based on the JSON response from emailvalidation.io, you should check the following fields:

1. format_valid: If true, the email address is properly formatted. If false, the email address is not valid.
2. mx_found: If true, at least one MX record was found for the domain. If false, the domain is not valid.
3. smtp_check: If true, the email address has a valid mailbox. If false, the mailbox is not valid.
4. state: The current state of the email address. The values can be "deliverable" or "undeliverable".

Thus, you can modify the is_valid function to return a Boolean response instead of a JSON object as below:

import requests
from requests.structures import CaseInsensitiveDict


def is_valid(email: str):
    url = f"https://api.emailvalidation.io/v1/info?email={email}"

    headers = CaseInsensitiveDict()
    headers["apikey"] = "nUH1hmV24lEwX1TIXmsgRPRRZw0L0NuOeHrdMp78"

    response = requests.get(url, headers=headers)
    if response.status_code == 200:
        json_resp = response.json()
        format_valid = json_resp["format_valid"]
        mx_found = json_resp["mx_found"]
        smtp_check = json_resp["smtp_check"]
        state = json_resp["state"]

        return format_valid and mx_found and smtp_check and state == "deliverable"

    return False


print(is_valid("support@emailvalidation.io"))
print(is_valid("venip42579@jdsdhak.com"))

Output:

True
False

In the upcoming section, you'll use this function to validate emails during user registration.

How to Set Up Basic User Authentication in Flask

In this section, you will go through the steps to set up basic user authentication in Flask. You will be using the code from one of my previous articles where I had explained how to implement basic user authentication.

You can start by pulling the code from the GitHub repository to the email-validation folder:

git init
git remote add origin https://github.com/ashutoshkrris/Flask-User-Authentication.git
git pull origin main

Note: The command git clone [https://github.com/ashutoshkrris/Flask-User-Authentication.git](https://github.com/ashutoshkrris/Flask-User-Authentication.git) . won't run in this case because your directory is not empty.

Next, you'll see a requirements.txt file that contains the dependencies to run the the application in your system. Install the dependencies using the command:

pip install -r requirements.txt

Once all the dependencies are installed, you'll need to add the environment variables required for the project. The project contains a .env file which has all the environment variables. Run the following command to export all the environment variables from the .env file:

source .env

Next, you have to create the database. Since the project uses Flask-Migrate, creating the database is a fairly simple task using the following commands:

python manage.py db init
python manage.py db migrate
python manage.py db upgrade

Now, you can run the application using the command:

python manage.py run

The application will start running and you can go to http://localhost:5000/login in your web browser to see the application.

Here's a demo video that shows the application:

Inside your project flask-validation, you'll have a src folder containing your source code and a tests folder containing the unit tests.

In addition to these, you'll also have a config.py file that contains the configuration settings for your application and a manage.py file that uses Flask-CLI to add different commands for running and testing your application. You'll also find other files such as .env and requirements.txt which you already know about.

The src folder contains four subfolders – accounts, core, templates, and static. The templates and static folders contain the HTML files and static files such as CSS, images, and JavaScript files, respectively. The other two folders, accounts and core, use the concept of Flask Blueprints and contain the respective codes for different parts of the application.

If you want to learn more about the implementation of your Flask application, you can refer to this tutorial.

How to Integrate the Email Validation Service in Your Flask App

Up until this point, it is possible to successfully register in the application using any email address, regardless of whether it is valid or not.

But it's not desirable to have random or incorrect email addresses cluttering up your database. So it's a good idea to validate the email address before registering the user. If the email address is valid, you can proceed with registering the user successfully.

Add your Email Validation API Key in the .env file to so that you can read it without exposing to the public:

export SECRET_KEY=fdkjshfhjsdfdskfdsfdcbsjdkfdsdf
export DEBUG=True
export APP_SETTINGS=config.DevelopmentConfig
export DATABASE_URL=sqlite:///db.sqlite
export FLASK_APP=src
export FLASK_DEBUG=1
export API_KEY=your-api-key-here

Replace the your-api-key-here with your correct API key. Next, you'll again need to run the following command to export the environment variables:

source .env

Now, create a utils.py file inside the accounts subfolder in the src folder. The file will contain the utility function to validate the email. Add the following code in the file:

import requests
from requests.structures import CaseInsensitiveDict
from decouple import config


def is_valid(email: str):
    url = f"https://api.emailvalidation.io/v1/info?email={email}"

    headers = CaseInsensitiveDict()
    headers["apikey"] = config("API_KEY")

    response = requests.get(url, headers=headers)
    if response.status_code == 200:
        json_resp = response.json()
        format_valid = json_resp["format_valid"]
        mx_found = json_resp["mx_found"]
        smtp_check = json_resp["smtp_check"]
        state = json_resp["state"]

        return format_valid and mx_found and smtp_check and state == "deliverable"

    return False

As previously mentioned, the is_valid() function returns a Boolean value indicating whether an email address is valid or not. It's important to note that the function doesn't hardcode the API key value, instead it retrieves it from the environment variables.

Next, in the RegisterForm class in the forms.py file, you have a validate method. This method is responsible for validating the input data submitted by the user during the registration process.

Previously, this method only checked if the email was already registered and if the passwords matched. But you can now add an additional validation to check if the email is valid. Thus the modified validate method looks like this:

...

from src.accounts.utils import is_valid

...

class RegisterForm(FlaskForm):
    ...

    def validate(self):
        initial_validation = super(RegisterForm, self).validate()
        if not initial_validation:
            return False
        if not is_valid(self.email.data):
            self.email.errors.append("Email is invalid")
            return False
        user = User.query.filter_by(email=self.email.data).first()
        if user:
            self.email.errors.append("Email already registered")
            return False
        if self.password.data != self.confirm.data:
            self.password.errors.append("Passwords must match")
            return False
        return True

In the validate method, if the self.email.data (that is the user's email address) is not valid, you append an error message to the self.email.errors list and return False which means the user data is not valid.

Now, when you run the application and try to register, you can see it live. Here's a demo showing both valid and invalid cases.

Other Use Cases of an Email Validation Service

Apart from validating a user's email during registration, there are several other use cases for Email Validation Services. Some of these are:

1. Cleaning Email Lists: you can use email validation services to clean email lists by removing invalid, non-existent or risky email addresses. This can help to improve email deliverability and ensure that your emails reach the intended recipients.
2. Preventing Fraudulent Activities: you can also use email validation services to detect fraudulent activities such as fake account creation or fraudulent orders. By validating the email addresses associated with these activities, you can prevent such activities from happening.
3. Enhancing marketing campaigns: these services can also help improve the accuracy and effectiveness of email marketing campaigns. By ensuring that email addresses are valid and active, businesses can increase their email deliverability rates and improve their overall campaign performance.

Overall, email validation services can be a powerful tool in ensuring the accuracy and validity of user data, preventing fraud, and improving the user experience.

Conclusion

Email validation services are a powerful tool for any application that requires verifying user email addresses. It is essential to ensure that email addresses are valid to prevent errors and to ensure that the user input data is correct.

In this article, you saw how to use the emailvalidation.io API to validate an email address in Python. You also learned other potential use cases for email validation services, such as fraud detection and email marketing.

By implementing email validation services in your application, you can improve your user experience and ensure that your data is accurate and up-to-date.

Additional Resources

• How to Use Blueprints to Organize Your Flask Apps
• How to Set Up Email Verification in a Flask App
• emailvalidation.io Documentation

With SES, you don't have to worry about managing your mail server, and you can benefit from the scalability and reliability of Amazon's cloud infrastructure.

There are a few steps to setting up SES, such as verifying your domain, verifying your email address, and setting up MX records. This short guide will walk you through each step to get your SES up and running in no time.

Prerequisites: This tutorial will be a hands-on demonstration. To follow along, be sure you have an active AWS account.

How to Configure AWS SES

Step 1 – Verify Identities

First, login into your AWS Management Console account and search for Simple Email Service. Select the Amazon Simple Email Service.

Searching for AWS SES

This will lead you to an SES Console.

To start sending emails, you'll need to create an identity. This involves verifying the email address you would use to send emails. If you do not verify the email address, you can't use the email to perform any action on SES.

Note you can add a domain as an identity, but we'll use an email address for this guide. Click Create identity to verify an email address.

Creating an Identity

Next, select the Email address option and enter the email address you wish to use.

In Amazon SES, you can use a domain, subdomain, or email address as a verified identity. You may use whatever suits you best.

Verifying an Identity

We use tags to manage identities on Amazon SES. We'll skip this here, but if you wish, you can define a tag. Once you're done, click Create identity to create an identity for your SES account.

Creating an Identity for Amazon SES

Now, an email will be sent to the email address you used to create the identity. Click the link in the email to verify your email.

Verifying your email address

Once you've done that, you will see your email address on your SES account's list of verified identities.

List of verified identities

How to Create SMTP Credentials

A Simple Mail Transfer Protocol (SMTP) sends and receives messages through a mail server. In this section, you will learn how to create credentials that grant you access to the SES mail server to send and receive mail.

First, log in to your Amazon SES dashboard. Click on SMTP settings.

Amazon SES Dashboard

Then click on Create SMTP credentials to create login details to your SMTP account under Amazon SES.

Creating SMTP Credentials

You can choose to define an IAM username or use the default. Once you've done that, click Create.

Creating IAM user for SMTP

Once you create an IAM user, your SMTP details will be displayed alongside your IAM username.

A notification telling you your user has been created will be displayed at the top. Make sure you download the credentials since it is a One-Time display detail. You can download them by clicking on Download Credentials.

Created SMTP Credentials

Great! You have access to AWS Simple Email Service SMTP credentials. You can use the credentials to connect your backend to the Amazon SES server to send emails.

Conclusion

Amazon Simple Email Service (SES) is a powerful and reliable tool for quickly sending marketing, notification, and transactional emails. Setting up Amazon SES is straightforward and you can do it in just a few simple steps.

After signing up for an AWS account and accessing the Amazon SES console, you can verify and set a default email address and start sending emails using the service.

With Amazon SES, you can enjoy the benefits of cloud-based email sending, including improved deliverability, scalability, and security.

In this article, you will learn how to schedule your emails using Gmail. There's no need to install any software or plugins.

What you will learn

• How to schedule an email in Gmail

• How to view or edit a scheduled email in Gmail

• How to cancel a scheduled email in Gmail

How to Schedule an Email in Gmail

Step 1: Log in to your Gmail account.

Step 2: Click compose to create your email.

Step 3: Create the email you want to schedule.

Step 4: Click the Down arrow on the Send button.

Step 5: Click Schedule send.

Step 6: The popup modal give you a few options. You can choose one. Or you can create a custom date/time by clicking Select date and time.

Step 7: Click the Schedule send button.

That's it! Your email is now scheduled. You will see a notification from Gmail (like the one below) confirming a successful schedule.

Next, let's see how you can edit a scheduled mail in Gmail. This can be either editing the content of the mail or changing the scheduled time.

How to Edit a Scheduled Email in Gmail

Assuming you are already logged in to your Gmail, continue with the steps below. If not, first login and then continue with the steps below.

Step 1: To edit a scheduled email, click Scheduled on the left panel.

Step 2: You will be presented with a list of your scheduled emails. Select the email you want to edit.

Step 3: Click Cancel send at the top right of your email.

Step 4: Make the changes if you want to edit the content of your email. If you only want to change the scheduled time, move to Step 5.

Step 5: Next, you use the same process you used for the initial schedule.

• Click the down arrow next to the Send button.

• And then click Schedule send.

• Choose a new date and time.

That's it! You've successfully edited the scheduled email.

How to Cancel a Scheduled Email in Gmail

Assuming you are already logged in to your Gmail, continue with the steps below. If not, first login and then continue with the steps below.

Step 1: To cancel a scheduled email, click Scheduled on the left panel.

Step 2: You will be presented with a list of your scheduled emails. Select the email you want to cancel.

Step 3: Click Cancel send at the top right of your email.

Note that cancelling a scheduled email in Gmail does not delete it. Gmail treats it as a draft and adds it to the drafts folder. See the Gmail notification below.

Conclusion

You now know how to do the following.

• Schedule an email in Gmail.

• Edit or change the date/time for a scheduled email.

• Cancel a scheduled email.

You can also check out this freeCodeCamp article on how to batch delete Emails.

Thanks for reading!

No reset option – just a message saying the account was permanently deleted:

There are about a million ways to get a new email address, but I wanted to set up one of the domains I own with email.

And I figured there would probably be a way to have that forwarded to my Gmail.

I was right!

In this quick guide, I'll walk you through:

• How to create an email alias
• Forwarding mail from the alias to a Gmail account
• Sending mail as the Email Alias

How to Create an Email Alias

I'm using Google products: Google Domains and Gmail. All these steps should apply generally to other Domain and Email services.

First, login to your domain provider and select the Email menu. You will be able to select "Add email alias" from the menu options.

How to Forward Email to Another Address

Note: if you add the asterisk (*) symbol, this will create a wildcard alias that forwards any email to the specified address. We'll be adding a specific alias in this tutorial.

Add whatever email you choose and enter where you'd like it to be forwarded to. I'll have hi@sieis.com forwarded to my main Gmail address.

If you are using Google Name servers, then Google Domains will automatically set up the correct mail records (MX).

Otherwise, you'll need to set up these MX records. The process is exactly like setting up name servers if you've ever done that to host your website somewhere different than where you purchased the domain.

Bonus: I've done this for a site hosted on Netlify, and it is very straightforward. From the Netlify dashboard, select Options, Go to DNS panel, and then enter the MX records:

👇

Google will send a one time verification email here, but if you've previously done this verification it may not send another one.

Send yourself an email from a different address and check it out!

Email sent to Alias and forwarded to main Gmail

Note: sending from your main Gmail address doesn't show up as an unread message like it normally would when you email yourself. Send it from a different address at this point. After the rest of the steps, it will behave as normal when we complete the "send email as alias" part.

How to Send Email as the Alias

If you reply from your main Gmail currently, the recipient will see that address when you reply instead of the alias. That may not be a big deal depending on the use case, but we can certainly set it up so that sent mail acts like it's coming from the custom domain as well.

You'll need to go to your Google Account Security and click App passwords.

Select Mail for the app dropdown and Other for the device dropdown.

Enter the name of your domain and click Generate. It will give you a 16 digit password. Save this for use over in Gmail...

In Gmail, go to settings -> Accounts and Import and click Add another email address.

This will pop up a new small window where you will enter in the details of the alias. Enter the name you want recipients to view and the address of the alias. Make sure the "Treat as an alias" box is checked.

On the next screen, you'll need to change the SMTP server to smtp.gmail.com, the username to your Gmail username, and then paste in the 16 digit password you generated from Google Security in the steps above.

The port should be 587, and the TLS radial button should be checked.

Click Add Account.

This will prompt a verification code being sent to the email alias...which should in turn go to the Gmail account. Enter that in, and you'll now be good to go!

Back in our email thread in Gmail, you'll have the dropdown option when composing new messages to select which account you would like it to send from.

Now we can see from our full thread that our email forwards to and sends from our Gmail account using the email alias and display name we selected.

Thanks for reading!

This was enlightening for me, and I hope it's helpful for you too.

Come say hey on Twitter: https://twitter.com/EamonnCottrell

I even went on to delete 20,000 email messages from the trash – and saved just over 1 gigabyte of disk space in the process.

Today, I want to show you how you can batch delete emails in the Gmail app – no matter the thousands of messages you have there.

What We'll Cover

• How to Delete All Unread Emails in Gmail
• How to Clear Gmail Trash
• How do I Delete Emails from the Promotion List?
• Conclusion

How to Delete All Unread Emails in Gmail

Step 1: Log in to your Gmail account

Step 2: In the search bar, type in:unread and hit ENTER. This will show you 50 unread messages.

Step 3: Select the checkbox in the top-right corner to select 50 of the unread emails.

Step 4: Click the message that says “select all conversations that match this search”. This will select all your unread messages.

Step 5: Click the delete icon at the top.

Step 6: A pop up will appear asking if you want to bulk delete the messages. Click “Ok”.

That’s how you can bulk delete messages in Gmail.

How to Clear Gmail Trash

Step 1: To clear the messages from your Trash, click “More” on the left and select Trash.

Step 2: Click the checkbox in the top-right corner to select the messages in the trash.

Step 3: Select all the messages in Trash and click “Delete forever”.

Step 4: Click Ok to confirm that you want to delete all the messages.

You should get a message that x number of emails have been deleted forever. If you don’t get the message even if everything appears clear, refresh the page.

You can also delete messages in the promotion or social tab.

How do I Delete Emails from the Promotion List?

To delete email messages in the promotion tab, follow the steps below.

Step 1: Click More on the right and select Categories.

Step 2: Click Promotions.

Step 2: Click the checkbox on the top-right corner to select all 50 messages in the promotion tab.

Step 3: Click select all conversations in the promotion tab.

Step 4: Click the delete icon at the top.

Step 5: Confirm you want to delete all messages in the promotion tab.

You should get a message that the conversations have been moved to trash.

If you want to delete messages in other tabs such as social, or forum, repeat the process you went through to delete all messages in the promotion tab.

Conclusion

I hope this article helps you delete the unwanted messages in your Gmail app so you can also get to inbox zero.

There are other ways you can use search operators to query the Gmail app and reveal messages received over the years so you can do what you want with them. You can find those search operators in Google Support.

Thanks for reading.

Gmail and Yahoo limit file size to 25MB, while outlook and iCloud limit files to 20MB.

So, if you decide to send, for example, a video file larger than 25MB, you might get an error that the message was rejected by the server because it’s too large.

Some email clients won’t show an error, but instead, suggest how you should send the large video file.

For example, Gmail will suggest that you upload the video to Google Drive:

And Outlook will suggest that you upload the video to Microsoft OneDrive:

How then do you send a large video file through email? That’s what I’m going to show you in this article.

How to Send Large Video Files through Email Using Google Drive

Google Drive is a cloud-based storage service provided by Google for sharing files.

As already shown in this article, Gmail prompts you to upload a video file larger than 25MB to Google Drive and then convert the video to an accessible link.

If you are using another email client like Outlook, or Yahoo, you can still send the large video using Google Drive.

Upload the video to your Google Drive and click the “Get link” button:

Change the access from restricted to “Anyone with the link”:

Click “Copy link”, and then “Done”:

Click “Compose” and paste the link to your email editor. Provide every other necessary detail and click the “Send” button:

How to Send Large Video Files through Email Using Dropbox

Dropbox is another cloud-based storage service that lets you back up and sync files on multiple devices. You can upload up to 50GB file size to your Dropbox account if you have one.

To send large video files through email by using Dropbox, upload the video to your Dropbox account and copy the link:

Compose your email and paste the link in to send the large video file:

How to Send Large Video Files through Email Using Video Sharing Services

You can send large video files through email by using video-sharing services like YouTube and Vimeo.

And yes, you can upload videos to YouTube without having a YouTube channel. As long as you have a Gmail account, you have access to Google services, including YouTube. So if you have a Google account, technically you can have a YouTube channel.

To upload videos to YouTube, click the Create button on the top-right corner and select “Upload video”:

Click on “SELECT FILES” to choose the file on your device:

Give the video a name and description, copy the link, and click “Next”:

Follow other prompts and choose whether you want to make the video public or private, then click “Save”:

Head over to your email client composer and paste in the link so you can send the large video file:

Final Thoughts

You can’t send a large video file directly through email clients, but you can take advantage of the methods discussed in this article to send large video files.

Another way you can send a large video file through email is to compress the video through your native compressor or third-party file compressors. As long as the file is less than 20-25MB, you can send it through email.

But if you compress the video and it is still not less than 20-25MB, then you should use any of the methods pointed out in this article.

In this article, I will walk you through how to create a mailto link in HTML using example code.

Basic mailto link Syntax

Here is the basic syntax for the mailto link:

<a href="mailto:johndoe@fakeemail.com">Example mailto link</a>

In the browser, the user can click on the link and it will open up their default email client.

In this example, when I click on the link it opens up my Mail app and the email address is already populated in the to field.

Using this method, I would be able to send a quick email and return to the website.

How to add multiple email addresses to the mailto link

You can add multiple email addresses to the mailto link using this syntax:

<a href="mailto:johndoe@fakeemail.com, janedoe@fakeemail.com">
    Multiple email addresses
</a>

It is important to separate the multiple email addresses using commas.

When I click on the link in the browser, it will open up the Mail app and populate the email addresses in the to field.

How to add a subject line to the mailto link

Here is some example code that shows you how to add a subject line to the mailto link.

<a href="mailto:johndoe@fakeemail.com, janedoe@fakeemail.com?subject=this is how to use the mailto link">
    Using the subject parameter
</a>

After the email addresses, you need to add an ? to separate the emails and the subject parameter. If you omit that ?, then the subject link will not work.

How to add CC and BCC to the mailto link

This is an example that shows you how to add CC (carbon copy) and BCC (blind carbon copy) recipients to the mailto link.

<a
    href="mailto:johndoe@fakeemail.com, janedoe@fakeemail.com?cc=jackdoe@fakeemail.com &bcc=jennydoe@fakeemail.com &subject=this is how to use the mailto link">
    Using the CC and BCC parameters
</a>

After the email addresses, you need to add a ? to separate the emails and the CC parameter. You also need to add an & before the BCC and subject parameters.

How to add the body parameter to the mailto link

This is an example that shows you how to use the body parameter with the mailto link. This lets you add text to the body of your email.

<a
   href="mailto:johndoe@fakeemail.com, janedoe@fakeemail.com?cc=jackdoe@fakeemail.com &bcc=jennydoe@fakeemail.com &subject=this is how to use the mailto link &body=this is an article on how to use the mailto link">
    Using the body parameter
</a>

You need to add an & before the body parameter.

Are there downsides to using mailto links?

One of the downsides to using a mailto link is that it does often come across as spam by users. Unfortunately, a lot of spammers will use this option to send emails to users. So just keep that in mind when you're using it.

Advantages of using mailto links

A good reason to use a mailto link is if you are sending emails to a group of people that you know. If that entire group is using a default email client, then using a mailto link would be a good option over a contact form.

##

Contact forms are useful on websites if you want your users to be able to interact with you over email. And there are lots of ways to build them.

Traditionally you'd have either used PHP for sending emails over the server or some third party service that would take care of the email logic.

But in this article, we are going to talk about how to send emails from your Next.js application with the SendGrid API.

We are going to create a simple page – a contact form built with React – that has input fields which we'll validate before sending. We'll connect the form to the SendGrid API which will take care of sending the emails to you. Then, at the end of the day, all you have to do is check your email to find those queries.

However, if you don't have a Next.js project yet, you can easily create one and integrate it with Vercel by following the below mentioned steps:

1. Create an account on Vercel and click on New Project

2. Choose the template as Next.js:

3. Name your repository anything you would like and click on create project. (Choose GitHub, GitLab or BitBucket for your remote code versioning)

Following the above three points, you'll have a repository on your versioning account.

The Tech Stack We'll Use

• Next.js for creating a contact form landing page
• TailwindCSS for styling the components
• SendGrid for sending emails using their APIs
• Vercel for hosting our application and CI/CD

We are going to use Nextjs' API routes to handle form events. The API modules provide a flexible way to handle backend logic in our Next.js application.

Whatever code we write in the API folder will get deployed as a Serverless function onto Vercel for hosting. You can read more about Next.js API routes here

If you already have a Next.js project where you want to set up a working contact form, that's great. In that case, it'll be easy for you to create pages and get started right away.

But if you don't have a project set up yet, that's ok – go to Vercel and create a Next.js starter project and clone the repository.

Application Flow

Let's take a look at the application flow – or how the sending of emails actually works:

• The end-user fills in the mandotary 4 fields and clicks on submit.
• On submit, the handleSubmit function gets triggered.
• handleSubmit validates the form for input fields and checks if they are not empty.
• If the form fields are not empty, an API call is made to api/sendgrid where the logic of sending emails lives.
• In api/sendgrid, the @sendgrid/mail module initializes a send function that takes it your application's API keys and sends the email with the required fields.
• If email is successfully delivered, a 200 response is sent to the client, else a 400 response is sent to the client.
• Responses are handled at the frontend and the appropriate messages are displayed.

How to Set Up TailwindCSS

Setting up TailwindCSS is quite easy, and you can do it in two simple ways.

1. Install TailwindCSS as a dependency in your project:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. Initialize a TailwindCSS configuration file for your project. This will create a tailwind.config.js file in the root directory:

npx tailwindcss init

Then you'll need to edit the configuration file, include purge paths, and enable jit mode:

module.exports = {
   purge: [],
   mode: 'jit',
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

You use purge to remove unwanted styles from your project at build time. It is helpful if you want to reduce the CSS bundle size.

jit is the new TailwindCSS mode where you can specify dynamic classnames in the code itself.

For example, if you want to have your text size be 10px (which is not already there in the TailwindCSS modules), you can write text-[10px] in your class names and it will reflect automatically. No need to write custom style attributes anymore. 💯

Next, import Tailwind styles in your root _app.js file:

// pages/_app.js
 import '../styles/globals.css'
 import 'tailwindcss/tailwind.css'

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp

Then include Tailwind's core CSS in your root level stylesheet like this:

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

With this, you have successfully setup TailwindCSS for your project.

The Markup and Styling for the Contact Page

We'll build the webpage completely with Tailwind. I got the page itself directly from the Tailwind Master Kit which is a components and templates library for Tailwind web projects.

Let's go through the HTML of the page (essentially the contact form) to understand how everything's implemented:

<form class="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500">
      <h1 class="text-2xl font-bold dark:text-gray-50">Send a message</h1>

      <label for="fullname" class="text-gray-500 font-light mt-8 dark:text-gray-50">Full name<span class="text-red-500 dark:text-gray-50">*</span></label>
      <input type="text" name="fullname" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="email" class="text-gray-500 font-light mt-4 dark:text-gray-50">E-mail<span class="text-red-500">*</span></label>
      <input type="email" name="email" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="subject" class="text-gray-500 font-light mt-4 dark:text-gray-50">Subject<span class="text-red-500">*</span></label>
      <input type="text" name="subject" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="message" class="text-gray-500 font-light mt-4 dark:text-gray-50">Message<span class="text-red-500">*</span></label>
      <textarea name="message" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"></textarea>
      <div class="flex flex-row items-center justify-start">
        <button class="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center">
          Send
          <svg width="24" height="24" viewBox="0 0 24 24" class="text-cyan-500 ml-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z" fill="currentColor" />
          </svg>
        </button>
      </div>
    </form>

The form has 4 fields:

• Full Name
• Email
• Subject
• Message

All the fields are mandatory – and we'll validate them too later on. You'll expect your user to provide you with all their details while sending the email.

To capture the fields, we are going to use React's useState() hook to ensure that our data is persisted in the application.

export default function ContactUs() {
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

    return (
        <form
          onSubmit={handleSubmit}
          className="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500"
        >
          <h1 className="text-2xl font-bold dark:text-gray-50">
            Send a message
          </h1>

          <label
            htmlFor="fullname"
            className="text-gray-500 font-light mt-8 dark:text-gray-50"
          >
            Full name<span className="text-red-500 dark:text-gray-50">*</span>
          </label>
          <input
            type="text"
            value={fullname}
            onChange={(e) => {
              setFullname(e.target.value);
            }}
            name="fullname"
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />


          <label
            htmlFor="email"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            E-mail<span className="text-red-500">*</span>
          </label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />


          <label
            htmlFor="subject"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            Subject<span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            name="subject"
            value={subject}
            onChange={(e) => {
              setSubject(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          />

          <label
            htmlFor="message"
            className="text-gray-500 font-light mt-4 dark:text-gray-50"
          >
            Message<span className="text-red-500">*</span>
          </label>
          <textarea
            name="message"
            value={message}
            onChange={(e) => {
              setMessage(e.target.value);
            }}
            className="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"
          ></textarea>

          <div className="flex flex-row items-center justify-start">
            <button
              type="submit"
              className="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center"
            >
              Submit
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                className="text-cyan-500 ml-2"
                fill="currentColor"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z"
                  fill="currentColor"
                />
              </svg>
            </button>
          </div>
        </form>
    )
}

Notice the form attribute onSubmit={handleSubmit}. This is the function where we are going to actually send the email through SendGrid. But before that, let's create a SendGrid Project and retrieve the API keys.

How to Set Up a SendGrid Project

First, you just need to head over to SendGrid's homepage and signup for an account (if you don't have one already).

After successfully creating an account, register for an API Key. You can do it here.

Sendgrid requires you to create a Sender Identity to protect against spam and malicious mails. To do so, go to the Sendgrid Identity page and click on Create New Sender to create a sender identity.

You'll be rqeuired to fill out a detailed form. Just complete the form and hit submit. Finally, just verify your email address and you're done.

Once you've retrieved the API keys, create a .env.local file in your local environment and paste the following code:

SENDGRID_API_KEY= YOUR_API_KEY_HERE

Replace YOUR_API_KEY_HERE with the API key you just retrieved.

How to Create a Serverless API Route

Creating a serverless API route is quite easy with Next.js.

Go to /pages/api and inside the api folder create a file called sendgrid.js.

import sendgrid from "@sendgrid/mail";

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

async function sendEmail(req, res) {
  try {
    // console.log("REQ.BODY", req.body);
    await sendgrid.send({
      to: "mannuarora7000@gmail.com", // Your email where you'll receive emails
      from: "manuarorawork@gmail.com", // your website email address here
      subject: `${req.body.subject}`,
      html: `<div>You've got a mail</div>`,
    });
  } catch (error) {
    // console.log(error);
    return res.status(error.statusCode || 500).json({ error: error.message });
  }

  return res.status(200).json({ error: "" });
}

export default sendEmail;

SendGrid requires us to initialize a sendgrid object with the API keys with the setApiKey() method. Initialize the object with your API key and you can send emails with the send() method.

There are essentially four fields that are required in the send() method's body:

• to – The email address where you want your email to get delivered
• from – Your SendGrid Email that you used for Sender Identity Verification. Your emails will be sent from this email.
• subject – The subject line of the email
• message – the message body of the email

We are going to construct these four parameters ourselves so that we can understand our emails better. Here is the updated code from the same snippet above:

import sendgrid from "@sendgrid/mail";

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

async function sendEmail(req, res) {
  try {
    await sendgrid.send({
      to: "youremail@gmail.com", // Your email where you'll receive emails
      from: "youremail@gmail.com", // your website email address here
      subject: `[Lead from website] : ${req.body.subject}`,
      html: `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html lang="en">
      <head>
        <meta charset="utf-8">

        <title>The HTML5 Herald</title>
        <meta name="description" content="The HTML5 Herald">
        <meta name="author" content="SitePoint">
      <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

        <link rel="stylesheet" href="css/styles.css?v=1.0">

      </head>

      <body>
        <div class="img-container" style="display: flex;justify-content: center;align-items: center;border-radius: 5px;overflow: hidden; font-family: 'helvetica', 'ui-sans';">              
              </div>
              <div class="container" style="margin-left: 20px;margin-right: 20px;">
              <h3>You've got a new mail from ${req.body.fullname}, their email is: ✉️${req.body.email} </h3>
              <div style="font-size: 16px;">
              <p>Message:</p>
              <p>${req.body.message}</p>
              <br>
              </div>
              <img src="https://manuarora.in/logo.png" class="logo-image" style="height: 50px;width: 50px;border-radius: 5px;overflow: hidden;">
              <p class="footer" style="font-size: 16px;padding-bottom: 20px;border-bottom: 1px solid #D1D5DB;">Regards<br>Manu Arora<br>Software Developer<br>+91 9587738861</p>
              <div class="footer-links" style="display: flex;justify-content: center;align-items: center;">
                <a href="https://manuarora.in/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Website</a>
                <a href="https://manuarora.in/blog/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Blog</a>
                <a href="https://github.com/manuarora700/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">GitHub</a>
                <a href="https://instagram.com/maninthere/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Instagram</a>
                <a href="https://linkedin.com/in/manuarora28/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">LinkedIn</a>
                <a href="https://twitter.com/mannupaaji/" style="text-decoration: none;margin: 8px;color: #9CA3AF;">Twitter</a>

              </div>
              </div>
      </body>
      </html>`,
    });
  } catch (error) {
    // console.log(error);
    return res.status(error.statusCode || 500).json({ error: error.message });
  }

  return res.status(200).json({ error: "" });
}

export default sendEmail;

If you want to send html in the email body, you will have to use inline styles which are there in the example as well.

Here, we are essentially using SendGrid's send() method provided by the SendGrid API to send emails. We use the send() method with the sendgrid object which we initialized with the API key. This makes sure that our emails are secure and delivered only by our permission.

Also, we've wrapped the code in a try - catch block. This ensures that our application can handle exceptions and errors correctly. If by any change the email sending fails, then the code immediately falls into the catch() block and we return an error object. This signifies that there has been some problem on the back-end.

Looking at the API response from the back-end, the front-end responds accordingly and the UI changes.

The styling goes into the html attribute inside of the send() method body. How you want to style your email completely depends on you. Here, I've included a simple template with a footer to my Twitter, Instagram, GitHub and website, along with the original message body that the end-user sends.

Now our API route is setup, so let's move on to the front end and learn how to handle the response correctly.

How to Call the API and Handle Responses

Since our API route is setup, we are now going to call our serverless API and fetch the response.

import React, { useState } from "react";

export default function ContactUs() {
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");



  const handleSubmit = async (e) => {
    e.preventDefault();

    let isValidForm = handleValidation();


      const res = await fetch("/api/sendgrid", {
        body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        }),
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
      });

      const { error } = await res.json();
      if (error) {
        console.log(error);
        return;
      }
    console.log(fullname, email, subject, message);
  };
  return (
    <main>
        <form class="rounded-lg shadow-xl flex flex-col px-8 py-8 bg-white dark:bg-blue-500">
      <h1 class="text-2xl font-bold dark:text-gray-50">Send a message</h1>

      <label for="fullname" class="text-gray-500 font-light mt-8 dark:text-gray-50">Full name<span class="text-red-500 dark:text-gray-50">*</span></label>
      <input type="text" name="fullname" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="email" class="text-gray-500 font-light mt-4 dark:text-gray-50">E-mail<span class="text-red-500">*</span></label>
      <input type="email" name="email" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="subject" class="text-gray-500 font-light mt-4 dark:text-gray-50">Subject<span class="text-red-500">*</span></label>
      <input type="text" name="subject" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500" />

      <label for="message" class="text-gray-500 font-light mt-4 dark:text-gray-50">Message<span class="text-red-500">*</span></label>
      <textarea name="message" class="bg-transparent border-b py-2 pl-4 focus:outline-none focus:rounded-md focus:ring-1 ring-green-500 font-light text-gray-500"></textarea>
      <div class="flex flex-row items-center justify-start">
        <button class="px-10 mt-8 py-2 bg-[#130F49] text-gray-50 font-light rounded-md text-lg flex flex-row items-center">
          Send
          <svg width="24" height="24" viewBox="0 0 24 24" class="text-cyan-500 ml-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.00967 5.12761H11.0097C12.1142 5.12761 13.468 5.89682 14.0335 6.8457L16.5089 11H21.0097C21.562 11 22.0097 11.4477 22.0097 12C22.0097 12.5523 21.562 13 21.0097 13H16.4138L13.9383 17.1543C13.3729 18.1032 12.0191 18.8724 10.9145 18.8724H8.91454L12.4138 13H5.42485L3.99036 15.4529H1.99036L4.00967 12L4.00967 11.967L2.00967 8.54712H4.00967L5.44417 11H12.5089L9.00967 5.12761Z" fill="currentColor" />
          </svg>
        </button>
      </div>
    </form>
    </main>
  );
}

Here we are calling the API we just created with fetch, which is provided by React.

Fetch calls the serverless API with the body like this:

body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        })

These are our form fields with the form data filled in already (remember useState()?) which are now available to us.

The API responds with either success or failure. If it is a success, the email gets delivered – otherwise, the mail doesn't get delivered.

For the end-user to know the form status, we need to show some UI elements. But before that, we need to handle what happens if there are empty fields.

How to Handle Form Validation and Make the UI Respond to the API Response

We need to ensure 3 things here:

1. All the fields should be filled in – that is, we can't submit the form if any of the fields are empty. Also, the user must know why the form is not submitting. For that, we are going to display error messages.
2. While the form is being submitted, the user must know that some processing is going on. For that, we are going to change the button text when the form is in the process of submitting.
3. When the form is successfully submitted or if it fails, we are going to show the final status at the bottom of the form.

Let's create a method handleValidation() to check for validation:

  const handleValidation = () => {
    let tempErrors = {};
    let isValid = true;

    if (fullname.length <= 0) {
      tempErrors["fullname"] = true;
      isValid = false;
    }
    if (email.length <= 0) {
      tempErrors["email"] = true;
      isValid = false;
    }
    if (subject.length <= 0) {
      tempErrors["subject"] = true;
      isValid = false;
    }
    if (message.length <= 0) {
      tempErrors["message"] = true;
      isValid = false;
    }

    setErrors({ ...tempErrors });
    console.log("errors", errors);
    return isValid;
  };

The function is pretty straightforward: it checks for all the fields and returns a boolean isValid if the form is valid.

Also, we are maintaining state for all the fields to display error messages at the end – essentially, we are saving the fields that contain errors.

The final code looks something like this, with button text, error messages, and form validations:

import React, { useState } from "react";

export default function ContactUs() {
   // States for contact form fields
  const [fullname, setFullname] = useState("");
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [message, setMessage] = useState("");

  //   Form validation state
  const [errors, setErrors] = useState({});

  //   Setting button text on form submission
  const [buttonText, setButtonText] = useState("Send");

  // Setting success or failure messages states
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  const [showFailureMessage, setShowFailureMessage] = useState(false);

  // Validation check method
  const handleValidation = () => {
    let tempErrors = {};
    let isValid = true;

    if (fullname.length <= 0) {
      tempErrors["fullname"] = true;
      isValid = false;
    }
    if (email.length <= 0) {
      tempErrors["email"] = true;
      isValid = false;
    }
    if (subject.length <= 0) {
      tempErrors["subject"] = true;
      isValid = false;
    }
    if (message.length <= 0) {
      tempErrors["message"] = true;
      isValid = false;
    }

    setErrors({ ...tempErrors });
    console.log("errors", errors);
    return isValid;
  };

  //   Handling form submit

  const handleSubmit = async (e) => {
    e.preventDefault();

    let isValidForm = handleValidation();

    if (isValidForm) {
      setButtonText("Sending");
      const res = await fetch("/api/sendgrid", {
        body: JSON.stringify({
          email: email,
          fullname: fullname,
          subject: subject,
          message: message,
        }),
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
      });

      const { error } = await res.json();
      if (error) {
        console.log(error);
        setShowSuccessMessage(false);
        setShowFailureMessage(true);
        setButtonText("Send");
        return;
      }
      setShowSuccessMessage(true);
      setShowFailureMessage(false);
      setButtonText("Send");
    }
    console.log(fullname, email, subject, message);
  };
  return (
    <main>
      // Rest of the JSX code goes here. (With form fields)
    </main>
  );
}

When the form is delivered successfully, we get a nice response at the UI. To deliver that response, we have showSuccessMessage and showFailureMessage states. If the response from the back-end API route does NOT contain the property error, that means the form submission was successful and the email has been sent.

In that case, showSuccessMessage is set to True, which shows the corresponding markup just beneath the Form box. If the response body contains the property of error, the showFailureMessage is set to True and the corresponding message is displayed on the screen.

In both success and failure scenarios, we have to reset the button text to send instead of sending.... For that, we are using the state setButtonText('send') that sets the button text in case of failure or success. We set the button text to sending... when the Send button is clicked.

How to Receive Emails and UI Responses

When the email is successfully delivered, we get a success message in the contact form itself.

And you will successfully receive an email with the template that we just created, securely delivered by SendGrid 💯

Environment Variables

Please note that we are using the API keys and the keys are sensitive. This means that we should always store secret or API keys in environment variables.

As we already have .env.local for our local environment, the hosting provider needs to know about the API keys too.

Vercel provides an easy way to store API keys on the hosting panel itself.

To store the API keys securely in your Vercel account, do the following:

• Go to your projects page
• Go to settings
• Go to Environment variables
• Add the name of the environment variable, in our case it is SENDGRID_API_KEY, and add the corresponding API key in the value field.
• Re-deploy your application and your project will work in a production environment.

Live Demo and Source Code

Here are the source code and a live demo of the application:

Live Demo Source Code

Conclusion

SendGrid is an excellent option to use to send emails from a website. When you integrate it with Next.js and their serverless API routes, it becomes extremely easy to integrate forms in any part of your website.

SendGrid also gives you an option to integrate templates where you can have custom themes for your emails.

There are other options too for sending emails like Nodemailer that I've used in the past and still use for some of my projects.

It took me around an hour to build this application from the ground up – all thanks to Next.js, TailwindCSS, and SendGrid for their extremely intuitive workflow and API semantics. Also thanks to the Tailwind Master Kit for the beautiful Contact Page UI.

If you liked this blog, try implementing it in your own website so you can reach out to your end-users.

If you'd like to give any feedback, reach out to me at my Twitter handle or visit my Website

Happy coding. :)

Today I am going to explain what SMTP is, and how to use an SMTP provider such as SendGrid to send emails from your address.

What Is SMTP?

SMTP, or Simple Mail Transfer Protocol, is the method through which internet servers send email messages. When you send an email through your Gmail account, for example, your mail client uses SMTP to send that message to the server. The server then also uses SMTP to send it to the receiving server.

Without diving too much into the technical details, the easiest way to think of it is that SMTP is an email server.

What is SendGrid?

SendGrid is an SMTP service provider – in fact, it's the provider freeCodeCamp uses to send out Quincy's weekly newsletter.

Like many SMTP providers, SendGrid offers the use of their mail servers to send your emails. This is an excellent option for sending large volumes of emails, where having to do so manually would take a significant amount of time and effort.

How to Create a SendGrid Account

The first step in using SendGrid's services is to create your account. Head on over to the SendGrid website to get signed up. They offer multiple pricing models, but the free level will be sufficient at least for this tutorial.

As you scale up your email list, however, you may need additional features from a higher subscription tier.

Once you are signed in, you should see a default dashboard view:

Image depicting the default SendGrid dashboard view.

How to Set up Your Domain or Email with SendGrid

From that dashboard view, select "Settings", then choose "Sender Authentication" from the dropdown menu. The Sender Authentication settings are where you tell SendGrid which email accounts to allow emails to be sent from.

There are two approaches here – if you have a custom domain for your emails, you can set up Domain Authentication. If you are using a personal email address, such as a Gmail address, then you will need to set up Single Sender Authentication.

Choose whichever option works best for you, and follow SendGrid's prompts to set it up. Your end result should look similar to this:

Image depicting Sender Authentication settings.

How to Send Emails Via SendGrid's API

The actual process of sending the emails is done through SendGrid's API. But before you can use the API, you'll need to set up an API key.

From your dashboard view, select "Settings", then select "API Keys". Choose "Create API Key" and select the permissions you want the key to have (I gave mine full permissions, just to avoid issues).

Once you have the key, save it somewhere safe as you will not be able to access it again.

Image depicting the API Keys settings page.

Now that you have the API key, you'll need to set up the code to use the /mail/send endpoint. You can write the code manually, or use one of the helper libraries such as SendGrid's Node.js package.

When using the Node.js package, you set the values for your email as follows:

• to: The address to send the email to.
• from: The address to send the email from. This should match your settings in the Sender Authentication.
• subject: The subject of your email.
• text: The content of your email, if you are sending a plain text email.
• html: The content of your email, if you are sending an HTML email.

The properties in a raw API call are different, as are the properties in the other helper libraries. Be sure to refer to the documentation for your specific approach.

How to Use Dynamic Templates in SendGrid

As an alternative option, instead of sending the email content in your API call, you can use a Dynamic Template to generate the content.

A Dynamic Template lets you set the content for emails to send out, and offers Handlebars functionality to replace specific data fields.

To create a Dynamic Template, from your dashboard select "Email API" and then "Dynamic Templates". Then click "Create a Dynamic Template" – you should see your template appear below.

Click on it, then select "Add Version" to open the template selection. Choose the blank template, then select the type of editor you would like to use (I use the code editor).

Image depicting the editor.

You can write the content of your email, and use placeholders such as {{name}} for the dynamic data. These placeholders would be given values through your API calls when you send the emails.

If you want to see how it would render, you can use the "Test Data" tab to add sample data for the placeholders.

How to Get Blocks/Bounces/Spams via SendGrid's API

It's important to track undeliverable emails. SendGrid offers tooling to help track this for you, and that data is available through three different dashboard views (or API endpoints, if you want to parse the data programmatically).

• Blocked emails are emails that were rejected by the receiving email provider's policies, such as university emails that don't accept external traffic, or emails that could not be resolved (the mail server was not found).
• Bounced emails are emails that were received by the server but returned. This occurs in cases where the email server exists, but the specific user does not, or the email inbox is at capacity.
• Spam emails are arguably the most important to monitor, as these are generated when a user receives your email and reports to their provider that your email is spam. These directly impact your reputation as a sender, so it is imperative that you do not send an email to someone who has marked your previous emails as spam.

Other Concerns

Speaking of your reputation as a sender, SendGrid offers a top-level metric called "Sender Reputation". This metric is an aggregation of your activity through their platform, and helps give a general idea of the way email providers are likely to handle your emails.

A lower reputation will result in your emails being marked as spam automatically, or even your IP addresses being blocked.

If you are on the free tier for SendGrid, you will be using shared IP addresses. This means that other customers will also be sending emails through that same IP, and their actions can negatively impact your reputation.

If you intend to send large volumes of emails, I recommend that you purchase dedicated IP addresses to ensure that your reputation is protected.

Conclusion

I hope this article has helped you become more familiar with SendGrid and the services they offer. You should now be ready to start sending your own emails.

If you are planning to start an email newsletter, I wrote an article about creating effective email newsletters that might help.

In this article, I am going to provide some tips and suggestions for maximizing the impact of your email newsletter: open rates, click-through rate, and not irritating your recipients.

I will also share some technical details and configurations you can use to maximize the deliverability of your email newsletter.

How to Write an Impactful Subject Line

Your subject line is the first thing your readers will see when the email appears in their inbox. It's important, then, that you use something eye catching that encourages them to read the message.

What to Include in the Subject Line

Your subject line should provide a brief summary of the email content or highlight the key information. Some examples would be:

Learn Data Structures and Algorithms [free 6-hour coding course]

This headline comes from one of Quincy's email newsletters, and calls out the first article out of a weekly curated list of five articles.

Our Community Reached 3,000 Members - Here's What's Next

Here the headline provides a clear summary of the email's content – an update on the community's success and future plans.

The Observatory #4: Gravity is the key to community growth

Pulled from an Orbit newsletter, this subject line has two benefits: Like the others, it summarizes the content of the email. It also helps readers recognize this email as a serial newsletter, and track the number to ensure they have not missed one.

What to Exclude from the Subject Line

You want to avoid headlines which are vague, uninformative, or may seem like spam.

Click Here! Important Information Within!

Avoid words and phrases such as click here, urgent, important, and priority. These types of subject lines are often used in spam emails, and can cause your readers to disengage.

April 2020 Community Update

While this subject is not going to seem like spam, it is also vague and uninformative. You want your subject to catch the reader's attention and be unique.

Top Picks Just For You

Another vague subject line, this one also gives off a "click-bait" vibe. This type of subject line doesn't hook your readers or entice them in to reading your full email.

How to Craft an Effective Email Body

The body of your email is where your core content will go. Having a well written and effective email body is essential.

HTML vs. Plain Text in Emails

Using HTML in your email can make it look nice, certainly. However, HTML emails are more likely to be flagged as spam by the receiving providers.

Plain text emails are generally safer, though they offer less functionality. Additionally, a plain text email will ensure maximum compatibility with all devices, and ensure that your email can be viewed even over slower internet connections.

HTML, on the other hand, offers a much higher level of customization in terms of layout, content, and functionality. You can even implement things like interaction tracking to see who is opening (open rate), reading, and clicking on links in your email (click-through rate). Whether these features are worth the potential impact to delivery is or not is up to you.

How to Handle Links in Emails

Speaking of links, there are some special considerations when it comes to handling links in your email. The key idea is to keep your links easily readable and verifiable.

One important aspect is the transparency of your links. You want to avoid using things like URL shorteners that hide the domain the link points to. Keeping your link's target clear ensures that your readers can trust the safety of the link.

Many sending providers offer click-tracking features, where they will provide metrics on how many of your readers click the links within your email.

While these metrics may seem useful, they do come at a cost – usually the links are obfuscated through a redirect via the provider's domain. This decreases the chance that your readers will click the link.

Unsubscribe Links

If your email is considered commercial material (marketing, advertisements, and so on.), having an unsubscribe link is required. If it is a transactional (receipt, account updates) or relationship (communicating with existing contacts) email, then an unsubscribe link is not necessarily required but is still strongly recommended.

Having an unsubscribe link allows your recipients to quickly and easily opt-out of receiving future communications. While it may not seem ideal to lose your reader base, it is much better than having your emails flagged as spam (which can impact your sender reputation and cause future emails to anyone with that email provider to be blocked).

Your unsubscribe link does not need to be prominent or featured – a simple link with the text "Unsubscribe" at the bottom of your email is often sufficient.

Content and Layout of Your Emails

The content and layout of your email body are also very important. If you are using plain text to send your email, then your biggest consideration will be the length of your paragraphs. In general, shorter paragraphs are easier to read than a "wall of text", and will help your readers stay engaged with the content.

If you are using HTML, then you have some additional obstacles to consider.

For example, including images may seem very tempting as they can make the email look more visually appealing. But each image increases the time it takes for the email to render on the reader's device, and images aren't as accessible for those who use screen readers as plain text is.

Remember that images should add to the content, not detract from the information.

Another aspect to consider when using HTML is the semantic structure. To avoid any rendering errors or accessibility concerns, you will want to keep your HTML semantically correct. I recommend using an HTML Validator before sending the email to ensure you don't have any errors.

Content length itself is also important. You don't want to overwhelm your readers with too much information in a single email. If you have a lot of content you want to share, consider making a blog post or news article – then, link that article in your email with a brief summary of the content.

How to Sign Off in an Email

The signature of your email is just as important as the main content. Signing off your email lets your readers know who sent it, and gives you the opportunity to close out the content.

You should include your name and your role within your organization, so that your readers see that the email came from a person. This creates the impression that it is a more personal communication and not an automatically generated email.

Finally, the signature and conclusion also give you the chance to thank your readers for their time. It is good to recognize that your readers took time out of their day to read your content. Time is valuable, and your readers have given you theirs.

Technical Aspects of Email Newsletters

Now that you've drafted your first newsletter, you need to address the technical concerns. Namely, you'll need to figure out how you'll send this newsletter.

Choose a Sending Provider

The first question to answer is what will you use to send this email? It is entirely possible to set up and run your own Secure Mail Transfer Protocol (SMTP) server, but that can be a significant investment of time and resources.

Instead, there are a number of providers that will handle sending the emails for you. Here at freeCodeCamp we use SendGrid. Most providers will offer an API to request that emails be sent, or a UI to prepare your emails. Then they will handle the actual send process for you.

While these providers can get expensive at higher volumes, often times the cost is worth the access to additional features such as email validation and bounce report tracking.

Set up Email Authentication

Another important technical aspect is email verification and authentication, especially if you are using a custom domain.

How does a provider such as Gmail confirm that the email has legitimately come from your organization and not someone pretending to be you?

There are a couple of security steps you can take to ensure that your emails are delivered while spoofed emails are not.

• Sender Policy Framework (SPF): You can use an SPF setting to validate that the mail server is authorized to send emails from your email domain. SPF is enabled via a TXT record in your domain settings. The content of that record will depend on the system you are using to send those emails.

• DomainKeys Identified Mail (DKIM): You can use DKIM to assert that the email message has not been modified in transit from the sending server to the receiving server. DKIM records are set up in your domain settings either as a TXT record or a CNAME record, depending on your provider. These records will indicate the public encryption/decryption keys.

• Domain Message Authentication, Reporting, and Conformance (DMARC): The final step, after enabling SPF and DKIM, is to set up a DMARC record. The DMARC record tells email providers what to do if an email from your domain fails SPF or DKIM, where to send delivery reports, and how often to apply the DMARC policy. A DMARC record is added as a TXT record to your domain settings, as _dmarc.yourdomain.tld.

Congratulations. Now that you have read this article, you should have a basic understanding of how to create and send your first email newsletter. I hope you found this article helpful.

I was recently building a simple landing page website for a client who wanted to receive emails through their website without sharing their email.

Honestly, I had never tried to implement that functionality myself before. I was always used to having a simple "Contact Us" button with an anchor tag and a mailto in the href attribute like this:

<button>
    <a href="mailto:myemail@example.com">Contact Me</a>
</button>

But this approach has two inconveniences:

1. It forces both parties, the user who wants to send the message and the site owner who receives it, to share their emails with one another. While this is OK for some, it is not ideal for privacy-minded individuals.
2. For the site visitor, clicking the link forces them to open their default mail program on their device, and that can be frustrating. What if they're using a public computer? What if they're not logged in? What if they simply don't want to use their mail program?
   Yes, technically they can just grab the recipient's email address and send the message via their browser or wherever they're logged in. But those are all extra steps and hurdles that can discourage users from sending their messages and the business might lose potential feedback or opportunities.

For this reason, we chose to go with an email form from which the user can simply write in their message and click submit, sending an email to the site's owner without ever leaving the website.

A quick Google search shows that there are third party tools/widgets that you could embed in a website, but most of them are branded and require paid subscription for full customization.

And unless you are using a CMS like WordPress that has a built-in plugin that can do that, that's an inconvenient recurring cost.

I instead chose to code that feature myself so I would have full control.

For the purposes of this guide I will recreate the steps I took to implement that functionality using HTML and AWS services.

The HTML Form

I'll keep it super simple here and go with a basic HTML form with no CSS, just to test our desired functionality.

<h2>Contact Us</h2>
<form>
  <label for="name">Name:</label>
  <input name="name" type="text"/><br/><br/>
  <label for="email">Email:</label>
  <input name="email" type="email"/><br/><br/>
  <label for="name">Message:</label>
  <textarea name="message"></textarea><br/><br/>
  <input type="submit"/>
  <div>
    <p id="result-text"></p>
  </div>
</form>

Nothing fancy to see here...

Now we want to handle the submit functionality with JavaScript.

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // prevent the form submit from refreshing the page
  event.preventDefault()

  const { name, email, message } = event.target
  console.log('Name: ', name.value)
  console.log('email: ', email.value)
  console.log('Message: ', message.value)

})

At this point, we have a form that gets input from the user and JavaScript code that just displays the results to the console.

We can leave it at that for now and start working on the backend services that will receive the form data and send an email with that data.

The Backend Overview

Let's dive into AWS and what services we are going to use and how.

As mentioned in the title, we will use AWS Lambda and Simple Email Service (SES). SES is a serverless messaging service that allows you to send email messages when invoked. AWS Lambda allows you to write server-side code to execute in response to events.

We will also use API Gateway which enables us to invoke Lambda functions via HTTP.

In this case, when our form is submitted, the following workflow will happen:

1. Our browser (JavaScript) will make a post request, with the form data in the request body, to an endpoint URL specified by AWS API Gateway
2. The API Gateway will validate this request. Then it will trigger the Lambda function which accepts an event parameter. API Gateway will put the form data in the body property of the event parameter.
3. Our Lambda function will extract the data from the event body and we will then use this data to build the body of the email we want to send as well as its recipients. Our function will then use the AWS SDK to invoke SES with the email data.
4. Once SES gets the sendMail request, it turns the email data into an actual text email and sends it to the recipient via AWS's own mail servers.

Once the email is sent, our browser will receive a response with status code 200 and a success message. If any step in the AWS cloud fails, the response will have a 500 status code.

Step 1: How to Set Up SES

We're actually going to set up each one of these steps in the reverse order, beginning with SES, which is going to be easier.

First in your AWS console, go to the SES service —> then click on Email Addresses in the side menu —> then click on the "Verify a New Email Address" button.

In the dialogue that opens up, enter the email address that you want the SES service to put as the sender when it sends the email.

This will send an email to the email address you put with a link to click to verify. This is how AWS knows that the owner of the email consents to having their email address used as the sender address.

Until you verify the email, the SES email dashboard will keep the verification status as pending.

Once the email owner opens the email they received from AWS and clicks the verification link in it, the verification status should change to verified (refresh the page to see the change).

And that's all you have to do for SES. You can optionally test the service by selecting your verified email in the list and clicking the "Send a Test Email" button. This will let you put in a recipient's email address, a subject, and a message and send it.

The email sent is going to be signed by AWS servers and your verified address should be the sender. It should look like this:

Step 2: How to Set Up Lambda

Now this is the most fun part. We are going to create a function that is going to receive the form data and call SES.

The beauty of Lambda functions is that you don't have to worry about running your backend code on a server 24/7 and maintaining that server. It's serverless.

But that doesn't mean there are no servers involved. AWS is going to take care of that under the hood so you can only focus on writing code, not maintaining servers. Additionally, you only get billed for the number of times your function gets called and the amount of time it takes to execute, and it's incredibly cheap!

Create an IAM Role and Configure it

Before we start writing our lambda function, we need to create an IAM role to attach it to the function and grant it permissions (referred to as policies in AWS) to invoke the SES service.

From your AWS console, go to the IAM service —> click on Policies in the side menu —> then click on the "Create Policy" button.

In the policy creation page, go to the JSON tab and paste the following permissions, then click Next.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail",
                "ses:SendRawEmail"
            ],
            "Resource": "*"
        }
    ]
}

In the third screen, name the policy and click the "Create Policy" button.

Now we create an IAM role which will be attached to the lambda and link it to the permissions policy which we just created.

From the IAM side menu, click Roles then click the "Create role" button.

In the role creation screen, make sure the type selected is "AWS service" and select the Lambda case then click on the "Next:Permissions" button.

On the next screen, search for the policy we created earlier by its name and select it, then click next.

On the review screen, give the role a name you can remember then click on "Create role".

Now we can create a new lambda function. Go to the Lambda service dashboard and click the "Create Function" button.

In the function creation screen, name your function, select the "Author from scratch" option, and choose Node.js as the runtime.

Under "Change default execution role" choose the "Use an existing role" option then choose the name of the role you created in the previous step from the "Existing role" drop down.

Finally, click the "Create function" button to create the function.

Write the Code and Test it

In the editor, open the index.js file (this is the file that will be executed when your lambda is called), and replace its content with the following code:

const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
  console.log('EVENT: ', event)
  const params = {
    Destination: {
      ToAddresses: ["your@email.com"],
    },
    Message: {
      Body: {
        Text: { 
            Data: `Hello from Lambda!` 
        },
      },
      Subject: { Data: `Message from AWS Lambda` },
    },
    Source: "your@email.com",
  };

  return ses.sendEmail(params).promise()
};

Notice that on line 2 we are using the AWS SDK and creating an SES instance. The reason I chose us-east-1 as the region is because that's where I registered & verified my email. Be sure to replace the email and use the AWS region where you registered your email.

Now to test this function, click on the "Deploy" button. Then click on the Test button —> Configure test event which should open up a test configuration dialogue where you can create a new test event.

In the test event body editor, enter the following JSON which mimics what will eventually come from our browser request. Then click create.

{
  "body": {
        "senderName": "Namo",
        "senderEmail": "namo@trains.com",
        "message": "I love trains!"
    }
}

Now clicking the test button will run the test we just created. It should open a new tab in the editor to show us the logs created from running the function, which should look like this:

Notice the event object we logged out shows here under Function logs with the body data we used in the test event.

This test should have sent an email to my inbox as well – let's see if that happened.

Yep, just as expected. And that happened almost immediately after running the test.

Now let's modify our function code to get a more meaningful message from the test data.

const aws = require("aws-sdk");
const ses = new aws.SES({ region: "us-east-1" });
exports.handler = async function (event) {
  console.log('EVENT: ', event)
    // Extract the properties from the event body
  const { senderEmail, senderName, message } = JSON.parse(event.body)
  const params = {
    Destination: {
      ToAddresses: ["the.benhawy@gmail.com"],
    },
        // Interpolate the data in the strings to send
    Message: {
      Body: {
        Text: { 
            Data: `You just got a message from ${senderName} - ${senderEmail}:
            ${message}` 
        },
      },
      Subject: { Data: `Message from ${senderName}` },
    },
    Source: "the.benhawy@gmail.com",
  };

  return ses.sendEmail(params).promise();
};

It's important to note that when API Gateway calls our function it will pass a string to the event body. This is why I use JSON.parse on event.body, to turn it into JSON and extract our sender's email, name, and message. Then I use those variables in the email body text and subject using string interpolation.

If you try the test it, the code will return an error. This is because the test is passing a JSON object to event.body and we are using JSON.parse on JSON, which causes an error in JavaScript.

Sadly, the test editor doesn't allow us to pass strings to the event, so we'll have to test that later from somewhere else.

Step 3: How to Set Up API Gateway

Next, the last AWS service we are going to use is API Gateway, which will enable our browser to send HTTP requests to the Lambda function we created.

Without leaving your lambda function page, expand the "Function overview" section and click on "Add trigger".

Next, choose API Gateway from the dropdown, HTTP API as the API type, "Open" as the security mechanism, and check the CORS checkbox option. Then click "Add".

You should be redirected to the "Configuration" tab of your function, showing you the new API Gateway trigger you just created. From there, note the API endpoint. This is the URL we are going to be calling from our browser with the form data.

Back to the HTML

We can finally test the form to see if it sends emails or not.

Let's modify our JavaScript to handle sending the request when the form is submitted.

const form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  // prevent the form submit from refreshing the page
  event.preventDefault();

  const { name, email, message } = event.target;

    // Use your API endpoint URL you copied from the previous step
  const endpoint =
    "<https://5ntvcwwmec.execute-api.us-east-1.amazonaws.com/default/sendContactEmail>";
  // We use JSON.stringify here so the data can be sent as a string via HTTP
    const body = JSON.stringify({
    senderName: name.value,
    senderEmail: email.value,
    message: message.value
  });
  const requestOptions = {
    method: "POST",
    body
  };

  fetch(endpoint, requestOptions)
    .then((response) => {
      if (!response.ok) throw new Error("Error in fetch");
      return response.json();
    })
    .then((response) => {
      document.getElementById("result-text").innerText =
        "Email sent successfully!";
    })
    .catch((error) => {
      document.getElementById("result-text").innerText =
        "An unkown error occured.";
    });
});

Now, the moment of truth: fill in the form and click submit. If you see the success message, that means the email was sent.

Since I own the email the message was sent to, I take a quick look at my inbox to see that I received an email from myself with the details I used in the form!

If you've followed along, you now have a functioning "Contact Us" form that you can plug into any website. And you'll only get billed for when it is actually used.

I don't know about you, but I think this is pretty awesome and almost magical! And it's a nice, practical way to use cloud computing/services in your workflow.

Of course you can customize this flow in terms of using a framework on the frontend like React or Vue or a different programming language for the Lambda like Python or Go.

Before you go...

Thank you for reading this far! I write posts about JavaScript, cloud development, and my personal educational & professional experiences as a self-taught developer. So feel free to follow me on twitter @adham_benhawy where I tweet about them too!

Resources

• https://aws.amazon.com/premiumsupport/knowledge-center/lambda-send-email-ses/
• https://docs.aws.amazon.com/lambda/latest/dg/lambda-invocation.html
• https://docs.aws.amazon.com/lambda/latest/dg/services-apigateway.html?icmpid=docs_lambda_console