I have previously written about building a simple static website and deploying it to Github pages.

What if you would like to have a functional “contact us” page with customizable fields and sending emails or SMS messages to your inbox?

In this tutorial, we’ll walk through deploying a simple static webpage that includes a “Contact Us” form. The form will allow users to send a message directly to your phone using AWS Amplify for hosting and AWS SMS, API Gateway, and SNS for managing the contact requests.

Step 1: Create the AWS Backend for the Form

First we’ll set up the backend to handle form submissions using AWS API Gateway, AWS SNS, and AWS SMS.

  1. Create an SNS Topic:
    • Navigate to the SNS Console.
    • Create a new SNS topic (e.g., contact-us-messages).
    • Subscribe your phone number to the topic by selecting Create Subscription and choosing SMS as the protocol. Enter your phone number to receive text messages.
  2. Create an API Gateway Endpoint:
    • Navigate to the API Gateway Console and create a new REST API.
    • Create a new resource called /contact under the root API.
    • Add a POST method for the /contact resource.
    • In the method integration, choose Lambda Function.
    • Make sure to enable CORS:
      • your static app requires API gateway CORS configurations to be allowed to send request to the AWP api gateway
      • Enable CORS configurations
      • Make sure to:
        • allow all heathers: *
        • or to explicitly allow the headers used in the JavaScript we will use to submit the form. In our example, we will need to allow Content-Type
      • add your Amplify static app URL as allowed origin
        • And allow temporarily http://localhost:4000 so you can test form submissions.
  3. Create a Lambda Function:
    • Create a new Lambda function that will process the form data and publish it to the SNS topic.
    • Use the following Lambda function code (make sure the Lambda has permissions to publish to SNS):
const AWS = require('aws-sdk');
const sns = new AWS.SNS();

exports.handler = async (event) => {
    const body = JSON.parse(event.body);
    const { name, email, message } = body;

    const messageBody = `New contact message from ${name} (${email}):\n\n${message}`;

    const params = {
        Message: messageBody,
        TopicArn: 'arn:aws:sns:region:account-id:contact-us-messages',
    };

    try {
        await sns.publish(params).promise();
        return {
            statusCode: 200,
            body: JSON.stringify({ message: 'Message sent successfully!' }),
        };
    } catch (error) {
        return {
            statusCode: 500,
            body: JSON.stringify({ message: 'Failed to send message' }),
        };
    }
};

Make sure to replace ‘arn:aws:sns:region:account-id:contact-us-messages’ with the actual ARN of your SNS topic.

  1. Deploy the API:
    • Deploy the API Gateway to a new stage (e.g., prod).
    • Take note of the endpoint URL generated for the /contact resource, which will be used in the JavaScript file on the front-end.

Step 2: Create the Contact Us Form

Let’s modify your static website creating a simple “Contact Us” form:

  1. HTML Form: Add a simple HTML form in your index.html file:
<form id="contact-form" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="4" required></textarea><br><br>

  <input type="submit" value="Send Message">
</form>

This form will collect the user’s name, email, and message.

  1. JavaScript for Submission: Create a JavaScript file (form-submit.js) that will handle form submission and send the data to an AWS API Gateway endpoint:
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;

  const response = await fetch('https://your-api-id.execute-api.region.amazonaws.com/contact', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ name, email, message }),
  });

  if (response.ok) {
    alert('Your message has been sent!');
  } else {
    alert('There was an error sending your message.');
  }
});

Make sure to replace https://your-api-id.execute-api.region.amazonaws.com/contact with the actual URL of your AWS API Gateway endpoint.

Step 3: Set Up AWS Amplify for Hosting

AWS Amplify is a fully managed service that enables easy hosting of static websites with fast and secure delivery. Follow these steps to set up Amplify hosting for your static web page:

  1. Sign in to AWS: Go to the AWS Management Console and sign in to your account.
  2. Create an Amplify App:
    • Navigate to the Amplify Console.
    • Click Create App and choose Host Web App.
    • You could Select your code repository (GitHub, GitLab, Bitbucket, or manual upload) but to keep it simple, select the option to Deploy without Git
  3. Prepare a build zip file and deploy:
    • create a .zip file containing your static website’s file, making sure that index.html is not under a folder within this zip file.
    • Navigate to the Amplify Console and clion on your app
    • click on Deploy updated
    • drag your zip file into the Drag and drop panel
    • click Save and Deploy

After a few seconds, your website will be live and accessible through an AWS-provided URL.

You can also configure a custom domain and TLS/SSL for the website, but that will be a topic for another day.

Step 4: Testing your form

Now, test the form by submitting a message from your website. If everything is set up correctly, the message should trigger a text to your phone via SNS.

  • Follow Step 1’s instructions on “Prepare a build zip file and deploy”.
  • Submit a test message from the form.
  • Check if you receive the SMS on your phone with the contact details.

You’ve now built and deployed a simple static web page with a “Contact Us” form that uses AWS Amplify for hosting, API Gateway for routing form submissions, Lambda for processing the form data, and SNS for sending the message via SMS. This approach leverages serverless architecture, ensuring scalability, low costs, and minimal infrastructure management.

Feel free to extend this solution by adding more advanced features like email notifications, automated replies, or integrating it with a CRM system.