Make A Custom Form Submit Button That Is Clickable

cr: Lionize Agency

Webflow allows you to style the submit button. But when you have a button with multiple divs and interactions, the submit button can become unclickable

The problem is that when the submit button (the official one that submits the form) is a child of any other wrapper-div, it becomes unclickable and users can no longer submit the form.

You can get around this by adding the following custom code:

The ‘btn-wrapper’ is the class you want clicks to pass through or ignore and ‘submit-btn’ is the class you want to be clickable.

‘pointer-events: none’ - makes the wrapper div “clickthrough” or invisible to clicks, but then you also have to add ‘pointer-events: auto’ to any child classes of the class you have made invisible. This makes them visible to click again

Webflow custom code library

Webflow - Code to the Rescue

The Webflow Library for custom code snippets that unlocks powerful possibilities in Webflow. Includes hand-picked and tested custom code that you can use in Webflow Projects.

Open Library

Need further help?

Need further help in understanding the resources or how to implement them? Feel free to reach out

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Ali Saeed Graphic Designer Kuwait

About Ali Saeed

Ali Saeed is a Kuwait-based web designer and Webflow developer who has been working as a graphic designer for 4 years, building social brands, company profiles, and presentations. He recently jumped into web design and development. As a web designer, Ali focuses on clarity in design layout and messaging strategy. In his free time, he loves to help the web community, solve problems, and build resources for web designers who want to optimize their websites using Webflow.

Send an email if you'd like to collaborate :)
View his portfolio website