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

npm install formtress-js

Basic usage

import { submitForm } from 'formtress-js'

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

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

  const result = await submitForm({
    formId: 'your-form-id',
    data: new FormData(form),
  })

  if (result.ok) {
    console.log('Success!')
    // Show your own success UI
  } else {
    console.error(result.message)
    // Show error to the user
  }
})

API

`submitForm(options)`

Parameter	Type	Required	Description
`formId`	`string`	Yes	Your Formtress Form ID from the dashboard.
`data`	`FormData`	Yes	The form data to submit.

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

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

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()

  // Loading state
  submitBtn.disabled = true
  submitBtn.textContent = 'Sending...'
  errorEl.textContent = ''

  try {
    const result = await submitForm({
      formId: 'your-form-id',
      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
  }
})

Using with frameworks

Since submitForm is just a function that takes a FormData object, it works with any framework. Here’s a minimal example pattern:

// Collect your data however you want
const formData = new FormData()
formData.append('name', name)
formData.append('email', email)
formData.append('message', message)

const result = await submitForm({
  formId: 'your-form-id',
  data: formData,
})

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.1.17/dist/js/core.js'

// Use submitForm as shown above
</script>