How to add a donation form to Kadence

Kadence is a block-editor theme, so a Donate page with the Donation Form block and a Button item in the header covers most sites.

Short answerInstall Donor Merchant, create a "Donate" page and add the Donation Form block. In the page's Kadence Page Settings, pick a layout without a sidebar. Then open Appearance > Customize > Header, add the Button item and link it to the page.

Does Kadence have a donation feature?

The Kadence theme does not process payments. Its nonprofit starter templates are a different matter. When Kadence announced its Charity starter template in 2021, it said the template "will automatically install and activate the GiveWP plugin" and comes with 10 example donation forms. If you started from a charity or donation starter template, look under Plugins to see what it installed.

You can keep the template's design and swap the forms. Add Donor Merchant, rebuild the Donate page with its block, then use Donor Merchant > Import to bring in a CSV export of past gifts so donor history carries over. Recurring gifts that are already running stay with the plugin that created them, because they live at Stripe or PayPal. Our guide to moving donor history between plugins explains the order.

To add the form, install Donor Merchant (free, recurring gifts included) 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 Kadence?

  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 you use Kadence Blocks, a Row Layout block with your appeal in one column and the form in the other keeps the reason to give next to the form. The form is a white card up to 540 pixels wide that centers itself in whatever column it sits in.

For a campaign, or anywhere blocks are not available, use the shortcode [donor_merchant] in a Shortcode block or widget. [donor_merchant campaign="3"] ties it to a campaign and [donor_merchant_progress campaign="3"] adds a goal thermometer. Your campaign IDs are listed under Donor Merchant > Settings > Shortcodes.

Which Kadence page layout works best for a donation page?

Kadence sets defaults for all pages under Appearance > Customize > Posts/Pages Layout > Page Layout. The Default Page Layout options are Normal, Narrow, Fullwidth, and Left or Right Sidebar. You can override them for one page: click the Page Settings icon at the top right of the editor and set the layout and sidebar there.

For a Donate page, choose Normal or Narrow with no sidebar. Fullwidth does not make the form any wider. It stretches your text across the screen, and Kadence notes that a boxed site layout may still hold it to the container width.

Two more settings in the same panel matter here:

  • Content Style: Boxed puts the page content in a box with padding; Unboxed removes it. The form already draws its own card, so Unboxed avoids a box inside a box.
  • Page Title: you can disable it per page. Kadence warns this removes the page's H1, so add your own heading block above the form if you do.

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

The free Kadence theme includes a Button header item. Theme Kit Pro adds a second one.

  1. Go to Appearance > Customize and open the Header tab.
  2. Drag Button from Available Items into a header section, or click the plus icon in a section and choose it.
  3. Set the Label to "Donate" and the URL to your Donate page. Leave Open in New Tab off so donors stay on your site.
  4. Choose a Button Style (filled or outline), a size, and colors for the normal and hover states in the Design tab.
  5. Publish.

Keep Button Visibility set to everyone. The other choices show it only to logged-in or logged-out visitors.

Phones use a separate layout. Click the Tablet/Mobile tab in the header builder: mobile visitors open your menu through the Trigger item and the Mobile Navigation in the Off Canvas area. The simplest way to reach them is to add your Donate page to the menu that Mobile Navigation uses, under Appearance > Menus.

Can I reuse a donation appeal with Kadence Elements?

Yes, with Kadence Theme Kit Pro, which provides Hooked Elements. Turn them on at Appearance > Kadence, then go to Appearance > Kadence > Elements and click Add New Element. Two element types suit donations:

  • Content Section inserts block content at a hook location, such as after the content of every blog post. Build it in the block editor with a short appeal and a button to your Donate page, or with the Donation Form block itself.
  • Fixed Section pins a section to the top or bottom of the screen as visitors scroll. A slim bar with a Donate button suits a time-limited appeal.

Each element has Placement, Display Settings, User Settings, Device Settings and Expires options. Expires is useful for a campaign with an end date. Use Display Settings to exclude the Donate page itself so the appeal does not appear above its own form.

Every element also has a shortcode such as [kadence_element id="123"], listed in the Elements screen. Kadence points out that the element's Display Settings still apply, so if the shortcode shows nothing, check those rules first.

Donor Merchant only loads Stripe.js and the PayPal script on pages where the form renders. An appeal with a button adds no payment scripts to your blog posts.

Do Kadence's performance settings affect the form?

Kadence's options are under Customizer > General > Performance: Microdata Schema, Optimized Group Block, Scroll To ID, Lightbox, Load Google Fonts Locally and Enable CSS Preload. None of them delays or combines JavaScript. Kadence does say CSS Preload may need testing alongside other performance tools, so if you turn it on, load the Donate page once and check the form looks right.

Script optimization usually comes from a separate plugin. The donation page is safe to page-cache. If a plugin delays or combines JavaScript and the card fields never appear, exclude js.stripe.com, www.paypal.com/sdk/js and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js, or turn the feature off for the Donate page. See the page cache exclusions guide.

How do I match the form to my Kadence colors?

Kadence sets site-wide button colors under Customizer > Colors & Fonts > Buttons, with Base, Secondary and Outline styles. Copy the background color of the Base button style.

In Donor Merchant > Settings > Forms > Form style, choose Custom, paste the color and check the live preview. Then match the button shape: pill, rounded or sharp, whichever is closest to the border radius in your Kadence button settings.

What should I check before going live?

  • Make a test gift in Stripe or PayPal test mode on a phone and 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 layout as the Donate page.

We checked these steps against Kadence's documentation in October 2026. Kadence's 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.