Customize submit button

Design help Layout & Design
1

Hello.

I haven’t found any way to really customize the look of the submit button. Is this really the case in Webflow? It’s pretty weird, maybe I’m just looking in the wrong place? There is some styling, but not much. It doesn’t even have an icon field by default, if you want to add some icons, you’ll have to go through a weird way of setting them as a background image. I’m not even talking about a button with a more complex structure. I’ve heard of some way of using custom code, if that’s really the only way, could someone tell me more about it? Maybe it is possible to wrap in the link div and set to this link some submit button settings?

In my case, I need to make a submit button like this Screenshot by Lightshot and add some animations to the button elements.

2

hello,
you can delete the submit button in your form
and add a link block or another button and customize it.

3

As I recall it’s a bit of a pain. You’ll basically create your own submit button from divs, icons, txt and then set a javascript event handler that submits your form.

Here’s some code I’ve tossed up that should work, I’ll add this to SA5 later.

1 Like
4

Hey Richard!

Along with @memeticians great solution, we wanted to add something similar to that to our library of Memberscripts.

We’ve just released this script for custom form submit buttons, which also has a video tutorial on how to implement it in your own project.

Hope this helps!!

1 Like
5

If you’re encountering the same issue, here’s a solution I found, thanks to one of TRicks’ videos:

  1. Add a Custom Element and assign it a class: Screenshot
  2. Insert a Customized Button: Place any customized or complex button inside the custom element.
  3. Configure the Custom Element: In the settings of the custom element, add the tag ‘button’ and set the attribute ‘type’ with the value ‘button’ if you want it to act as a regular button, or with the value ‘submit’ if you want it to function as a submit button in a form. Screenshot
  4. Add the Button to the Form Block: Place the button into your Form Block and remove the default button from the form. Screenshot

Finding this solution was quite challenging, so I hope it helps others.

Webflow should work on addressing common issues and frequently asked questions more effectively. Many users find the existing tutorials and resources lacking, and often the most useful tips come from private videos, which are often hidden behind a lot of useless content that covers basics but avoids more complex issues.

As someone new to Webflow, the depth of unclear behaviors and elements that work in unexpected ways can be quite frustrating. At one point, I even considered abandoning the platform entirely. It’s unfortunate because I still find Webflow to be a valuable tool. However, improvements are needed. The humorous Webflow 101 videos are not enough; more comprehensive and practical guidance is necessary.