Comment personnaliser l'action après soumission d'un formulaire Webflow avec Finsweet ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment personnaliser le comportement d'un formulaire Webflow après soumission avec Finsweet Attributes Form After Submit.

Pourquoi utiliser Form After Submit

Par défaut, Webflow affiche un message de succès in-place après soumission. Form After Submit permet de faire bien plus : rediriger vers une page de confirmation, afficher un élément caché, scroller automatiquement vers un message, ou cacher le formulaire après soumission. Sans JavaScript custom.

1. Ajoutez le script dans le head

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

2. Configurez l'action de redirection

Pour rediriger vers une page de confirmation après soumission, ajoutez sur votre Form Block :

• fs-formaftersubmit-element="form"
• fs-formaftersubmit-action="redirect"
• fs-formaftersubmit-target="/merci" (ou toute URL)

3. Configurer l'affichage d'un élément

Pour afficher un élément caché après soumission (ex: un message personnalisé, un bloc de contenu supplémentaire) :

• fs-formaftersubmit-action="show"
• fs-formaftersubmit-target="#mon-message-confirmation" (ID de l'élément à afficher)

4. Ajoutez un délai (optionnel)

Pour ajouter un délai avant l'action (ex: laisser le message de succès Webflow s'afficher 2 secondes avant de rediriger), ajoutez fs-formaftersubmit-delay="2000" (valeur en millisecondes).

Conclusion

Form After Submit simplifie la gestion des confirmations de formulaire sans code custom. Cas d'usage :

• Redirection vers une page de remerciement avec pixel de conversion
• Affichage d'un contenu premium après inscription
• Masquage du formulaire et affichage d'un message personnalisé