Is there a way to add HTML to a Button?

Design help Custom code
1

Hi there,

I am currently trying to embed a pop-up form into my site from Donorbox. They have provided HMTL as we wish to use our own button to trigger this and I wondered whether it’s possible to achieve this with the Button block or whether I’d need to used the Embed block instead?

If the latter, how might I achieve the same styling as the buttons across my site?

Thank you in advance.

Thomas

2

Hey, Thomas! To clarify, you have code for a pop-up form and you want to know how to trigger this with a button, right? Good news for you, it’s very simple.

First, create a Div with absolute positioning, and insert an HTML Embed with your form code inside. When you’ve got this completed, set display: none on the Div.

Afterwards, you can create another Div, and use that as your button. Because the ‘button’ element inside Webflow is basically just a Div with predetermined styling and behavior, you should be able to apply the same class as your button without much issue.

After you’ve got your form and button built the way you like, you can add an interaction so that when a user clicks on the button, it does a hide/show interaction on the Div. Simple as that.

I’ve created a (very crude) example of how this would look in Webflow here. Feel free to poke around on the interaction for the button and the close button on the form as well to see how it’s all constructed. Let me know if I can clarify anything.

3

Hi there Chris, wow - thank you so much for this detailed answer!

Following your steps, I’ve gone ahead and created the Div with an HTML Embed using the following code:

<a class="custom-dbox-popup" href="https://donorbox.org/filey-cat-rescue">Donate Now</a>
 <script type="text/javascript" defer src="https://donorbox.org/install-popup-button.js"></script> <script>window.DonorBox = { widgetLinkClassName: 'custom-dbox-popup' }</script>

And from there, I set the display to ‘none.’ I then placed the button inside a new Div block, but can’t quite see how I’d trigger this to open the hidden Div pop-up - are you able to assist?

Many thanks,

Thomas

4

Update: I’ve managed to get it working, but the Embed code doesn’t launch you straight into the pop-up. Instead it creates a ‘Donate now’ text and when you click that text, the pop-up launches. Is there a way to skip the text part?

5

Can you drop a read-only link to your project so I can take a look? Instructions are here. Thanks!

6

Hi Chris,

I was wondering if you still have the preview link that shows how you done this? Would greatly appreciate any help!