Skip to content

Instantly share code, notes, and snippets.

@pbzona pbzona/index.html
Last active Feb 28, 2018

What would you like to do?
Serverless contact form with reset on submission
<!DOCTYPE html>
<title>My Contact Form Microservice</title>
/* It's not pretty, but it'll do :) */
textarea {
display: block;
margin: 20px;
<form id="serverless-contact-form">
<input type="text" name="email" placeholder="Email Address" class="form-email">
<input type="text" name="subject" placeholder="Subject" class="form-subject">
<textarea rows="5" cols="40" name="message" placeholder="Your message here..." class="form-message"></textarea>
<input type="submit" name="submit" value="Submit" class="form-submit">
<script type="text/javascript">
// Adds an event listener to our form. When the form is submitted, it will send data to our Lambda function, which in turn, will send us an email.
document.getElementById('serverless-contact-form').addEventListener('submit', sendDataToLambda);
// Now for the good stuff. This is the function that will send our data to AWS.
function sendDataToLambda(e) {
// Gets the values of each field in our form. This is the data we'll send to our Lambda function.
var formEmail = document.querySelector('.form-email').value;
var formSubject = document.querySelector('.form-subject').value;
var formMessage = document.querySelector('.form-message').value;
// This is the endpoint we created in our API Gateway. This is where we make our POST request, which calls our Lambda function.
var endpoint = '';
// Remember those form values we just grabbed? We're going to put them into an object here.
var body = {
email: formEmail,
subject: formSubject,
message: formMessage
// Here, we instantiate our Request. This is a special object used by the Fetch API so it knows where to send data, what data to send, and how to send it.
var lambdaRequest = new Request(endpoint, {
method: 'POST',
// Quick note: 'no-cors' mode is for development on localhost only!
mode: 'no-cors',
body: JSON.stringify(body)
// Call the Fetch API to make our request
// This is where you can handle errors. This is just an example, so we won't cover that.
.then(response => console.log(response))
.catch(err => console.log(err));
// !!! This line resets the form after submitting. Previously, we called e.preventDefault() to
// keep the submitted data from being added to the URL as a query string, but it has a side effect
// of preventing a page reload (which would clear the form by default). Add this line if you want
// to reset the form on submission
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.