Submit JSON's JavaScript Client works in all modern browsers and weighs around 2kb minified.
You can use Submit JSON directly from a CDN via a script tag. Here we are using unpkg, but you can also use any CDN that serves npm packages. Of course, you can also download the file and serve it yourself:
https://unpkg.com/submitjson/dist/index.js
🙅🏻♀️ 🧇 Enough waffling, here's a quick example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Form Submission</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script type="module">
import SubmitJSON from 'https://unpkg.com/submitjson/dist/index.js'
const sj = new SubmitJSON({ apiKey: 'sjk_xxx', endpoint: 'XxXx' })
document.getElementById('myForm').addEventListener('submit', async function (e) {
e.preventDefault();
try {
const formData = new FormData(this);
// Submit your data & get notified in real time
// * The JS client accepts JSON, as well as FormData
const submission = await sj.submit(formData)
console.log('Submitted data:', submission)
} catch (error) {
console.error('There was a problem with the fetch operation:', error);
}
});
</script>
</body>
</html>
This example is all Vanilla baby. A great choice if 2kb takes up too much memory in your project. No dependencies, just good old fashioned HTML with the native fetch api. Make sure to reference the Submit JSON API Docs when setting up your submission.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Form Submission</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', async function (e) {
e.preventDefault();
try {
const formData = new FormData(this);
const data = Object.fromEntries(formData)
// replace XxXx with your endpoint slug
const response = await fetch(`https://api.submitjson.com/v1/submit/XxXx`, {
method: 'POST',
headers: {
'content-type': 'application/json', // required
'X-API-Key': 'sjk_xxx', // 🚨 Don't forget your API key!
},
body: { data }, // body must be an object w/ the "data" property
})
if (!response.ok) {
throw new Error('Network response was not ok');
}
const submission = await response.json()
console.log('Submitted data:', submission)
} catch (error) {
console.error('There was a problem with the fetch operation:', error);
}
});
</script>
</body>
</html>