Webflow Integration

Formtress works with standard HTML forms - your form’s action points directly to Formtress, so submissions work even without JavaScript. The Webflow script is optional progressive enhancement: it intercepts the submission and triggers Webflow’s built-in success and error states so users never leave the page.

Interactive reference

Click any element in the designer below to see exactly which Formtress attributes apply to it.

W my-site.webflow.io

⊞ Layers

• ⬚ Page
  • ◻ Form Block
    • ⊡ Form
      • ▭ Name Field
      • ▭ Email Field
      • ▭ Message
      • ▣ Submit Button
        • T Button Text
    • ✓ Success Message
    • ✕ Error Message
      • T Error Text

Canvas — 1280px

Form Block

Form

Name

Email

Message

Submit Button

Button text Submit

Error Message data-ft-error Oops! Something went wrong.

Success Message Thanks! Your message has been sent.

⚙ Element Settings

Click an element in the Layers or Canvas to see its settings.

↑ Click any element above to see what Formtress settings apply to it.

Setup

1. Build your form in Webflow and publish

   Design your form in the Webflow Designer and publish your site so it’s accessible at a public URL.

2. Import your form into Formtress

   In the Formtress dashboard, click Create, then click Add from URL. Paste your published page URL - Formtress will fetch the page and import all your form fields automatically.

3. Set the form action and method

   Copy the Form Action from the top of your new Formtress form. In Webflow’s Designer, select the form element (not the form block wrapper), open the element settings, remove any existing Webflow form actions, then add these custom attributes:

   Attribute	Value
   action	https://app.formtress.com/api/f/your-form-id
   method	post

4. Add the enhancement script

   Add this to Custom Code → Footer Code in your Webflow project settings to enable Webflow’s native success and error states:

   <script src="https://cdn.jsdelivr.net/npm/formtress-js@0.2.4/dist/js/webflow.js"></script>

   Without this script, the form still submits to Formtress but the page will navigate to the response instead of showing Webflow’s in-place states.

5. Verify your setup

   On your form page in Formtress, click the Debug button. Paste your published page URL into the modal and Formtress will check that the form action and script are correctly installed.

6. Optional: Custom loading text

   If you are not using Webflow’s native submit button, add this attribute to the text element inside your submit button to show loading text while the form submits:

   Attribute	Value
   data-ft-loading-text	Please wait...

7. Optional: Custom error element

   Add data-ft-error to a text element (ideally inside the form error state block) to display server error messages:

   Attribute	Value
   data-ft-error	(no value needed)

Full example HTML

<form action="https://app.formtress.com/api/f/abc123-your-form-id" method="post">
   <input type="text" name="name" placeholder="Your name" required />
   <input type="email" name="email" placeholder="Email" required />
   <textarea name="message" placeholder="Your message"></textarea>

   <div class="w-form-fail">
      <div data-ft-error>Something went wrong.</div>
   </div>

   <button type="submit">
      <span data-ft-loading-text="Sending...">Submit</span>
   </button>
</form>

Add before </body>:

<script src="https://cdn.jsdelivr.net/npm/formtress-js@0.2.4/dist/js/webflow.js"></script>

File uploads

You can add file upload fields in Webflow using custom elements.

1. Add a custom element and change the tag to input.

2. Set the following attributes:

   Attribute	Value
   type	file
   name	(a desired name for the field)
   accept	(optional, specify allowed file types)

accept example: image/* for images only, .pdf,.docx for specific formats.

How it works under the hood

1. The script scans for forms whose action attribute points to the Formtress submit endpoint.
2. It attaches a submit handler that intercepts the default form submission.
3. It collects the FormData and sends it to the form’s action URL via fetch.
4. On success, it triggers Webflow’s native success state.
5. On error, it triggers Webflow’s error state and (if present) updates the data-ft-error element with the server message.
6. Without the script: the form submits normally via standard HTML - the page navigates to the response, but the submission still reaches Formtress and spam protection still runs server-side.

Troubleshooting

Problem	Solution
Form is not submitting to Formtress	Make sure action is set to your Formtress submit URL and the form method is post.
Success state doesn’t show	Verify the script is loaded in footer code and your Webflow form has a success message configured in the Designer.
Error message not updating	Add data-ft-error to a visible text element inside the error state block.
Field names don’t match	Ensure your Webflow form field name attributes exactly match the fields in Formtress (case-sensitive). Check the HTML source - Webflow can be misleading in the settings panel.
Page navigates away on submit	The script is not loaded - add it to Custom Code → Footer Code as described in step 4.
Script not loading	Verify the CDN URL is correct and the script is in the footer code section.