How to Customize the Post-Submit Action of a Webflow Form with Finsweet

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to customize a Webflow form’s behavior after submission with Finsweet Attributes Form After Submit.

Why use Form After Submit

By default, Webflow shows an in-place success message after submission. Form After Submit lets you do a lot more: redirect to a confirmation page, reveal a hidden element, automatically scroll to a message, or hide the form after submission. No custom JavaScript needed.

1. Add the script in the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-formaftersubmit@1/formaftersubmit.js" defer>script>

2. Set up the redirect action

To redirect to a confirmation page after submission, add this to your Form Block:

• fs-formaftersubmit-element="form"
• fs-formaftersubmit-action="redirect"
• fs-formaftersubmit-target="/thank-you" (or any URL)

3. Set up element display

To show a hidden element after submission (for example, a custom message or an extra content block):

• fs-formaftersubmit-action="show"
• fs-formaftersubmit-target="#my-confirmation-message" (the ID of the element to show)

4. Add a delay (optional)

To add a delay before the action (for example, let the Webflow success message stay visible for 2 seconds before redirecting), add fs-formaftersubmit-delay="2000" (value in milliseconds).

Conclusion

Form After Submit makes form confirmation handling simple, without custom code. Use cases:

• Redirect to a thank-you page with a conversion pixel
• Show premium content after signup
• Hide the form and display a custom message