Publish Online Registration Form

Under Publish, in the HTML to embed in your website section, you'll find your registration form represented as HTML and JavaScript code. Within the <div id="blackbaud-registration-form"></div> tag, is a script that creates an iframe that displays your registration form on your organization's website.

  1. Select Copy to clipboard to copy the form’s HTML code.

  2. From your website’s content management system, paste the code in one of the web pages.

    Tip: To include the height of the page’s header or overlay so that the form scrolls properly when registrants enter their payment information, update the value for window.BB_REG_FORM_HEADER_HEIGHT after you paste the code.

You can use the CSS selector [data-blackbaud-registration-form] to control the placement, border, padding, and margins of the iframe on your website.

Note: The CSS selector [data-blackbaud-registration-form] does not affect styling of the content of the registration form itself. The content is entirely controlled through the Style section in the Form Designer.

Warning: Do not alter the size or width of the iframe containing the registration form. When you embed the form on your website, the size will automatically adjust to display all necessary form information. Changing the default size and width can cause sections of the registration form to be cut off when embedded on your website, and can ultimately prevent users from completing their registration.

Tip: To optimize your website for mobile viewing, use the "viewport" <meta> tag to control the mobile window's size and shape.

Warning: Do not make changes directly to the code under HTML to embed your form.

Once the form is embedded on your website, you can freely edit the form in the Form Designer. When you select Save, your changes are automatically reflected on your website. You do not need to re-embed your form every time you make changes.

Warning: For security reasons, most email clients do not support JavaScript in email messages and we do not recommend pasting the JavaScript into a message.