> ## Documentation Index > Fetch the complete documentation index at: https://cloud-architect.ipoint-labs.com/llms.txt > Use this file to discover all available pages before exploring further. # Creating Serverless Contact Forms with AWS > Hands-on lab · 45m Launch this lab in the IP Lab Portal, then follow the steps below in the AWS console. Open IP Lab Portal ## Overview #### Project Details 1. This project provides a guide on creating a contact form and receive email notifications when a form is completed and submitted. 2. Duration: **1 Hour** 3. AWS Region: **US East (N. Virginia) us-east-1** #### Introduction #### What is a Serverless in AWS? 1. Serverless computing abstracts away the infrastructure management tasks such as server provisioning, maintenance, and scaling. Developers do not need to worry about server operations. 2. Services like AWS Lambda automatically scale based on the incoming workload. They can handle any scale of traffic, from a few requests per day to thousands per second, without manual intervention. 3. With serverless architectures, you pay only for the compute resources consumed by your application or function. There are no upfront costs or charges for idle capacity, which can lead to cost savings, especially for sporadic workloads. 4. Serverless applications are typically event-driven, responding to triggers such as HTTP requests, database modifications, file uploads, etc. AWS Lambda functions, for example, execute in response to events without needing to be continuously running. 5. AWS provides managed services like AWS Lambda, API Gateway, DynamoDB, S3, etc., which handle operational aspects such as patching, scaling, and availability. Developers can focus more on application logic rather than infrastructure management. #### Architecture Diagram

#### Task Details 1. Sign into the AWS Management Console 2. Create an Email Identity using SES 3. Verify the Email address 4. Create a Lambda Function 5. Create a new API 6. Create a Resource 7. Create a Method 8. Deploy the API 9. Test Contact form #### Launching Project Environment 1. To launch the project environment, Click on the **Start Project** button. 2. Please wait until the cloud environment is provisioned. It will take less than a minute to provision. 3. Once the Project is started, you will be provided with **IAM user name, Password, Access Key, and Secret Access Key**. > **Note :** You can only start one project at any given time ## Lab guide #### Project Steps #### Task 1: Sign in to AWS Management Console 1. Click on the **Open Console** button, and you will get redirected to AWS Console in a new browser tab. 2. On the AWS sign-in page, * Leave the Account ID as default. Never edit/remove the 12-digit Account ID present in the AWS Console. otherwise, you cannot proceed with the project. * Now copy your **User Name** and **Password** in the Project Console to the **IAM Username and Password** in AWS Console and click on the **Sign in** button. 3. Once Signed In to the AWS Management Console, Make the default AWS Region as **US East (N. Virginia) us-east-1**. #### Task 2: Create an Email Identity using SES 1. Make sure you are in the **US East (N. Virginia) us-east-1** Region. 2. Navigate to the **Services** menu at the top. Click on **Amazon Simple Email Service** in the **Business Application** section. 3. On the left side menu, Select **Identities** 4. Click on **Create Identity** button.

5. Enter following details: * Identity type: Select **Email Address** * Email address: **Enter your valid Sender Email ID**. * **Leave other options as default**. * Click on **Create Identity** button.

6. Similarly create another identity for receiver email 7. Create on Create Identity button. 8. Enter following details: * Identity type: Select **Email Address** * Email address: **Enter your valid Reveiver Email ID**. * **Leave other options as default**. * Click on **Create Identity** button. 9. Now you will be able to see that the Identity Status on the Email will be Verification Pending.

#### Task 3: Verify the Email Address 1. AWS will send a confirmation email to the email that you provided in the above step. 2. Log in to your Sender mailbox and you will be able to see a mail from Amazon Web Services.

3. Once you click on the **link**, you will be routed to the success page.

4. Similarly Verify the **Receiver’s** mail also. 5. Now go to the **SES Email Address page** and **refresh the page**. You will be able to see the Verification status as **Active**.

#### Task 4: Create a Lambda Function 1. Navigate to the **services** menu at the top, then click on **Lambda** under the **Compute** section. 2. Click on the **Create a function** button. * Choose: **Author from scratc**h. * Function name: Enter **WhizFunction** * Runtime: Select **Node.js 22.x** * Click on **Additional Settings**, then **Enable** Custom execution role option. * Choose the Role name as **Whiz Lambda Role** from the list. Click on **Save**.

3. Click on **Create function** button.

