How to add a donation form to Astra

Astra is built around the block editor, so the quickest route is a Donate page with the Donation Form block and a header button that points to it.

Short answerInstall Donor Merchant, create a page called "Donate", and add the Donation Form block. In the page's Astra Settings panel, choose the Normal container with no sidebar. Then open Appearance > Customize > Header Builder and add a Button element that links to the page.

Does Astra have a donation feature?

The Astra theme itself does not take payments. Some of Astra's Starter Templates do: Astra's own nonprofit tutorial says the free version of GiveWP "was installed along with the Charity Starter Template" and installs automatically alongside some templates. Check Plugins to see whether that happened on your site.

If you would rather use Donor Merchant, run both side by side while you rebuild the donation page, then switch. Donor Merchant's importer (Donor Merchant > Import) reads a CSV export of past gifts so your donor history comes with you. Active recurring gifts are the exception: they live at Stripe or PayPal and stay tied to the plugin that created them. Our guide to moving donor history between plugins covers the order of steps.

To replace or skip GiveWP, install Donor Merchant (free, every feature included) from Plugins > Add New by searching for "Donor Merchant" (WordPress 6.2+, PHP 7.4+, HTTPS), then follow Getting started to connect a payment account.

Where do I put the form in Astra?

Astra pages are edited in the block editor, so use the block:

  1. Go to Pages > Add New and title the page "Donate".
  2. Click 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. Leave both empty for a general fund.
  4. Publish.

If you build pages with Elementor or another builder on top of Astra, paste the shortcode [donor_merchant] into that builder's shortcode or text element instead. Options work the same way: [donor_merchant campaign="3"] ties the form to a campaign, and [donor_merchant_progress campaign="3"] shows its goal thermometer. Donor Merchant > Settings > Shortcodes lists your campaign IDs. See Shortcodes and the form block for the full list.

Which Astra layout should the Donate page use?

Open the page in the editor and click the Astra icon in the top toolbar to open the Astra Settings panel. Astra documents these per-page options: Container Layout, Sidebar, Disable Elements (header, footer, banner area) and Advanced Settings. Page settings override the global ones in the Customizer.

Astra offers three container layouts:

  • Normal keeps the standard content width and is the only layout that can show a sidebar.
  • Narrow gives a condensed reading column with no sidebar.
  • Full Width stretches the container to 100% of the browser, also with no sidebar.

For most donation pages, choose Normal with No Sidebar, or Narrow if the page is mostly text. The form is a white card at most 540 pixels wide that centers itself, so Full Width does not make the form wider. It only spreads your intro text across the screen, which is harder to read. A sidebar pulls attention away from the form. Astra's default for single pages is already Normal with No Sidebar, so you may only need to confirm it.

Astra's docs use a pricing page as their example for turning off the primary header (Advanced Settings > Header Rows) so visitors are not distracted by links. You can do the same on a donation page, but donors want to see your name and logo before they pay, so keep at least the logo visible.

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

Astra's Header Builder has a Button element. The free theme includes one; Astra Pro allows more.

  1. Go to Appearance > Customize > Header Builder.
  2. Click the + icon at the right of the primary header row and choose Button.
  3. Click the new button. Set its text ("Donate") and link (your Donate page) in the General tab.
  4. Use the Design tab to set text, background and border colors, border radius, box shadow and padding, so it stands out from your menu links.
  5. Click Publish.

The mobile header is set up separately. In the Header Builder, switch to the mobile device view, open the off-canvas menu area, click + and add the button there too. If you skip this step, phone visitors may never see it.

A plain menu link works as well. Add your Donate page to the primary menu under Appearance > Menus so it also appears in the mobile menu.

Can I show the form on many pages with Astra Pro?

Yes, if you have Astra Pro. Its Site Builder (the replacement for Custom Layouts since Astra 4.5.0) includes a Hooks layout type that inserts content at theme hook locations. Turn it on under Astra > Astra Pro Modules with the Site Builder toggle, then open Astra > Site Builder, hover over Hooks and click Create Layout.

The layout opens in the block editor, so you can add the Donation Form block, or a short appeal with a button to your Donate page. In the Astra panel, set:

  • Placement: the hook where it should appear, such as after the post content.
  • Display On and Do Not Display On: for example, all posts but not the Donate page itself.
  • Device Visibility and an optional start and end time, which suit a time-limited appeal such as a year-end drive.

A full form after every blog post is a lot. A short call to action in the hook, with the form on one Donate page, is usually enough. Donor Merchant only loads Stripe.js and the PayPal script on pages where the form actually renders, so a text-and-button hook adds nothing to your other pages.

Do Astra's performance settings affect the form?

Astra's own performance options sit under Astra > Settings > Performance: Load Google Fonts Locally, Preload Local Fonts, and a Flush Local Fonts Cache button. These deal with fonts, not scripts, so they do not change how the payment fields load.

Script problems usually come from a separate caching or optimization plugin. The donation page is safe to page-cache. 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 from that feature, or turn it off for the Donate page. Our page cache exclusions guide covers the common plugins.

How do I match the form to my Astra colors?

Astra's site-wide colors live under Appearance > Customize > Global > Colors. The Theme Color there is used for buttons and other theme elements, and newer versions manage it through the Global Color Palette. Copy that hex value.

Then go to Donor Merchant > Settings > Forms > Form style, choose Custom, paste the color and watch the live preview. Pick a button shape (pill, rounded or sharp) that matches the radius you gave the header button. The form's styles are scoped under .dm-form, so changing them does not touch the rest of your theme.

What should I check before going live?

  • Run one test gift with Stripe or PayPal in test mode, on desktop and on a phone.
  • Set up webhooks if you offer recurring gifts. Renewals are recorded through them.
  • Optionally choose a thank-you page under Donor Merchant > Settings > General, and give it the same layout as the Donate page.

We checked these steps against Astra's documentation in October 2026. Astra's menus change between versions, so if a label differs in yours, look for the closest 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.