Introduction

Submit JSON helps web developers streamline the “submission” half of form submissions. It’s also great at alerting you when a new user signs up, for example.

It notifies you via email, webhooks, and slack and it stays out of your way. The “form” half of the form submission is totally up to you.

The Problem

Let’s face it, coding web forms can be a bit of a drag, but it’s hard to avoid if your goal is a solid user experience. After putting in the effort to build a form, it’s hard to find energy to wire up a submission notification, and good luck finding an elegant solution.

Handling one of these notifications is deceptively simple and way harder than it should be, and that’s where Submit JSON comes in to make your life easier.

The Solution

Submit JSON fits right in with your front or back end making zero assumptions about your markup, validation logic, or user experience.

The REST API simplifies the entire process. Just POST your data to an endpoint, get notified in real time, and move on with your life.

To make things even easier, the JS client lets you submit data with one line of code after configuration. It works in modern browsers and various runtimes like Node.js, Bun, Deno, and Edge Runtime.

Here's a small example using the JS client alongside Vue.js. Simply import submitjson, initialize the client, and submit your data.

<script setup>
import SubmitJSON from 'submitjson'
import { reactive } from 'vue'

const sj = new SubmitJSON({ apiKey: 'sjk_xxx', endpoint: 'XxXxXxXxX' })

const myForm = reactive({
  name: 'Dude',
  message: 'Yo',
})

async function onSubmit() {
  try {
    const data = await sj.submit(myForm)
  }
  catch (error) {
    alert(error)
  }
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input v-model="myForm.name" name="name">
    <input v-model="myForm.message" name="message">
    <button type="submit">
      Submit
    </button>
  </form>
</template>