#✅ - AWS amplify contact form

7 messages · Page 1 of 1 (latest)

red lodge
#

Hey I'm building a web app and I would like to have a contact me page.

On this page, the user will fill in a form and input their email. I want it that when they click the button, it sends an email to my adress, with the message and object etc.

Whats the best way to do that please ?

silent raft
#

Hi @red lodge Unfortunately we don't have an example in our docs for this specifc use case. But, the best way I can think to achieve this would be to use SES.

If you're working with Amplify Gen 2 you should be able to do something like this:

// backend.ts
import { defineBackend, defineFunction } from "@aws-amplify/backend";
import { auth } from "./auth/resource";
import { data } from "./data/resource";
import { PolicyStatement } from "aws-cdk-lib/aws-iam";

// Define the Lambda function that will send emails
const sendEmailFunction = defineFunction({
  name: "sendEmail",
  entry: "src/sendEmail.handler",
});

const backend = defineBackend({
  auth,
  data,
  sendEmailFunction, // Add the function to your backend
});

backend.sendEmailFunction.resources.lambda.addToRolePolicy(
  new PolicyStatement({
    actions: ["ses:SendEmail", "ses:SendRawEmail"],
    resources: ["*"], // You might want to restrict this to specific ARNs in production
  })
);
# 
// amplify/functions/sendEmail/handler.ts
import { SESClient, SendEmailCommand } from "@aws-sdk/client-ses";

const ses = new SESClient({});

export const handler = async (event: any) => {
  try {
    const { name, email, message } = JSON.parse(event.body);

    const params = {
      Destination: {
        ToAddresses: ["your-verified-email@example.com"], // Replace with your verified email
      },
      Message: {
        Body: {
          Text: {
            Data: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
          },
        },
        Subject: {
          Data: "New Contact Form Submission",
        },
      },
      Source: "your-verified-email@example.com", // Replace with your verified email
    };

    await ses.send(new SendEmailCommand(params));

    return {
      statusCode: 200,
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
      },
      body: JSON.stringify({ message: "Email sent successfully" }),
    };
  } catch (error) {
    console.error("Error sending email:", error);
    return {
      statusCode: 500,
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
      },
      body: JSON.stringify({ message: "Error sending email" }),
    };
  }
};
#

in your frontend app, you'd do something like:

import { post } from 'aws-amplify/api';

async function submitContactForm(formData: {name: string, email: string, message: string}) {
  try {
    await post({
      apiName: 'sendEmail',
      path: '/',
      options: {
        body: formData
      }
    });
    // Handle success
  } catch (error) {
    // Handle error
  }
}
red lodge
#

ok I see, so I create a function in the backend using the SES api, that sends the email. sounds good ! thank you 🙂

silent raft
#

no problem! happy to help 🙂

storm helmBOT
#

✅ - AWS amplify contact form