TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

Simple Form Submit

Submit your form data with a simple JavaScript call.

npm Version  View project on GitHub  Deploy Status  Sponsor


Read the official documentation.


Submits both <form/> element and FormData using the Fetch API with a single JS call. Submitting forms couldn't be easier!

Uses the Fetch API. Support for additional Fetch API options, such as form method (POST, GET), headers, CORS modes, etc. Defaults to POST.

Returns a Promise for handling response or error with then() and catch().

Features include:

  • 📃 Submit form data quickly and easily
    • Just a simple call. Submitting forms couldn't be easier!
  • Supports both <form/> element and FormData
    • Submit your forms your way.
  • 👍 Uses basic fetch API config with optional customization
    • Use the default POST configuration, or customize the call to your heart's content.


I hope this project makes your life a little easier! If it does and you'd like to show your appreciation, consider supporting the project with a coffee or sponsorship.

Your support helps keep the project going and will earn you some serious virtual high fives. Maybe even a virtual fist bump if you're feeling extra cool.

Sponsor via GitHub Buy me a coffee Buy me 3 coffees Buy me 5 coffees

Table of Contents


npm i simple-form-submit

Quick Start

You can either:

  • Submit a <form/> element using SimpleFormSubmit.submitForm(actionUrl, form)
  • Submit FormData (see docs) using SimpleFormSubmit.submitFormData(actionUrl, formData). This is useful if you want to build form data manually or transform the form data before sending.

Both functions return a Promise so you can handle success/failure cases.

This library uses the Fetch API to make requests.


We want to use JavaScript to send data for this simple form when it's submitted:

Example Form

<form id="example-form" onSubmit="handleSubmit(e)">
  <div>Email: <input name="email" /></div>
  <div>Message: <input name="message" /></div>

Submitting using a <form/> element

We can submit the <form/> element itself to any URL, like so:

import SimpleFormSubmit from "simple-form-submit";

const handleSubmit = (e) => {

  const formActionUrl = "";
  const form = document.getElementById("example-form");

  SimpleFormSubmit.submitForm(formActionUrl, form)
    .then((response) => {
      console.log("Response:", response);
    .catch((err) => {
      console.log("Error:", err);

Submitting using a FormData object

You can also submit using a FormData object. This allows you to modify the form data before sending.

You can use new FormData(form) to extract the form data from an existing form. (Or, if you want, you can manually build your own FormData object.)

For example:

import FormData from "form-data";

const formActionUrl = "";
const formData = new FormData(document.getElementById("example-form"));

// Transform the data here if you'd like.
formData.set("email", formData.get("email").toLowerCase());
formData.append("date", new Date().toString());

SimpleFormSubmit.submitFormData(formActionUrl, formData)
  .then((response) => {
    console.log("Response:", response);
  .catch((err) => {
    console.log("Error:", err);

Fetch Options

You can specify the method (GET or POST), mode (such as no-cors), headers, and other Fetch API options if you'd like. The default method is POST.

const formActionUrl = "";
const form = document.getElementById("example-form");

// You can specify any Fetch API options here.
const fetchOptions = {
  // method: "GET",
  // mode: "no-cors",
  // ...

SimpleFormSubmit.submitForm(formActionUrl, form, fetchOptions)
  .then((response) => {
    console.log("Response:", response);
  .catch((err) => {
    console.log("Error:", err);


Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.


Open source software is awesome and so are you. 😎

Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.

For major changes, open an issue first to discuss what you'd like to change.

Found It Helpful? Star It!

If you found this project helpful, let the community know by giving it a star: 👉



Package Sidebar


npm i simple-form-submit

Weekly Downloads






Unpacked Size

61.8 kB

Total Files


Last publish


  • justinmahar