Can I embed a pop-up form from Donorbox using the Button block in Webflow, or do I need to use the Embed block? How can I match the styling of the buttons on my site? Thank you.
Yes, you can embed a pop-up form from Donorbox using either the Button block or the Embed block in Webflow.
Using the Button block:
1. Drag and drop a Button block onto your Webflow page where you want the pop-up form button to appear.
2. Double-click on the Button block to open the Button settings panel.
3. In the Button settings panel, you'll see various options to customize your button's appearance, such as text, size, and background color. Adjust these settings to match the styling of the buttons on your site.
4. Next, you need to add the Donorbox form embed code to the Button block. Open the Donorbox form builder and customize your form as per your requirements.
5. Once you're done customizing the form, click on the "Embed Form" button to get the embed code.
6. Copy the embed code provided by Donorbox.
7. Return to your Webflow project and select the Button block.
8. In the Button settings panel, click on the "Link Settings" tab.
9. Within the Link Settings tab, paste the Donorbox embed code into the "Link" field.
10. Save your changes and publish your Webflow project to see the Donorbox pop-up form appear when the button is clicked.
Using the Embed block:
1. Drag and drop an Embed block onto your Webflow page where you want the pop-up form button to appear.
2. Double-click on the Embed block to open the Embed settings panel.
3. In the Embed settings panel, you'll find an HTML input field. Paste the Donorbox form embed code in this field.
4. Adjust the width and height settings of the Embed block to match the size of your Donorbox form.
5. Save your changes and publish your Webflow project to see the Donorbox pop-up form appear where the Embed block is placed.
To match the styling of the buttons on your site, you can modify the appearance of the Button block or the Embed block by adjusting their respective settings. Take note of the colors, typography, and any other visual elements that are consistent with your website's design. By matching these attributes, you ensure a cohesive and seamless user experience.