sandbox

Custom Submit Button : Webflow Form Hack

Année

2025

Ce script transforme n'importe quel élément (une div, un link block, un bouton entièrement designé) en vrai bouton de soumission pour un formulaire Webflow. Ajoutez l'attribut data-custom-submit="true" à votre élément, et le script déclenche le clic du bouton submit natif, resté caché.

Important : ne supprimez pas le bouton submit d'origine. Dans Webflow, masquez-le simplement et laissez-le dans le formulaire, le script s'occupe du reste.

Attributs d'exemple

data-custom-submit = "true" activates the animation

Script du bouton submit custom

<script> document.addEventListener("DOMContentLoaded", function() { // Sélectionne ton élément custom (la "div bouton") const customBtn = document.querySelector('[data-custom-submit]'); // Sélectionne le vrai bouton submit du form const realSubmit = document.querySelector('form button[type="submit"], form input[type="submit"]'); if (customBtn && realSubmit) { customBtn.addEventListener("click", function(e) { e.preventDefault(); // évite un comportement bizarre realSubmit.click(); // déclenche le vrai submit }); } }); </script>