Examples

This guide outlines various methods for submitting the form.

You can access your form's endpoint by navigating to the following path:
dashboard -> Forms -> "Any Form" -> Setup.

HTML

After clicking Submit the user will be redirected to the default "Thank You" page or a custom URL if configured.

For a detailed overview of potential responses from your form's endpoint, refer to the documentation here.

Remember to include enctype="multipart/form-data" in your form element.
HTML
<form action="{your_form_endpoint}" method="POST" enctype="multipart/form-data">
  <label>
    Email:
    <input type="email" name="email" />
  </label>

  <label>
    Name:
    <input type="text" name="name" />
  </label>

  <label>
    Message:
    <textarea name="message"></textarea>
  </label>

  <label>
    File:
    <input type="file" name="file" />
  </label>

  <button type="submit">Submit</button>
</form>

JSON using JavaScript

For a detailed overview of potential responses from your form's endpoint, refer to the documentation here.

Uploading files isn't supported in JSON.
JavaScript
const data = {
  email: "test@vexrun.com",
  name: "John Doe",
  message: "Hello!",
};

const res = await fetch("{your_form_endpoint}", {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
});

const json = await res.json();
console.log(json);

FormData using JavaScript

For a detailed overview of potential responses from your form's endpoint, refer to the documentation here.

JavaScript
const data = new FormData();
data.append("email", "test@vexrun.com");
data.append("name", "John Doe");
data.append("message", "Hello!");

const file = document.querySelector("input[name=file]").files[0];
data.append("file", file);

const res = await fetch("{your_form_endpoint}", {
  method: "POST",
  headers: {
    Accept: "application/json",
  },
  body: data,
});

const json = await res.json();
console.log(json);

Validation

This example demonstrates how to use built-in browser validation and JavaScript to ensure data integrity before submitting a form.

This example includes custom file size validation, as it's not supported by browsers out of the box.

Used APIs that you might not be familiar with:

The browser supports many attributes that you can use to validate your forms. This article is a great resource to learn more about client-side form validation.
Available attributes: type, required, minlength, maxlength, min, max, pattern.

HTML
<form id="my-form" action="{your_form_endpoint}" method="POST" enctype="multipart/form-data" novalidate>
  <label>
    Email:
    <input type="email" name="email" required maxlength="200" />
  </label>

  <label>
    Name:
    <input type="text" name="name" required minlength="3" maxlength="50" />
  </label>

  <label>
    Message:
    <textarea name="message" required maxlength="5000"></textarea>
  </label>

  <label>
    File:
    <input id="my-file-field" type="file" name="file" required />
  </label>

  <button type="submit">Submit</button>
</form>
JavaScript
const maxFileSize = 10_000_000; // 10 MB

const form = document.querySelector("#my-form");
const fileField = document.querySelector("#my-file-field");

form.addEventListener("submit", async (event) => {
  // Prevents the default form submission behavior
  event.preventDefault();

  const file = fileField.files?.[0];
  if (file && file.size > maxFileSize) {
    fileField.setCustomValidity(`File is larger than ${maxFileSize / 1_000_000} MB.`);
  } else {
    fileField.setCustomValidity("");
  }

  // form.reportValidity will validate all inputs based on their
  // attributes (e.g. required, minlength). Unfortunately it doesn't
  // support validating file size, hence the above code.
  const isValid = form.reportValidity();
  if (isValid === false) {
    return;
  }

  // All fields are valid
  const data = new FormData(form);
  const res = await fetch(form.action, {
    method: "POST",
    headers: {
      Accept: "application/json",
    },
    body: data,
  });

  console.log(await res.json());
});

Introduction

Previous Page

Submission Data Limits

Next Page