4 ways to submit forms: HTML, AJAX, iframe, and API

FormBlade accepts submissions via standard POST requests. That means you can use it from a plain HTML form, a JavaScript fetch call, an iframe embed, or any HTTP client. Here's how each method works and when to use it.

1. HTML form (classic)

The simplest approach. The browser handles everything — no JavaScript needed.

<form action="https://formblade.com/f/contact" method="POST">
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

After submission, the user is redirected to a thank-you page (or back to your site if you set a redirect URL in form settings).

File uploads: add enctype="multipart/form-data" to the form tag and include <input type="file"> fields.

2. AJAX / fetch (no page reload)

Submit with JavaScript to stay on the same page. Show a success message, reset the form, or trigger animations — all without a redirect.

With JSON

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));

  const res = await fetch('https://formblade.com/f/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });

  if (res.ok) {
    form.reset();
    alert('Thank you!');
  }
});

With FormData (supports file uploads)

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  const res = await fetch('https://formblade.com/f/contact', {
    method: 'POST',
    body: new FormData(form),  // sends as multipart — files included
  });

  const json = await res.json();
  console.log(json); // { ok: true, message: "Submission received" }
});

Tip: When sending JSON, FormBlade responds with JSON. When sending form data via AJAX (with X-Requested-With: XMLHttpRequest header or JSON content type), it also responds with JSON instead of redirecting.

3. iframe embed

Embed your FormBlade hosted form in an iframe on any page. The form renders with its own styling and submits independently — the parent page doesn't reload.

<iframe
  src="https://formblade.com/f/contact"
  style="width:100%;min-height:500px;border:none;border-radius:12px"
  loading="lazy"
></iframe>

This uses the hosted form — the one configured in the Form Designer. The user fills in the form inside the iframe. After submission, the thank-you page shows inside the iframe, and the parent page stays put.

When to use: embedding on sites where you can't add your own CSS or JavaScript (wikis, CMS blocks, third-party pages).

4. API (server-to-server)

Send submissions from your own backend — a Node.js server, a Python script, a cron job, or any HTTP client.

curl

curl -X POST https://formblade.com/f/contact \
  -H "Content-Type: application/json" \
  -d '{"email":"user@example.com","message":"Hello"}'

Node.js

await fetch('https://formblade.com/f/contact', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'user@example.com' }),
});

Python

import requests

requests.post("https://formblade.com/f/contact", json={
    "email": "user@example.com",
    "message": "Hello from Python",
})

Every field you include in the JSON body becomes a column in your submissions table. There's no schema to define — just send key-value pairs.

Which should you pick?

• HTML form if you want zero JavaScript and the simplest setup.
• AJAX if you want a custom success message or need to stay on the same page.
• iframe if you're embedding on a site you don't control.
• API if you're sending data from a backend or automation tool.

All four methods send data to the same endpoint. You can mix them — use HTML on a landing page and AJAX on your React app, pointing at the same form.