[donor_merchant]. This works with the free version of Elementor, on Hello Elementor or any theme built for Elementor. If you have turned on Elementor's Element Caching, set the widget that holds the form to Inactive so its payment fields load.What do I need before I start?
- Elementor, free or Pro. The free plugin is enough for the form itself. You only need Elementor Pro if you want to build your header with its Theme Builder.
- Donor Merchant, from Plugins > Add New: search for "Donor Merchant". It needs WordPress 6.2 or later, PHP 7.4 or later, and HTTPS on the site.
- A payment account. Connect Stripe, PayPal, or both. The Stripe setup and PayPal setup docs walk through the keys.
Where do I put the donation form in Elementor?
Use a page of its own, such as /donate/. A dedicated page gives you one address to put in menus, emails and social posts.
- Create the page in WordPress and choose Edit with Elementor.
- In the Elementor editor, click + to show the widgets, then drag the Shortcode widget onto the canvas.
- In the widget's Content tab, under Shortcode, paste
[donor_merchant]. - Publish, then open the live page and make a test donation with your gateway in test mode.
To tie the form to a fundraising campaign, use [donor_merchant campaign="3"], with your campaign's ID in place of 3. To change the heading, add a title: [donor_merchant title="Support our work"]. Donor Merchant > Settings > Shortcodes lists every shortcode with your real campaign IDs, ready to copy.
A campaign form already shows its own goal bar. If you want the thermometer somewhere else, such as on your home page, add a second Shortcode widget with [donor_merchant_progress campaign="3"]. See campaigns and goal thermometers.
Why the Shortcode widget and not the Text Editor widget?
Elementor's own help page says you can also run shortcodes in the Text Editor widget, but recommends the Shortcode widget because it renders the shortcode right in the editor. It also keeps the form in one element you can find again and set caching on, which matters below.
If you build some pages in the WordPress block editor instead, use the Donation Form block there. It takes an optional heading; for a campaign, use the shortcode in a Shortcode block.
How do I add a Donate button to the header?
That depends on how your header is built.
- Hello Elementor's own header. Hello's built-in header shows your site logo and a WordPress menu, with its layout set in Elementor's Site Settings. Add the button as a menu item: in Appearance > Menus, add a Custom Link to your donation page, label it "Donate", and save the menu.
- An Elementor Pro Theme Builder header. Go to Elementor > Theme Builder, open your Header, and add a Button widget. Type "Donate" in its Text field and your donation page in its Link field, then publish. If you use Hello Elementor with a Theme Builder header, Hello's settings page (Hello in the admin menu) has a Disable theme header & footer setting so the theme's own header does not load as well.
- Another Elementor-based theme. Most have a header builder of their own. Add a button or menu link that points to the donation page in the same way.
Link to the page rather than opening the form in a popup. A page has a URL you can share, it is simpler to test, and PayPal opens its own window during checkout.
Elementor Pro has a PayPal Button widget. Do I still need a plugin?
Maybe not. Elementor Pro's PayPal Button widget has a Donation transaction type with a fixed amount or any amount, and a Subscription type that bills daily, weekly, monthly or yearly. If one PayPal button covers what you need, that is a reasonable choice.
Elementor's documentation for that widget covers the button and its PayPal settings. It does not describe donor records, receipts or a donor portal. Elementor Pro also has a Stripe Button widget for a fixed-price payment. Donor Merchant is the step up when you want donor-chosen card, Apple Pay and Google Pay gifts through Stripe, US bank debit, recurring gifts on Stripe or PayPal, every donor and gift stored in your own WordPress database, printable receipts and annual statements, and a donor portal. All of it is free.
Which Elementor performance settings affect the form?
Element Caching
Element Caching stores a widget's finished HTML in the database and serves that copy instead of rendering the widget again. Elementor's help page warns that it cannot be used on elements that contain dynamic information such as shortcodes. It is an experimental feature and is inactive by default.
This matters for a donation form because Donor Merchant loads its styles, its script, Stripe.js and the PayPal SDK only when the form renders. A cached copy of the widget could show the form without working payment fields. If you have turned Element Caching on:
- Click the Shortcode widget that holds the form.
- Open the Advanced tab and find Cache Settings.
- Choose Inactive, then update the page.
Do the same for any widget holding [donor_merchant_progress], or the amount raised will lag behind. To turn the feature off for the whole site, Elementor's docs point to Elementor > Editor > Settings, the Performance tab, Element Cache, set to Disable.
Optimization and caching plugins
The donation page itself is safe to cache, because the form carries no nonce. The donor portal and receipt links send no-cache headers on their own. If a plugin that delays or combines JavaScript is active and the payment 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 setting, or turn it off for the donation page. Our page cache exclusions guide shows where those settings live in the common caching plugins.
How do I match the form to my Elementor colors?
Elementor keeps your palette in Site Settings under Global Colors. Its four default slots are Primary, Secondary, Text and Accent, and Elementor uses the Accent color for links and button backgrounds. That is usually the right color for the donate button too.
- Copy the hex code of your Accent color from Site Settings.
- In WordPress, go to Donor Merchant > Settings > Forms > Form style.
- Choose the custom color, paste the hex code, and check the live preview.
- Pick the button shape (pill, rounded or sharp) closest to your buttons under Site Settings > Theme Style.
If you set Form Fields or Buttons under Site Settings > Theme Style, those styles can apply to the form's own fields and button, so check the live page. The card fields are drawn by Stripe and are not affected. The form settings docs cover amounts, frequencies and the other options.
What should I check before going live?
- Make a test donation on the published page, on a phone as well as a desktop.
- If you offer monthly giving, set up webhooks. Recurring renewals are recorded through them.
- Optionally choose a thank-you page under Donor Merchant > Settings > General.
Checked against Elementor's documentation in October 2026. Elementor's menus change between versions; if a label differs in yours, look for the equivalent setting.