Forms Using Fetch
If you don't want to redirect your form submitters after a submission, FetchAPI is another option we support. Fetch API is similar to XMLHttpRequest but this new API provides powerful features.
JSON Request Using Fetch API
Assuming you have a simple HTML as follows:
<form id="form" action="">
<input type="text" name="name" placeholder="Name" />
<input type="email" name="email" placeholder="Email" />
<button type="submit">Send</button>
</form>Let's make a simple request to submit above HTML formData using FetchAPI:
<script>
var form = document.getElementById("form");
form.addEventListener("submit", formSubmit);
function formSubmit(e) {
e.preventDefault()
const formData = new FormData();
formData.append(
'name',
document.querySelector('input[name="name"]').value
)
formData.append(
'email',
document.querySelector('input[name="email"]').value
)
fetch("https://formzillion.com/f/your-form-id",
{
method: "POST",
body: formData,
})
.then(response => console.log(response))
.catch(error => console.log(error))
}
</script>Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FormZillion - Axios Example</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<form id="form" action="">
<input type="text" name="name" placeholder="Name" />
<input type="email" name="email" placeholder="Email" />
<button type="submit">Send</button>
</form>
<script>
var form = document.getElementById("form");
form.addEventListener("submit", formSubmit);
function formSubmit(e) {
e.preventDefault();
const formData = new FormData();
formData.append("name", document.querySelector('input[name="name"]').value);
formData.append("email", document.querySelector('input[name="email"]').value);
axios({
method: "post",
url: "https://formzillion.com//f/your-form-id",
data: formData,
})
.then((response) => console.log(response))
.catch((error) => console.log(error));
}
</script>
</body>
</html>