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>

Ajax-powered Contact Form

Create a Form to Connect Apps