Open Optimized Donation Forms from Hyperlinks and Buttons

After the embedded Online Giving Loader Script is on your website, an Optimized Donation Form can open on top of any webpage on your website.

The form can open from:

  • A hyperlink that displays the form on the same webpage as the link.

  • A hyperlink that displays the form on other webpages and emails.

  • A button or other HTML element, such as an image.

Open an Optimized Form from a Hyperlink

To open the form from a hyperlink, the copied code contains "Donate" as the link. You can change the link text if you prefer.

  1. From Online Giving, Donation forms, select an Optimized Donation Form.

  2. From Publish, select Hyperlinks.

    • To launch the form from the same webpage with the link, from Open form on top of same webpage, select Copy.

      Note: If the website's URL has a question mark, replace the question mark ("?") in the copied HTML before bbFormID with an ampersand ("&"). For example, the HTML changes from this <a href="?bbFormId=84f62a36-dd">Donate</a> to this <a href="&bbFormId=84f62a36-dd">Donate</a>.

    • To launch the form on other webpages and emails so it opens on top of your website, from Open form from other webpages or emails, select Copy.

  3. Paste the code in any webpage on the website where the Online Giving Loader Script is set.

Open Optimized Form from a Button

To open an Optimized Donation Form from a button or image, the copied code contains an HTML button and the custom data-blackbaud-optimized-form-id property.

Warning: Don't change the custom property because it is unique to the form.

  1. From Online Giving, Donation forms, select an Optimized Donation Form.

  2. From Publish, select Button.

  3. Select Copy.

    Tip: The HTML tag displays a button to open the form, and you can change "Donate" in the HTML tag if you prefer different text on the button. You can also use a different HTML element, such as <img> to open the form from an image. Don't make changes to the custom property because it is unique to this form.

  4. Paste the code in the webpage where you want the button to appear.