JavaScript

JavaScript is a high-level, versatile programming language primarily used to create dynamic and interactive features on websites. It is a core technology of the web, alongside HTML and CSS, and enables both client-side and server-side development.

Prerequisites

Before you begin, make sure you have:

A Basestack Forms account
A JavaScript project with a form component

Quick Setup Guide

Follow these steps to submit form data using JavaScript:

Choose your HTTP client

You can use any HTTP client library to send form data to Basestack Forms. Popular options include:

Fetch API - Built into modern browsers, no installation needed
Axios - Popular HTTP client library with additional features
Any other HTTP client that supports POST requests

Make sure to include mode=rest in your endpoint URL query string to receive responses in JSON format. This allows you to handle the response programmatically.

Implement form submission

Copy the example code below into your JavaScript file and customize it for your form structure. The example uses the Fetch API, but you can adapt it to use Axios or any other HTTP client.

script.js

try {
  const res = await fetch(
    "https://forms-api.basestack.co/v1/s/[KEY]?mode=rest",
    {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ name: "John Doe", message: "Hello World" }),
    },
  );

  const data = await res.json();

  if (data.code === 200) {
    console.log("Form submitted successfully");
  }
} catch (error) {
  console.log("Error submitting form", error);
}

Attaching files

File uploads must be enabled in Settings → General first (off by default on new forms). To send files, swap the JSON body for a FormData object. The browser sets the correct multipart/form-data Content-Type header (including the boundary) for you → do not set Content-Type yourself, or the request will fail.

Each file must be 1 MB or smaller, and a single submission may include at most 5 files. The server returns HTTP 413 if either limit is exceeded. See File Uploads → for full details.

Simple example: single file

Pull the file from an existing <input type="file" id="resume"> and send it alongside text fields:

single-file.js

try {
  const formData = new FormData();
  formData.append("name", "John Doe");
  formData.append("email", "[email protected]");
  formData.append("message", "Resume attached.");

  const resumeInput = document.querySelector("#resume");
  const resume = resumeInput?.files?.[0];
  if (resume) {
    formData.append("resume", resume);
  }

  const res = await fetch(
    "https://forms-api.basestack.co/v1/s/[KEY]?mode=rest",
    {
      method: "POST",
      headers: { Accept: "application/json" },
      // Do NOT set Content-Type → the browser sets the boundary automatically.
      body: formData,
    },
  );

  const data = await res.json();

  if (data.code === 200) {
    console.log("Form submitted successfully");
  } else if (data.code === 413) {
    console.warn("Upload too large:", data.message);
  }
} catch (error) {
  console.log("Error submitting form", error);
}

Complex example: multiple files with client-side validation

When you accept several files, it's worth validating size and count on the client so the user gets a clear error before paying for a round-trip. The server still enforces the same limits as a safety net.

multi-file.js

const MAX_FILE_SIZE = 1 * 1024 * 1024; // 1 MB
const MAX_FILES = 5;

async function submitApplication(form) {
  const portfolio = Array.from(form.portfolio.files ?? []);

  // Pre-flight check: reject early if the user picked too much.
  if (portfolio.length > MAX_FILES) {
    alert(`You can attach at most ${MAX_FILES} files.`);
    return;
  }
  const oversized = portfolio.find((file) => file.size > MAX_FILE_SIZE);
  if (oversized) {
    alert(`"${oversized.name}" exceeds the 1 MB limit.`);
    return;
  }

  const formData = new FormData();
  formData.append("full_name", form.full_name.value);
  formData.append("email", form.email.value);
  for (const file of portfolio) {
    // Re-using the same field name uploads each file under "portfolio[]"
    formData.append("portfolio", file);
  }

  const res = await fetch(
    "https://forms-api.basestack.co/v1/s/[KEY]?mode=rest",
    {
      method: "POST",
      headers: { Accept: "application/json" },
      body: formData,
    },
  );

  const data = await res.json();
  if (data.code === 200) {
    form.reset();
    alert("Application submitted!");
  } else {
    alert(data.message ?? "Submission failed.");
  }
}