Forms Studio - Donation

Forms Studio is a new form builder in CMS. Instead of laying out a form in the classic drag-and-drop Forms editor, you fill in a focused, opinionated wizard and paste a small <script> snippet onto any page.

This article covers the first form type available in Forms Studio: the Donation Form. Your donors see an editorial-quality donation form in a polished lightbox overlay, with colors, content, and behavior all driven by your wizard choices. Additional Forms Studio form types (RSVP, membership, event sign-up, and others) are planned for future releases.

Highlights

• Lightbox embed — one small JavaScript snippet opens the form in a dark overlay over your existing website. No iframe sizing required.
• Two visual layouts — Typographic (text-only editorial) and With Photo (hero image on the left).
• Five built-in palettes plus a custom color picker — the donor frame, wizard preview, and receipt email all follow your palette automatically.
• Out-of-the-box defaults — admins only need to fill in a Form Name and a Default Subcategory. Everything else has working defaults.
• Built on the proven submission pipeline — card processing, decline tracking, reCAPTCHA, member matching, and receipts are reused from the classic forms.

Three-Minute Quick Start

1. Open the Forms page and click the gear icon in the toolbar to open Web Forms Integration.
2. In the Forms Studio section, click + Set up donation form on the Donation card. (After it’s created the same button reads Edit donation form.)
3. On the Basics step, type a form name and pick a Default Subcategory.
4. Click Save. The form is live.
5. Jump to the Embed code step, copy the snippet, and paste it onto your website.
6. Want to make it yours? Click + Customize the form to unfold all nine steps.

The Wizard, Step by Step

The wizard has three panes: a left navigation rail with the nine steps, a center editor for the current step, and a right preview pane that renders the actual donor form in real time. The preview mirrors all three donor screens (amount, contact & payment, thank-you) so you can flip between them as you edit.

The Nine Steps

Palettes & Visual Style

Pick a palette once and it propagates everywhere: the donor frame, the wizard preview, and the receipt email.

The Donor Experience

The donor frame opens inside a dark overlay (lightbox) over your website. It runs in a single iframe and supports two visual layouts. On phones it goes full-bleed — no peek-through of the host page.

Typographic Layout

With Photo Layout

The Thank-You Email

Every confirmed donation triggers a palette-aware receipt email. The hero band, stat strip, and footer all pick up the form’s colors automatically.

Merge Fields

Three placeholders are filled in by the system at send time:

Simple vs Advanced Editor Mode

Embedding on Your Website

The Embed step gives you a single <script> snippet to paste anywhere on your site. The script opens the form in a dark overlay lightbox — no iframe sizing required. On mobile the lightbox is full-bleed, with no peek-through from the host page.

Recommended: A Dedicated Donate Page

Most organizations point all of their existing donate links — the “Donate” button in the site header, the call-to-action at the bottom of every email, the link in a social-media bio — to a single, dedicated Donate page on their website. That page does nothing but auto-open the lightbox. Add data-auto-open="true" and the form appears the moment the page loads:

<script src="https://YOUR-ORG.chabadms.com/assets/donate-embed/donate.js?v=1.0.0.1"
        data-form-id="34653682-ac01-4852-bd03-0a080d5dd018"
        data-auto-open="true"></script>

This is the simplest setup and what most organizations should use. Your existing Donate button keeps working — you just point its link to the new page.

Advanced Options

If you want the lightbox to open directly from a button on the page where the script lives (instead of navigating to a Donate page), one of the two patterns below will do it.

<script src="https://YOUR-ORG.chabadms.com/assets/donate-embed/donate.js?v=1.0.0.1"
        data-form-id="34653682-ac01-4852-bd03-0a080d5dd018"
        data-trigger="#donate-button"></script>

<button id="donate-button">Donate</button>

<script src="https://YOUR-ORG.chabadms.com/assets/donate-embed/donate.js?v=1.0.0.1"
        data-form-id="34653682-ac01-4852-bd03-0a080d5dd018"></script>

<a href="#" onclick="CmsDonate.open(); return false;">Support us</a>

<!-- or from your own script: -->
<script>
    document.getElementById('menu-give').addEventListener('click', function () {
        CmsDonate.open();
    });
</script>

Advanced & Security

Donor Fields (Step 8)

Security Controls (Step 8)

Test Mode

Toggle Test Mode in Step 8 to skip the actual credit-card charge. Everything else runs exactly as it would for a real donation — the submission is imported, the confirmation email goes out, the donor sees the thank-you screen — but no money moves. This is the easiest way to walk through the full donor flow end-to-end while you’re still tuning the form. Disable before going live.

Processing-Fee Opt-in

When enabled, donors see a checkbox under the amount tiles: “Add X% to cover processing fees.” The total chip on the right updates live. On submit, a separate fee transaction is added so your reports stay clean and the gross total matches what was charged.

Working With the Classic Forms List

Forms Studio donation forms appear in your existing Web Forms list alongside classic forms. A few behaviors are different on those rows:

• Edit — opens the Forms Studio wizard, not the classic editor. The redirect is automatic.
• Preview — disabled. The wizard already has a built-in live preview.
• Copy — disabled. Duplicating a Forms Studio donation form isn’t supported yet.

Both disabled buttons show a tooltip explaining why when you hover over them.