Form Integration

Ajax-powered Contact Form

Effortlessly integrate Ajax-powered contact forms into your website. No page reloads required, just smooth and instant submissions powered by FormBold’s API endpoint.

Ajax Contact Form with Backend API

Set up a functional Ajax contact form on your site with zero backend code. Simply embed the unique FormBold API endpoint into your Ajax form, and you're ready to start collecting form submissions instantly.

ajax.html

<form id="contact-form" class="flex flex-col gap-4 max-w-[452px] mx-auto">
  <!-- Email Address -->
  <div class="flex flex-col gap-2">
    <label for="email" class="text-sm font-medium text-gray-700">
      Email Address<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="email"
      name="email"
      id="email"
      placeholder="Enter your email"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Subject -->
  <div class="flex flex-col gap-2">
    <label for="subject" class="text-sm font-medium text-gray-700">
      Subject<span class="ml-0.5 text-red-500">*</span>
    </label>
    <input
      type="text"
      name="subject"
      id="subject"
      placeholder="Enter your subject"
      required
      class="max-h-11 w-full rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    />
  </div>

  <!-- Message -->
  <div class="flex flex-col gap-2">
    <label for="message" class="text-sm font-medium text-gray-700">
      Message<span class="ml-0.5 text-red-500">*</span>
    </label>
    <textarea
      name="message"
      id="message"
      rows="5"
      placeholder="Type your message..."
      required
      class="w-full resize-y rounded-xl border border-gray-300 bg-white px-4 py-3 text-base text-gray-900 transition-all placeholder:text-[#9ca3af] focus:border-[#5750f1] focus:ring-4 focus:ring-[#5750f1]/10 focus:outline-none"
    ></textarea>
  </div>

  <!-- Submit Button -->
  <button
    type="submit"
    id="submit-btn"
    class="flex h-12 w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-[#111827] px-5 py-3 text-base font-medium text-white shadow-xs transition-all hover:bg-black active:scale-[0.99] disabled:opacity-50"
  >
    Submit Message
  </button>

  <p id="form-status" class="hidden rounded-xl p-3 text-center text-sm font-medium"></p>
</form>

<script>
  const form = document.getElementById("contact-form");
  const submitBtn = document.getElementById("submit-btn");
  const statusEl = document.getElementById("form-status");

  form.addEventListener("submit", async function (e) {
    e.preventDefault();
    submitBtn.disabled = true;
    submitBtn.textContent = "Submitting...";

    const formData = new FormData(form);
    const json = JSON.stringify(Object.fromEntries(formData));

    try {
      const response = await fetch("https://formbold.com/s/FORM_ID", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: json,
      });

      const result = await response.json();
      statusEl.classList.remove("hidden");
      if (response.ok) {
        statusEl.className = "rounded-xl p-3 text-center text-sm font-medium bg-emerald-50 text-emerald-700";
        statusEl.textContent = result.message || "Message sent successfully!";
        form.reset();
      } else {
        statusEl.className = "rounded-xl p-3 text-center text-sm font-medium bg-red-50 text-red-700";
        statusEl.textContent = result.message || "Something went wrong!";
      }
    } catch (error) {
      statusEl.classList.remove("hidden");
      statusEl.className = "rounded-xl p-3 text-center text-sm font-medium bg-red-50 text-red-700";
      statusEl.textContent = "Error submitting form.";
    } finally {
      submitBtn.disabled = false;
      submitBtn.textContent = "Submit Message";
      setTimeout(() => statusEl.classList.add("hidden"), 4000);
    }
  });
</script>

How it works

See How It Works

Setting up an Ajax-powered form with FormBold is fast and simple. No complex configurations or backend setups are needed.

Create an Account

Generate your unique API endpoint URL by signing up for FormBold.

Embed the Action URL

In your Ajax form, replace the action URL with your FormBold endpoint.

Start Receiving Submissions

All form submissions will be delivered directly to the dashboard, email, inbox, or any connected apps.

Features

Key Features of FormBold

FormBold enables your Ajax-powered forms with advanced backend capabilities while keeping the process code-free and simple.

No Backend Required

Works perfectly with Ajax forms—no server setup, scripting, or backend code required.

Instant Email Notifications

Get form submissions sent instantly to your inbox or connected apps.

Spam Protection Built-In

Google reCAPTCHA and server-side validation help protect your form from bots and spam.

File Upload Support

Allow users to upload files, and FormBold will provide secure CDN links for every uploaded file.

Connect to 5+ Apps

Seamlessly integrate with apps like Slack, Notion, Sheets, Telegram, and more—no coding required.

FAQ's

Frequently Asked Questions

Here are answers to common questions about using FormBold with Ajax-powered contact forms.

Simply use the FormBold API endpoint in your Ajax form's action attribute. Set the method to POST, and you're ready to go!