Skip to content

Instantly share code, notes, and snippets.

@jbesw
Created June 24, 2019 17:28
Show Gist options
  • Save jbesw/b75a2409521e2ff632dce7c8e07d6d2a to your computer and use it in GitHub Desktop.
Save jbesw/b75a2409521e2ff632dce7c8e07d6d2a to your computer and use it in GitHub Desktop.
Serverless Form Example
<!--
MIT No Attribution
Permission is hereby granted, free of charge, to any person obtaining a copy of this
software and associated documentation files (the "Software"), to deal in the Software
without restriction, including without limitation the rights to use, copy, modify,
merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
v.1.0 - James Beswick (@jbesw) - contact me with any questions!
-->
<!doctype html>
<!-- Template from https://getbootstrap.com/docs/4.3/getting-started/introduction/ -->
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Main form -->
<div class="card">
<div class="card-body">
<h2>My serverless form</h2>
<form action="" method="POST">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="name" class="form-control" id="name" placeholder="Your name">
</div>
<div class="form-group">
<label for="name">Message</label>
<input type="name" class="form-control" id="message" placeholder="Tell us something">
</div>
<h4 id="response"></h4>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script>
(() => {
const form = document.querySelector('form');
const submitResponse = document.querySelector('#response');
const formURL = 'https://a123456789.execute-api.us-east-1.amazonaws.com/Prod/submitForm'; // ENTER YOUR API ENDPOINT HERE
form.onsubmit = e => {
e.preventDefault();
// Capture the form data
let data = {};
Array.from(form).map(input => (data[input.id] = input.value));
console.log('Sending: ', JSON.stringify(data));
// Create the AJAX request
var xhr = new XMLHttpRequest();
xhr.open(form.method, formURL, true);
xhr.setRequestHeader('Accept', 'application/json; charset=utf-8');
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
// Send the collected data as JSON
xhr.send(JSON.stringify(data));
xhr.onloadend = response => {
if (response.target.status === 200) {
form.reset();
submitResponse.innerHTML = 'Form submitted. Success!';
} else {
submitResponse.innerHTML = 'Error! Please try again.';
console.error(JSON.parse(response.target.response).message);
}
};
};
})();
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment