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

Design help Custom code
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