# Form Submit Button Styling **URL:** \ **Category:** How do I?\ **Tags:** binding\ **Created:** [May 19, 2023, 12:43pm UTC](https://community.weweb.io/t/form-submit-button-styling/2750 "2023-05-19T12:43:04Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![AJAW](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@AJAW](https://community.weweb.io/u/AJAW)\ **Post date:** [May 19, 2023, 12:43pm UTC](https://community.weweb.io/t/form-submit-button-styling/2750/1 "2023-05-19T12:43:05Z")
Hey, I have been creating a bunch of semi-complicated forms recently. I want the submit button to be disabled (and styled accordingly) if not all fields are filled in. I am using the ‘required’ field on my inputs to ensure the form is not being triggered when pressing, but I would also like to set the opacity of the button down as well. Is there an easier way to ‘hook’ into the required logic that the form control uses behind the scenes or do I need to create a super long formula that checks if all my fields are filled in like so: ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8bae25699a4b4fffb4ff0784474853a22b5fbf69.png) ---
**Author:** ![gbeaudoin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/gbeaudoin/32/3221_2.png) [@gbeaudoin](https://community.weweb.io/u/gbeaudoin)\ **Post date:** [May 21, 2023, 5:11pm UTC](https://community.weweb.io/t/form-submit-button-styling/2750/2 "2023-05-21T17:11:15Z")
AFAIK you’ll need formulas indeed. One implementation option would be to create a global formula that checks if its values are empty and returns bool, say `isEmpty()`. If you write it such that it can take an array as input, and can handle different types of values, then you can just use `isEmpty()`on your buttons, to which you pass all the field values you want to validate in an array. You could also create different formulas for different types of values. Maybe less complex to implement but also a bit more repetition then. I find it is good practice to have the least amount of formulas directly in a component’s logic, and rather use global formulas that you reference in components. Or at least when you have cases that are so universal such as checking if fields are empty. ---
**Author:** ![twinsticks](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@twinsticks](https://community.weweb.io/u/twinsticks)\ **Post date:** [May 21, 2023, 8:07pm UTC](https://community.weweb.io/t/form-submit-button-styling/2750/3 "2023-05-21T20:07:25Z")
I am doing something a little more simple but might be of use… I set the opacity of the button: ![Screenshot 2023-05-21 at 10.03.33 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/0c076b9e911087b62098fa32c2f6cb4f3deb4c4b.png) Then I set the disabled settings to: ![Screenshot 2023-05-21 at 10.04.12 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/cc61fc13aeed23d751076239b75ace27eca2636f.png) I have a long text input that is required, if it is empty then the button is faded out and disabled, if you type, then it is enalbed. I also have a red warning text that shows the user they need to complete the input. Super basic… but could be built on. ![Screenshot 2023-05-21 at 10.06.30 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/0b8cf7623c9ea3cccc2d1c547f7a401d3d2ee541.png) ---
**Author:** ![gbeaudoin](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/gbeaudoin/32/3221_2.png) [@gbeaudoin](https://community.weweb.io/u/gbeaudoin)\ **Post date:** [May 21, 2023, 9:06pm UTC](https://community.weweb.io/t/form-submit-button-styling/2750/4 "2023-05-21T21:06:53Z")
That being said, there almost certainly is a way to hook onto that existing logic, but it’s not frontend in the editor and also not documented. There should be a way for you to find out by inspecting the page in dev tools. You can look for event listeners, class names, or any other attributes related to the “required” fields and the submit button state. This may give you insights into how WeWeb handles the “required” feature internally and help you find a way to hook onto it. ---
**Author:** ![AJAW](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@AJAW](https://community.weweb.io/u/AJAW)\ **Post date:** [May 22, 2023, 1:29pm UTC](https://community.weweb.io/t/form-submit-button-styling/2750/5 "2023-05-22T13:29:15Z")
Thank you, thats a great suggestion will definitely try that! ---
**Author:** ![AJAW](https://avatars.discourse-cdn.com/v4/letter/a/eb8c5e/32.png) [@AJAW](https://community.weweb.io/u/AJAW)\ **Post date:** [May 22, 2023, 1:30pm UTC](https://community.weweb.io/t/form-submit-button-styling/2750/6 "2023-05-22T13:30:18Z")
Thank you, yes this does indeed work, but if I have a form with 30+ inputs, some of them having specific rules (min.2 but less than 5 or similar) then it gets a bit hectic ---
**Author:** ![twinsticks](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@twinsticks](https://community.weweb.io/u/twinsticks)\ **Post date:** [May 22, 2023, 6:33pm UTC](https://community.weweb.io/t/form-submit-button-styling/2750/7 "2023-05-22T18:33:39Z")
Thats true, one other thing to consider is the user experience. Filling in a long form that has many specific rules to follow can be tough.