Custom Submit Button – Webflow Form Hack
This script allows you to turn any custom element (for example a div, a link block, or a fully designed button) into a real submit button for a Webflow form. Simply add the attribute data-custom-submit="true" to your custom element, and the script will trigger the click of the hidden native submit button.
It’s important not to delete the original Webflow submit button — you just need to hide it. In Webflow, set the native submit button to “None” (so it’s invisible), and that’s it. Keep it in the form, hide it, and the script will do the rest.
<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>
Adding Code to Webflow
You can copy HTML, JavaScript, or CSS directly from the examples on this site.
Once copied, there are two ways to add the code into your Webflow project:
- Embed Element :
Insert a Custom Code Embed block on your page and paste the code inside.
This is best for snippets that should run or display only in a specific section.
- Site-wide Custom Code :
Open Project Settings → Custom Code and paste the snippet into the Head or Before section. This is best for scripts and styles that must load on every page.
