How to add a donation form to Blocksy

Blocksy is built for the block editor, so the Donation Form block on a Donate page plus a Button element in the header builder covers most sites.

Short answerInstall Donor Merchant, add the Donation Form block to a "Donate" page, and set its Page Structure to Narrow or Normal. Then open Customizer > Header, drag in the Button element and link it to the page.

Does Blocksy have a donation feature?

No. Blocksy and its companion plugin do not process payments. Blocksy's Charity starter site lists its bundled plugins as Stackable, Elementor, Brizy and WPForms, with no donation plugin among them. So whether you imported that starter site or built from scratch, you add a donation plugin yourself.

Donor Merchant is a free WordPress plugin for one-time and recurring donations through Stripe and PayPal, with donor records, receipts and a donor portal. Every feature is free. Install it from Plugins > Add New by searching for "Donor Merchant" (WordPress 6.2+, PHP 7.4+, HTTPS), then follow Getting started.

Where do I put the form in Blocksy?

  1. Create a page called "Donate" under Pages > Add New.
  2. Open the block inserter, search for Donation Form and add it.
  3. You can type an optional heading in the block. For a campaign form, use the shortcode with campaign="3" instead.
  4. Publish.

If your starter site uses Elementor or Brizy for that page, paste [donor_merchant] into the builder's shortcode element instead. [donor_merchant campaign="3"] ties it to a campaign, and [donor_merchant_progress campaign="3"] adds a goal thermometer. Donor Merchant > Settings > Shortcodes lists your campaign IDs.

Which Blocksy page settings suit a donation page?

Blocksy's defaults for all pages are under Customizer > Pages. You can override any of them for one page from that page's own Blocksy settings in the editor, where most options also have an Inherit choice that goes back to the Customizer value.

  • Page Structure: Blocksy offers Narrow, Normal, Left Sidebar and Right Sidebar. Pick Narrow for a short page of text and a form, or Normal if you lay out columns. Avoid the sidebar options on a Donate page; they give visitors more places to click away.
  • Content Area Style: Wide lets content sit on the page background; Boxed puts it in a container. The form already draws its own white card up to 540 pixels wide, so Wide avoids a box inside a box.
  • Page Title: Type 1 is a contained title, Type 2 a full-width hero that suits a background image. A hero with a photo of your work above the form is a good use of Type 2.

How do I add a Donate button to the Blocksy header?

  1. Go to Appearance > Customize, open Header and the Elements tab.
  2. Drag the Button element into a header row.
  3. Select it and set the Label to "Donate". Leave Click Behaviour on Link and enter your Donate page URL.
  4. Choose Filled or Outlined and a size. Default size follows your global button settings at Customizer > General > Buttons.
  5. Publish.

Leave User Visibility showing the button to everyone. If the label alone is not clear to screen reader users, for example when you show only a heart icon, fill in Custom Aria Label with something like "Donate to our organization".

Mobile visitors see a separate layout with the Menu - Mobile element in the Off Canvas Area. Add the Button there too, or add your Donate page to the menu that the mobile menu shows.

What about opening the form in a pop-up?

With Blocksy Pro, the Button's Click Behaviour can be Open Pop-up, which opens a Pop-up Content Block. You could put the Donation Form block in that pop-up. We have not tested Donor Merchant inside Blocksy pop-ups, so a dedicated Donate page is the safer default. A page can also be shared, linked from emails and found in search. If you do try a pop-up, test a card payment, PayPal and Apple Pay or Google Pay on a phone before relying on it.

Can I reuse a donation appeal with Content Blocks?

Yes, with Blocksy Pro. Go to Blocksy > Content Blocks, click Add New and choose the Hook type. You get a block editor canvas, so add a short appeal with a button to your Donate page, or the Donation Form block itself. Then set:

  • Display Conditions: where it appears, by page type, taxonomy or user role. Exclude the Donate page so the appeal does not sit above its own form.
  • Location and Priority: which hook position to use. While logged in, click Hook Locations in the WordPress toolbar on the front end to see every position marked on the page.
  • Visibility: desktop, tablet or mobile.

Since Blocksy 2, a Content Block can also be placed inside any page with the Content Block block, and the header builder has a Content Block element. Donor Merchant only loads Stripe.js and the PayPal script on pages where the form renders, so an appeal with a button adds no payment scripts to the rest of your site.

Do Blocksy's performance settings affect the form?

Blocksy's options are under Customizer > General Options > Performance: Dynamic CSS Output (File or Inline), Disable Emojis Script, Store Gravatars Locally and Image Lazy Load. None of them changes how the payment scripts load.

Blocksy's own docs advise against turning on aggressive CSS or JavaScript processing in a separate optimization plugin without testing, because overlapping optimizations can break dynamic features. The donation form is one of those features. The page is safe to page-cache, but if a plugin delays or combines JavaScript and the card fields do not appear, exclude js.stripe.com, www.paypal.com/sdk/js and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js, or switch that feature off for the Donate page. See the page cache exclusions guide.

How do I match the form to my Blocksy colors?

Blocksy's Global Color Palette is at Customizer > General Options > Colors. Blocksy suggests using Color 1 for your primary brand or accent color. Click that swatch and copy its HEX Value.

In Donor Merchant > Settings > Forms > Form style, choose Custom, paste the value and check the live preview. Then pick the button shape (pill, rounded or sharp) closest to your Blocksy buttons.

If you use Blocksy's dark mode (the Color Switch header element), note that the donation form keeps its white card in both modes. Preview the Donate page in dark mode and make sure the text around the form still reads well.

What should I check before going live?

  • Make a test gift in Stripe or PayPal test mode on a phone and on a desktop.
  • Set up webhooks if you take recurring gifts, so renewals are recorded.
  • If you set a thank-you page under Donor Merchant > Settings > General, give it the same Page Structure.

We checked these steps against Blocksy's documentation in October 2026. Theme menus change between versions, so if a label differs in yours, look for the equivalent element or setting.

Sources

Get Donor Merchant

Free from WordPress.org, with recurring giving included.

Download Donor Merchant free Or try the demo first.