formtress-js 0.1.19 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -7
- package/dist/js/webflow.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
Add the following script to your Webflow project settings before the closing `</body>` tag (change `latest` to the version you want to use):
|
|
20
20
|
|
|
21
21
|
```html
|
|
22
|
-
<script src="https://cdn.jsdelivr.net/npm/formtress-js@0.
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/formtress-js@0.2.0/dist/js/webflow.js"></script>
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
> 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
|
|
|
35
35
|
### Webflow
|
|
36
36
|
|
|
37
37
|
1. Copy the form ID from your [Formtress](https://app.formtress.com) account.
|
|
38
|
-
2.
|
|
39
|
-
|
|
38
|
+
2. In Webflow's form settings, set the form **Action** to your Formtress endpoint:
|
|
39
|
+
```
|
|
40
|
+
https://app.formtress.com/api/f/{your-form-id}
|
|
41
|
+
```
|
|
42
|
+
3. That's it! The script enhances the form progressively:
|
|
43
|
+
- **Without JavaScript**: the form submits natively to Formtress, keeping it functional for all users.
|
|
44
|
+
- **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.
|
|
40
45
|
|
|
41
|
-
If you changed the default structure of the
|
|
46
|
+
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.
|
|
47
|
+
|
|
48
|
+
> **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.
|
|
42
49
|
|
|
43
50
|
### Core (any project)
|
|
44
51
|
|
|
52
|
+
Set the form `action` to your Formtress endpoint so it works without JavaScript:
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<form id="my-form" action="https://app.formtress.com/api/f/your-form-id" method="POST">
|
|
56
|
+
<!-- your fields -->
|
|
57
|
+
</form>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Then progressively enhance it with JavaScript:
|
|
61
|
+
|
|
45
62
|
```js
|
|
46
63
|
import { submitForm } from 'formtress-js'
|
|
47
64
|
|
|
@@ -49,13 +66,13 @@ const form = document.querySelector('#my-form')
|
|
|
49
66
|
form.addEventListener('submit', async (e) => {
|
|
50
67
|
e.preventDefault()
|
|
51
68
|
const result = await submitForm({
|
|
52
|
-
|
|
69
|
+
url: form.action,
|
|
53
70
|
data: new FormData(form),
|
|
54
71
|
})
|
|
55
72
|
if (result.ok) {
|
|
56
|
-
|
|
73
|
+
// show success state
|
|
57
74
|
} else {
|
|
58
|
-
|
|
75
|
+
// show error state: result.message, result.status
|
|
59
76
|
}
|
|
60
77
|
})
|
|
61
78
|
```
|
package/dist/js/webflow.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function
|
|
1
|
+
function m(){const w=document.querySelectorAll("form[data-ft]");let l=!1;w.forEach(o=>{const d=o.dataset.ft;if(!d)return;const u=o.closest(".w-form");if(!u)return;const f=u.querySelector(".w-form-done"),r=u.querySelector(".w-form-fail");if(!f||!r)return;const t=u.querySelector("input.w-button")||o.querySelector('button:not([type="button"])')||o.querySelector('input[type="submit"]'),y=t instanceof HTMLInputElement,e=o.querySelector("[data-ft-loading-text]"),s=r.querySelector("[data-ft-error]")||r.firstChild;function b(){return t?e?e.textContent||"":y?t.value:t.textContent||"":""}function c(i){t&&(e?e.textContent=i:y&&(t.value=i))}function g(){return e!=null&&e.dataset.ftLoadingText?e.dataset.ftLoadingText:e!=null&&e.dataset.wait?e.dataset.wait:t!=null&&t.dataset.wait?t.dataset.wait:"Please wait..."}o.addEventListener("submit",async function(i){if(i.preventDefault(),i.stopPropagation(),l)return;l=!0,r.style.display="none";const p=b();c(g()),t&&t.setAttribute("disabled","");try{const n=await fetch(`https://app.formtress.com/api/f/${d}`,{method:"POST",body:new FormData(o),headers:{Accept:"application/json"}});if(n.ok){o.style.display="none",f.style.display="block";const a=await n.json();a.redirect&&(window.location.href=a.redirect)}else if(n.status===429)console.error("Form submission rate limited:",n.status),s&&(s.textContent="Too many submissions. Please wait a moment and try again."),r.style.display="block";else{const a=await n.text();console.error("Form submission failed:",n.status,a),s&&(s.textContent=a),r.style.display="block"}l=!1,c(p),t&&t.removeAttribute("disabled")}catch(n){console.error("Error submitting form:",n),s&&(s.textContent="An error occurred. Please try again later."),r.style.display="block",c(p),t&&t.removeAttribute("disabled"),l=!1}})})}typeof window<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",m):m());
|