Vanilla JS

The formtress-js npm package gives you full control over form submissions in any JavaScript project — React, Svelte, Vue, plain HTML, or anything else.

Install

Install the Formtress package:

npm

npm install formtress-js

pnpm

pnpm add formtress-js

yarn

yarn add formtress-js

bun

bun add formtress-js

Basic usage

Set the form action so it works without JavaScript:

<form id="my-form" action="https://app.formtress.com/api/f/your-form-id" method="POST">
  <!-- your fields -->
</form>

Then progressively enhance it:

import { submitForm } from 'formtress-js'

const form = document.querySelector('#my-form')

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

  const result = await submitForm({
    url: form.action,
    data: new FormData(form),
  })

  if (result.ok) {
    // Show your own success UI
  } else {
    // Show error state: result.message, result.status
  }
})

API

submitForm(options)

Parameter	Type	Required	Description
url	string	Yes	The form’s action URL (your Formtress submit endpoint).
data	FormData	Yes	The form data to submit.

Returns: Promise<{ ok: boolean; message?: string; status?: number }>

Field	Type	Description
ok	boolean	true if the submission was accepted.
message	string	Error message from the server (only present when ok is false).
status	number	HTTP status code from the server.

Example with error handling

import { submitForm } from 'formtress-js'

const form = document.querySelector('#contact-form')
const submitBtn = form.querySelector('button[type="submit"]')
const errorEl = form.querySelector('.error-message')

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

  submitBtn.disabled = true
  submitBtn.textContent = 'Sending...'
  errorEl.textContent = ''

  try {
    const result = await submitForm({
      url: form.action,
      data: new FormData(form),
    })

    if (result.ok) {
      form.reset()
      submitBtn.textContent = 'Sent!'
    } else {
      errorEl.textContent = result.message
      submitBtn.textContent = 'Submit'
    }
  } catch (err) {
    errorEl.textContent = 'Network error. Please try again.'
    submitBtn.textContent = 'Submit'
  } finally {
    submitBtn.disabled = false
  }
})

Tip

You can use FormData with any form — it works with file inputs, checkboxes, select elements, and all standard form fields.

Using with frameworks

Since submitForm is just a JavaScript function, you can use it in any framework.

React

import { useState } from 'react'
import { submitForm } from 'formtress-js'

export function ContactForm() {
  const [status, setStatus] = useState(null)

  async function handleSubmit(e) {
    e.preventDefault()
    const result = await submitForm({
      url: 'https://app.formtress.com/api/f/your-form-id',
      data: new FormData(e.target),
    })
    setStatus(result.ok ? 'success' : result.message)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" />
      <input name="email" />
      <button type="submit">Send</button>
      {status && <p>{status}</p>}
    </form>
  )
}

Vue

<script setup>
import { ref } from 'vue'
import { submitForm } from 'formtress-js'

const status = ref(null)

async function handleSubmit(e) {
  const result = await submitForm({
    url: 'https://app.formtress.com/api/f/your-form-id',
    data: new FormData(e.target),
  })
  status.value = result.ok ? 'success' : result.message
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input name="name" />
    <input name="email" />
    <button type="submit">Send</button>
    <p v-if="status">{{ status }}</p>
  </form>
</template>

Svelte

<script>
  import { submitForm } from 'formtress-js'

  let status = $state(null)

  async function handleSubmit(e) {
    e.preventDefault()
    const result = await submitForm({
      url: 'https://app.formtress.com/api/f/your-form-id',
      data: new FormData(e.target),
    })
    status = result.ok ? 'success' : result.message
  }
</script>

<form onsubmit={handleSubmit}>
  <input name="name" />
  <input name="email" />
  <button type="submit">Send</button>
  {#if status}<p>{status}</p>{/if}
</form>

CDN usage (no build tools)

If you don’t use a bundler, you can load the module via CDN:

<script type="module">
import { submitForm } from 'https://cdn.jsdelivr.net/npm/formtress-js@0.2.1/dist/js/core.js'

// Use submitForm as shown above
</script>