How to add a donation form to Betheme

Betheme's charity pre-built websites look the part, but the theme does not take donations, so you add a plugin and place its form with BeBuilder.

Short answerInstall Donor Merchant, create a Donate page, and in BeBuilder add a Column item (or a Plain Text item) containing [donor_merchant]. Do not use the Code item, which displays code rather than running it. For the header, point the Action Button at your Donate page under Betheme > Theme Options > Header & Subheader > Extras.

Does Betheme include a donation system?

No. Muffin Group offers charity pre-built websites for Betheme (such as BeCharity), but the theme's documentation and template pages describe no donation or payment system. A Donate button on a pre-built site is just a link until you add a plugin behind it. Muffin Group's support staff have also said on their forum that their policy is not to support third-party plugins, so test the donation page yourself after setup.

Donor Merchant is a free WordPress plugin that takes one-time and recurring gifts through Stripe and PayPal, records donors, sends receipts, and gives donors a portal with their giving history and receipts. Every feature is free. Install it from Plugins > Add New by searching for "Donor Merchant". It needs WordPress 6.2 or newer, PHP 7.4 or newer, and HTTPS.

Where do I put the form in Betheme?

BeBuilder works with Sections, Wraps and Items. You add an Item with the +Item button on a Wrap, or drag one in from the left-hand bar.

  1. Create a page called "Donate" and open it in BeBuilder.
  2. Add a Section with a 1/1 Wrap, then click +Item.
  3. Choose the Column item. Muffin Group's element page says its content allows "Shortcodes and HTML tags."
  4. Paste [donor_merchant] as the content and save.

Muffin Group support also points to the Plain Text/HTML item for parsing shortcodes. In a 2023 forum answer they wrote: "The code element is not for parsing shortcodes of custom code but for displaying it." So if you see the literal text [donor_merchant] on the page, you used the Code item. Swap it for a Column or Plain Text item.

The shortcode takes options. [donor_merchant campaign="3"] ties the form to a campaign, and [donor_merchant title="Support our work"] changes its heading. For a goal thermometer, add a second item with [donor_merchant_progress campaign="3"]. Your campaign IDs are listed under Donor Merchant > Settings > Shortcodes. On a page edited in the WordPress block editor, use the Donation Form block instead.

The form is a white card up to 540 pixels wide that centers itself, so a 1/1 Wrap or a 2/3 Wrap beside your appeal both work.

Reusing the form on several pages

Betheme Templates are custom post types that contain only BeBuilder content, so you can build a layout once and reuse it on other pages. That suits a charity running several campaign pages. Keep the form on giving pages only. Donor Merchant loads Stripe.js and the PayPal SDK only where the form renders, so a form in a site-wide footer template would load them on every page.

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

Classic header. Betheme's header has an Action Button. Go to Betheme > Theme Options > Header & Subheader > Extras and fill in:

  • Title: "Donate".
  • Link: the URL of your Donate page.
  • Options: leave "open in a new window" off, so donors stay on your site.

Header Builder. If your site uses a header made with Betheme's Header Builder 2.0, add the Donate link in that header template instead. Add your Donate page to the menu that the Menu element shows, or place an Icon element next to it and give it a link to the page. The Header Builder also has a Plain Text/HTML element, but use it for a link, not for the form itself.

Which Betheme performance options affect the form?

The settings live under Betheme > Theme Options > Performance. Most of them only change how Betheme's own files load.

  • jQuery location (Header or Footer). Betheme warns that "Footer location may crash some plugins which load scripts in header too." Donor Merchant's form script loads in the footer and does not use jQuery, so this setting does not affect it directly. Other plugins on the same page may still care.
  • CSS location. Moving CSS to the footer "may change the weight of some CSS declarations." If the form looks slightly off after this change, that is the likely cause.
  • Minify CSS and JS. These switch Betheme to its own minified theme files.
  • Cache assets and Static CSS. These cache Betheme's assets and write theme-option CSS to a file.

Problems with payment fields usually come from a separate cache or optimization plugin that delays or combines JavaScript. If the card fields do not appear, try excluding js.stripe.com, the PayPal SDK (www.paypal.com/sdk/js) and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js from that plugin, or turn the optimization off for the donation page. Clear every cache and reload. The donation page is safe to cache, since the form has no nonce, and the donor portal and receipt links send no-cache headers automatically. See the page cache guide for details.

How do I make the form match Betheme's colors?

Betheme's base color is the Theme color under Theme Options > Colors > Content. Copy that hex value. In Donor Merchant, go to Settings > Forms > Form style, choose Custom, and paste it. The live preview shows the result.

For the button shape, check Theme Options > Global > Buttons. Betheme's button styles are default, flat, round and stroke, and Betheme sets one border radius for all button types. If you use round buttons, choose pill in Donor Merchant. For square corners, choose sharp. Otherwise, rounded is the default. The form's styles are scoped to .dm-form, so they do not change the rest of your site.

What should I check before going live?

  • Connect Stripe or PayPal (Stripe setup, PayPal setup).
  • Add webhooks if you take recurring gifts, so renewals are recorded (webhooks).
  • Pick a thank-you page under Donor Merchant > Settings > General if you want one.
  • Make a test-mode gift on desktop and phone with your cache plugin on. Betheme's Header Builder has separate mobile settings, so check the Donate link on a phone too.
About these stepsWe checked these steps against Betheme's documentation and Muffin Group's support answers in October 2026 (Betheme 29.0.2.1 was current). We have not tested Donor Merchant inside every Betheme version. Theme menus change between versions, so if a label differs in yours, look for the equivalent item or setting.

Sources

Get Donor Merchant

Free from WordPress.org, with recurring giving included.

Download Donor Merchant free Or try the demo first.