How to Add an Icon to a Submit Button in Webflow

This post will teach you how to add an icon to a submit button in webflow and when/where you might need to use it!

Ajoutez des adhésions à votre projet Webflow en quelques minutes.

Get started

Plus de 200 composants Webflow clonables gratuits. Aucune inscription n'est nécessaire.

Voir la bibliothèque

Ajoutez des adhésions à votre projet React en quelques minutes.

Get started

How to add an icon to a submit button in Webflow

Memberscripts needed

https://www.memberstack.com/scripts/custom-form-submit-button

Tutorial

Cloneable

Why/Use Cases –

  • Stylize your form submit buttons for a more cohesive design.

If you want to add some additional customization to your forms, you can work around Weblow’s limitations and add an icon to your forms’ submit buttons.

The guide below will work with any standard Memberstack or Webflow forms and our workaround essentially hides the real submit button and triggers it when users click on your custom one.

Adding an icon to a submit button in a Webflow form

To add an icon to a form submit button in Webflow, we’re going to use MemberScript #108 – Custom Form Submit Buttons. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

Go ahead and create and style your form however you like. Once that’s done, select the form’s submit button and add the following attribute to it:

· ms-code-submit-old=”1”

Now go ahead and hide the button.

Now let’s build a new submit button. This will essentially be a link block with text and an icon inside. Once that’s done, add the following attribute to your new button:

· ms-code-submit-new=”1”

The values we’re using for these attributes are simply a way to match the new buttons with the old ones. For example, if you had two forms with custom submit buttons on the same page, you could just use the value “2” to match the second form’s buttons, then “3” and so on.

The values don’t necessarily need to be numbers, you could also use a word that describe each form.

e.g. a signup form could use a “signup” value for both buttons and a contact form could use “contact.”

Making it work

Now that you’ve got everything configured and your form’s set up in Webflow, all you need to do is add the MemberScript #107 custom code to your page, before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test your form’s custom button on the live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you add custom submit buttons to any Webflow form for additional customization.

Button – Get cloneable

TABLE DES MATIÈRES
Ovidiu
What is Memberstack?

Auth & payments for Webflow sites

Add logins, subscriptions, gated content, and more to your Webflow site - easy, and fully customizable.

En savoir plus
Start building

Try out Memberstack & discover what you can build!

Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.