Customize Form submit button

Design help Custom code
1

Goodday Fellows!

I was wondering if anybody could help me customizing the ‘‘submit’’ button of my form.

On my website, I will display all buttons via custom code. However, I cannot manage to edit the sumbit button in the same way. ( I believe because the sumbit button has no span?)

If you have more expierence with code, I would greatly appriciate it if you could provide some thoughts/help.

Thanks all!

Have a nice weekend :slight_smile:

readonly: https://preview.webflow.com/preview/spot-je-vakantie?utm_source=spot-je-vakantie&preview=626b07aee6c033a1b9072884edbd4923**

2

oopsie: https://preview.webflow.com/preview/spot-je-vakantie?utm_source=spot-je-vakantie&preview=626b07aee6c033a1b9072884edbd4923

3

Try placing the anchor text in the span.
<a class="btn-6-orange" href="#">Send<span></span></a>
like this
<a class="btn-6-orange" href="#"><span>Send</span></a>

4

Hi! Thanks for replying :slight_smile:

Do you mean placing the span under custom attributes?

5

Ah, i think you mean adjusting the CSS in the custom embed editor. I tried to put the text within the span, but the submit button still won’t display the background hover animation effect. (it does change text-color, like previously)

6

Why?

Are you exporting this site or are you planning on hosting on webflow?

7

If you need the empty span in the anchor you could just add that with jQuery. You can’t add it to a submit form button any way else. If you were hosting externally you would need to come up with a third party form so you would just edit the submit button as needed.

On webflow hosting, you could use this jQuery <script>$("<span></span>").appendTo(".btn-6-orange ");</script> to append the span to any element with the class of “btn-6-orange”. This code would have to be placed in the page or site “before body close” custom code area.

If you are going to try to style elements on the page with custom code, place that CSS in the " Inside Head" custom code area.

8

Hi jeff!

I am using custom code for my buttons since i cannot reproduce the same result with webflow interactions.

I made this project to show this issue, I am already hosting and running my website on Webflow, but i am in a re-designing process!

Kind regards!

9

Awesome, I will try it out asap!

Thanks for the help, much appreciated!

10

Goodday Sir,

Sorry to bother you again,

I added the jQuery in the project settings (before body), and added the custom CCS for .btn-6-orange in the ‘‘inside head’’ as well.

I re-published the website to make the jQuery active, but on the submit form button, the hover-interaction animation still remains not visible.

Is there any step I missed?