How to change custom button into a ‘input type=submit’

Design help Custom code
1

Hey everyone! :wave:

Is there a way to use a custom link for form submits?

I am aware you can style the submit button but would love to keep things consistent and use our custom button for forms as well. :slight_smile:

image
image747×324 5.87 KB

I played around and looked on the forum but couldn’t find a solution so hopefully someone can help me out.

Have a nice day!

Here is my site Read-Only: https://preview.webflow.com/preview/custom-form-submit-button?utm_medium=preview_link&utm_source=dashboard&utm_content=custom-form-submit-button&preview=155c2a373b398c1e8aa62e68272e2b65&mode=preview

2

Hello.
Don’t add a normal button to a form but a ‘Form button’. You can style this then in any way you want.

3

Hey @HGWeb thanks for the reply!

I am aware that you normally add a ‘form button’.
Thing is that I’d like to reuse our button which is made with multiple divs and interactions.

If I am not mistaken you cannot build upon a form button and add ‘layers/divs’ for advanced styling.
So the question basically is how can we change our custom button into a ‘input type=submit’ ?

4

Hi @oury_stefan,

Wrap your “Submit Button” with the div block. and set the Height and Wide size into 100%.
you can customize the div block afterward.

Here I show you the example of how to style it

image
image1920×441 114 KB

Let me know if it helpful for you

4 Likes
5

Hey @ABDUR_RAHMAN

Thank you for your reply and solution.
I think this could solve the problem! Great thinking.

Thanks! :slight_smile:

6

Thanks for starting this thread. I was just looking for this very solution.

I’m having an issue where the artwork inside the button wrapper is not being “active” so when the mouse rolls over the arrow in the center for example the button isn’t clickable. I styled it exactly as you suggested.

Any ideas?

1 Like
7

I know this question was asked a while ago, but I have just found a solution that covers a lot of issues.
Wrapping the submit button in a div does allow you to style it however you want, including interactions & animations. The problem however 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:

<style>
  
  .btn-wrapper {
  	pointer-events: none; 
  }
  
  .submit-btn {
  	pointer-events: auto;
  }
</style>

Where ‘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 clicks again.

2 Likes
8

Saved my day, thanks a lot Abdur!

10

Hey! Just tried this but the submit button isn’t being clicked still. I am trying to link it through Airtable with Webflow Logic (following this tutorial: How to Connect Webflow to Airtable with Logic in 10 min - YouTube).

Here’s the read-only link: Webflow - Webflow Logic Test

11

For anyone still looking to do this - Here’s a super easy way to make any element function as a submit button - this link blow has the tutorial, cloneable, and code embed!

Hope it helps!