4. Download the Zip file using this [Link](https://labresources.whizlabs.com/bdf15dccbcea5cc18db509f6f8796c2e/whizlabsfiles.zip) and extract the zip file locally. You will see one **node.js** file and one **html** file for contact form. 5. If you scroll down a little bit, you can see the **Code source** section. Here we need to copy paste the NodeJs code that uses the AWS SDK to send an email via Amazon SES (Simple Email Service). 6. It parses the incoming event's body to extract information such as the sender's name, email, and message, then constructs and sends an email containing this information. The function handles success and error cases, returning appropriate HTTP status codes and messages. 7. Remove the existing code in AWS lambda index.js. Copy Paste the node.js code into your lambda index.js file. 8. You need to change the **sender** and **receiver email address** in the index.js file **line number 4 & 5**. 9. Save the function by clicking on **Deploy** button.

#### Task 5: Create an API 1. Navigate to the services menu at the top, then click on **API Gateway** in the **Network and Content Delivery** section. 2. Click on **Build** in REST API.

3. Choose to create a **new API** as New API. Under settings, choose the API name **WhizlabAPI**. Leave other options as default and click on **Create API**

#### Task 6: Creating a Resource 1. Once the API is created, select the API. 2. Select **Create Resource** in actions. 3. Resource Name: Enter **whizlabs** 4. **Check** CORS (Cross Origin Resource Sharing) 5. Enter the resource name and click on **Create Resource** button

#### Task 7: Creating a Method 1. Once you create a resource, click on **Create Method**.

2. Select **POST** in the drop-down list of **Method Type**. 3. Select the Integration Type as **Lambda function**. 4. **Check** Lambda proxy integration 5. Enter the Lambda Function as **WhizFunction**. Click on **Create Method**

#### Task 8: Deploy the API 1. Once the resource and the method have been created successfully, you can deploy the API. 2. Click on **Deploy API** button. 3. Select the Deployment Stage in the drop-down as **New Stage**. 4. Enter Stage Name: **TestingAPI** and Stage description as **Testing environment for my WhizlabsAPI**. 5. Click on **Deploy**.

6. Once the API has been deployed, navigate to **Stages**. You will be able to see the following

7. Copy the **Invoke URL** as mentiond in GIF and save it to any text editor to be used in contact form page which will look similar to : **[https://kvzhh540yd.execute-api.us-east-1.amazonaws.com/TestingAPI/whizlabs](https://kvzhh540yd.execute-api.us-east-1.amazonaws.com/TestingAPI/whizlabs)** 8. Now, to **Enable the cors** click on **Resources** in the left menu and click on **whizlabs** resource, Now click on **Enable CORS** button

9. Select **POST** method in **Access-Control-Allow-Methods** checkbox and click on **Save** button.

#### Task 9: Test Contact form 1. Open the **contactform.html** file in any text editor in your local. 2. This page includes a form for users to input their name, email, and message. When the form is submitted, the submitToAPI JavaScript function sends the input data as a JSON object to a specified API endpoint using an AJAX POST request. Upon successful submission, the user is alerted, the form is reset, and the page reloads. If there's an error, an alert displays the error details. 3. Now update the invoke url in line number **92** with the invoke url you copied

4. Save the file and open the html document in browser. This will display the created contact form. 5. Enter the details : * Name: Enter * Email : Enter **Receiver** Email * Message : Enter your **message** 6. Click on **Send Message** button.

7. It will return the success message.

8. You can verify the mail in your receiver mail ID.

> **Do You Know?** > Serverless websites can automatically scale to handle millions of requests, ensuring high availability without the need for manual intervention. This architecture allows developers to focus solely on code, as server management is handled by cloud providers like AWS, resulting in faster deployment and reduced operational costs. #### Completion and Conclusion 1. You have successfully created and verified Email Identity. 2. You have successfully created a lambda function. 3. You have successfully created and deployed your api gateway. 4. You have successfully Tested your serverless contact form website. #### End Project 1. Sign out of AWS Account. 2. You have successfully completed the project. 3. Once you completed the steps, click on **End Project** from the IP Lab Portal project console and wait till the process gets completed. ## What gets checked When you press **Check my work**, the platform verifies each of these: * **Create a SES Email Identity** — Check whether an SES Email Identity is created or not * **Check SES Email Identity Verification Status** — Check whether an SES Email Identity is Email is verified or not * **Create an AWS Lambda Function** — Check whether a Lambda Function is created or not * **Create an AWS REST API Gateway with CORS enabled** — Check whether a REST API Gateway is created with CORS enabled or not ## Related help * [FAQs and Troubleshooting](/aws-saa/support/faqs-and-troubleshooting) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.