Webflow Integration

Formtress has first-class support for Webflow. The Webflow script makes your forms feel completely native — it uses Webflow’s built-in success and error states, so there’s nothing extra to design.

Setup

1. Add the script to your Webflow project

   In your Webflow project settings, go to Custom Code → Footer Code and paste:

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

2. Get your Form ID

   In the Formtress dashboard, click on your form. The Form ID is displayed at the top — click it to copy.

3. Add data-ft to your form element

   In Webflow’s Designer, select your Form Block, open the element settings, and add a custom attribute:

   Attribute	Value
   data-ft	Your Form ID

   Caution

   Make sure you add data-ft to the form element itself, not the form block wrapper.

4. Make sure field names match

   The field names in your Webflow form must match the field names configured in your Formtress form. Field names are case-sensitive.

   Webflow bug

   When you add a form in Webflow, the default “Name” field appears capitalized in the settings panel, but the actual HTML name attribute is lowercase (name). Always double-check the rendered HTML or override the field name in the element settings to make sure it matches your Formtress configuration.

5. Optional: Custom loading text

   If you have a custom submit button, you can show loading text while the form submits. On the text element inside your submit button, add:

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

   Formtress will swap the button text while the request is in flight and restore it when done.

6. Optional: Custom error element

   To display server-returned error messages, add data-ft-error to the text element that should show errors. Ideally this should be inside the form error state block in Webflow:

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

   When a submission fails, the text content of this element will be replaced with the error message from the server.

7. Publish and test

   Publish your site and submit a test entry. You should see:

   • The Webflow success state on success
   • The Webflow error state (with server message) on failure
   • The submission in your Formtress dashboard

Full example

<form data-ft="abc123-your-form-id">
  <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 data-ft-error>Something went wrong.</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.1.17/dist/js/webflow.js"></script>

How it works under the hood

1. The script finds all forms with a data-ft attribute on page load.
2. It attaches a submit handler that prevents the default Webflow form action.
3. It collects the FormData, sends it to the Formtress endpoint with your Form ID.
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.

Troubleshooting

Problem	Solution
Form submits to Webflow instead of Formtress	Make sure data-ft is on the <form> element, not the wrapper. Ensure the script is loaded.
Success state doesn’t show	Check that 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 form.
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.
Script not loading	Verify the CDN URL is correct and the script is in the footer code section.