Ajax-powered Contact Form
This snippet is a contact form with Ajax-powered submission.
FormBold Ajax Contact Form Example
Ajax a JavaScript feature that provides easy, cross-browser access the XMLHttpRequest object. This allows you to load data from a server asynchronously. Ajax Contact Form is a free contact form script that you can use to add an online form in your website. This FormBold ajax contact form snippet is compatible with all major browsers and has a built-in spam filter.
<form id="form">
<div>
<input
type="email"
name="email"
id="email"
placeholder="Your Email"
required
/>
</div>
<div>
<input
type="text"
name="subject"
id="subject"
placeholder="Your subject"
required
/>
</div>
<div>
<textarea
name="message"
id="message"
rows="6"
placeholder="Your Message"
required
></textarea>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
<script>
const form = document.querySelector("form");
const result = document.createElement("p");
form.appendChild(result);
form.addEventListener("submit", function (e) {
const formData = new FormData(form);
e.preventDefault();
var object = {};
formData.forEach((value, key) => {
object[key] = value;
});
var json = JSON.stringify(object);
fetch("https://formbold.com/s/unique_form_id", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: json,
})
.then(async (response) => {
let json = await response.json();
result.innerHTML = json.message;
result.style.color = "green";
})
.catch((error) => {
console.log(error);
result.innerHTML = "Something went wrong!";
})
.then(function () {
form.reset();
setTimeout(() => {
result.style.display = "none";
}, 5000);
});
});
</script>