Formtress.js - A JavaScript library for handling your Formtress forms

formtress.js is a tiny library that submits your forms using JavaScript, and handles loading states, validation, and error messages.

Features

• Lightweight: Under 1KB minified and gzipped.
• Easy to use: Just add a few attributes to your form and you're good to go.
• Built-in validation: Automatically validates your forms based on the forms you created in Formtress.
• Error handling: Automatically handles errors and displays them to the user.
• Platform specific: Built-in integrations for Webflow, with a core module for any project.

Installation

CDN (Webflow)

Add the following script to your Webflow project settings before the closing </body> tag (change latest to the version you want to use):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/webflow.js"></script>

Note: It's recommended to pin to a specific version in production for stability. Check the version badge above for the current release.

npm

npm install formtress-js

Usage

Webflow

1. Copy the form ID from your Formtress account.
2. Add a data-ft attribute to your form and paste the form ID as the value.
3. That's it! The library will automatically handle the form submission, loading state, and error messages similar to how Webflow handles forms.

If you changed the default structure of the default error message, you will need to add a data-ft-error attribute to the text element that will display the error message.

Core (any project)

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!')
  } else {
    console.error(result.message)
  }
})