DEV Community

loading...

Contact Form and Send as Email with AWS SES, Netlify and Gatsby

idiglove profile image Faith Morante ・2 min read

This tutorial assumes you have Netlify, Gatsby and AWS SES set up. SES stands for Simple Email Service.

In the page you want to create a contact form, code your UI components like so:

import React, { useState } from 'react'
import { Button, Form, Input } from 'reactstrap'
import axios from 'axios'

export default function Index() {
    const [name, setName] = useState('')
    const [email, setEmail] = useState('')
    const [message, setMessage] = useState('')

    const send = (e) => {
        e.preventDefault()

        axios.post('/.netlify/functions/ses-send-email', {
            name,
            email,
            message
        }).then((res) => {
            console.log(res)
        })
    }

    return (
        <div>
                <Form onSubmit={(e) => send(e)}>
                    Name
                    <Input type="text" required onChange={(e) => setName(e.target.value)} />
                    Email
                    <Input type="email" required onChange={(e) => setEmail(e.target.value)} />
                    Message
                    <Input type="textarea" required onChange={(e) => setMessage(e.target.value)}/>
                    <Button>Send Message</Button>
                </Form>
        </div>
    )
}

Use axios for calling your Netlify function.

In your root dir, create a file named netlify.toml with these inside:

[build]
    functions = "./functions"

Now create a folder and file accordingly
New file

Your sending email function should look like this:

exports.handler = async event => {
  const AWS = require("aws-sdk")

  let requestParams = JSON.parse(event.body)
  let name = requestParams.name
  let email = requestParams.email
  let message = requestParams.message

    AWS.config.update({
        accessKeyId: 'your-aws-access-key-here',
        secretAccessKey: 'your-secret-access-key-here',
        region: 'aws-region-here'
    })

    const ses = new AWS.SES({ apiVersion: "2010-12-01" })
    const params = {
      Destination: {
        ToAddresses: [email] // Email address/addresses that you want to send your email
      },
    //   ConfigurationSetName: <<ConfigurationSetName>>,
      Message: {
        Body: {
          Html: {
            // HTML Format of the email
            Charset: "UTF-8",
            Data:
              `<html>
                  <body>
                    From: ${name}
                    <br />
                    Message: ${message}
                  </body>
              </html>`
          },
          Text: {
            Charset: "UTF-8",
            Data: ""
          }
        },
        Subject: {
          Charset: "UTF-8",
          Data: "From Contact Form"
        }
      },
      Source: email
    }

    return ses.sendEmail(params).promise().then(data => {
        console.log("email submitted to SES", data);
        return {
          statusCode: 200,
          body: `Message sent`,
        }
      })
      .catch(error => {
        console.log(error);
        return {
          statusCode: 500,
          body: `Message unsuccesfully sent, error: ${error}`,
        }
    })
}

And there you go, publish to Netlify or use netlify dev to replicate sending emails on your local machine.

Discussion (6)

pic
Editor guide
Collapse
diegomgar profile image
Dieg Oto

Thank you! I have this task in my to-do right now, sending an email from a lambda :)

Collapse
idiglove profile image
Faith Morante Author

No problem! I knew this is a common task problem. Shoot me a message if you get any blockers, I'll be glad to help :)

Collapse
diegomgar profile image
Dieg Oto

Hi. I'm trying now, it says to me that the email address is not verified. I have a domain with aws and it has been added correctly and verified.
I'm confused with the rule that origin and destination must be verified, so, how can i send an email, for example, to a destination that is inputed by an user in my app?
Thank you.

Thread Thread
idiglove profile image
Faith Morante Author

Hi, yea that happens because you are still in sandbox mode.

Thread Thread
diegomgar profile image
Dieg Oto

Thank you, i didn't notice that. Case open :)

Collapse
ashleynexvelsolutions profile image
ashleynexvelsolutions

You are a lifesaver! Thank you.