formtress-js 0.1.20 → 0.2.0

package/README.md

@@ -19,7 +19,7 @@
 Add the following script to your Webflow project settings before the closing `</body>` tag (change `latest` to the version you want to use):
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/formtress-js@0.1.9/dist/js/webflow.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/formtress-js@0.2.0/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.
@@ -35,13 +35,30 @@ npm install formtress-js
 ### Webflow
 
 1. Copy the form ID from your [Formtress](https://app.formtress.com) 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.
+2. In Webflow's form settings, set the form **Action** to your Formtress endpoint:
+   ```
+   https://app.formtress.com/api/f/{your-form-id}
+   ```
+3. That's it! The script enhances the form progressively:
+   - **Without JavaScript**: the form submits natively to Formtress, keeping it functional for all users.
+   - **With JavaScript**: the submission is intercepted and handled client-side, showing loading states and success/fail panels without a page reload — just like Webflow's native form behaviour.
 
-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.
+If you changed the default structure of the error message element, add a `data-ft-error` attribute to the text element that should display the error message.
+
+> **Note (v0.2.0 breaking change):** The previous `data-ft="your-form-id"` attribute is no longer used. Set the form `action` as described above instead.
 
 ### Core (any project)
 
+Set the form `action` to your Formtress endpoint so it works without JavaScript:
+
+```html
+<form id="my-form" action="https://app.formtress.com/api/f/your-form-id" method="POST">
+  <!-- your fields -->
+</form>
+```
+
+Then progressively enhance it with JavaScript:
+
 ```js
 import { submitForm } from 'formtress-js'
 
@@ -49,13 +66,13 @@ const form = document.querySelector('#my-form')
 form.addEventListener('submit', async (e) => {
   e.preventDefault()
   const result = await submitForm({
-    formId: 'your-form-id',
+    url: form.action,
     data: new FormData(form),
   })
   if (result.ok) {
-    console.log('Success!')
+    // show success state
   } else {
-    console.error(result.message)
+    // show error state: result.message, result.status
   }
 })
 ```

package/package.json

@@ -3,7 +3,7 @@
   "description": "A tiny library for managing Formtress forms",
   "private": false,
   "license": "MIT",
-  "version": "0.1.20",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/js/core.js",
   "module": "dist/js/core.js",