How to add a donation form to Uncode

Uncode has no donation feature of its own, so you add one with a plugin and place it with Uncode's page builder.

Short answerInstall Donor Merchant, create a page, and paste [donor_merchant] into a Text Block in Uncode's page builder. Add a Donate link to Uncode's Call To Action Menu so it shows as a button in the header. If the card fields do not appear, exclude the payment scripts from any JavaScript delay setting in your cache plugin.

Does Uncode include a donation form?

No. Uncode is a general-purpose theme from undsgn. Its documentation covers contact forms through Contact Form 7 and Gravity Forms, but nothing for taking payments or donations. So there is no built-in donation system to switch off. You add one with a plugin.

Donor Merchant is a free WordPress plugin that takes one-time and recurring gifts through Stripe and PayPal, keeps donor records, and sends 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. Then connect Stripe or PayPal by following Getting started.

Where do I put the form in Uncode?

Uncode ships a tailored version of WPBakery Page Builder with 28+ content elements. The one to use is Text Block. WPBakery's own documentation says the way to insert a third-party shortcode is to add a Text Block and type the shortcode into its editor.

  1. Create a page called "Donate" and open it with the Uncode WPBakery Page Builder.
  2. Add a Row with one column, then add a Text Block.
  3. Paste [donor_merchant] into the Text Block and save.

The shortcode takes options. [donor_merchant campaign="3"] ties the form to a campaign, and [donor_merchant title="Support our work"] changes its heading. To show a goal thermometer, add a second Text Block with [donor_merchant_progress campaign="3"]. You can find your campaign IDs under Donor Merchant > Settings > Shortcodes. If you edit a page with the block editor instead of the page builder, the Donation Form block does the same job.

The form is a white card up to 540 pixels wide that centers itself. A full-width single column works well. A 2/3 column next to a short appeal also works.

Reusing the form with a Content Block

Uncode's Content Blocks are reusable sections built with the page builder (Content Block > Add New). If you run several campaign pages, build the form section once as a Content Block and drop it into each page. Uncode's docs note that the Content Block module is meant for a first-level Row with a single 12/12 column, not inside nested inner rows.

Only put the form where people expect to give. Donor Merchant loads Stripe.js and the PayPal script only on pages where the form renders, so a form in a site-wide footer block would load those scripts on every page.

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

Uncode has a separate menu area for this, the Call To Action Menu. According to Uncode's documentation:

  1. Go to Theme Options > Navbar > Additional and set Hide Call To Action Menu to off.
  2. In Appearance > Menus, create a menu with a single link to your Donate page.
  3. Assign it to the Call To Action Menu location under Manage Locations.

To make the link look like a button, open the menu item and turn on its Button Style option. You can then add Uncode's button classes in the item's CSS Classes field, such as btn-accent for your accent color or btn-round for rounded corners. If the CSS Classes field is missing, enable it under Screen Options at the top of the Menus screen.

Uncode 2.8.0 and later also has Menu Extra HTML fields for Overlay, Off Canvas and Lateral menus. A plain link to your Donate page is fine there. Uncode says these fields are for simple details and complex HTML may not work, so do not put the form itself in them.

Which Uncode performance settings affect the form?

Uncode keeps its speed options under Theme Options > Performance. Most of them change how Uncode loads its own files. A few are worth knowing about on a donation page.

  • Production Mode lets browsers cache Uncode's CSS and JS and minifies its JS. Uncode says to turn it on if you use WP Rocket's Minify JavaScript files option.
  • Split & Modular JS, Defer CSS Styles, Move jQuery to Footer and the other options added in Uncode 2.5.0 are meant to be enabled in steps. Uncode's note says not to switch them all on together. Load your donation page after each change. The form's own script does not use jQuery, so moving jQuery does not affect it.
  • Optimize Contact Form 7 Assets and Optimize WooCommerce Assets are about those two plugins' files only.

Cache plugins and delayed JavaScript

Uncode recommends WP Rocket and warns that its Load JavaScript deferred and Delay JavaScript execution options can produce unexpected results. If you use either one and the card fields or PayPal buttons do not appear, add these three entries to the plugin's JavaScript exclusion list, or turn delay off for the donation page:

  • js.stripe.com
  • www.paypal.com/sdk/js
  • wp-content/plugins/donor-merchant/assets/js/donor-merchant.js

Uncode's docs also cover two free cache plugins, Breeze and WP Fastest Cache, and list Uncode files to exclude from their JavaScript minification. Those plugins' exclusion fields accept the three entries above as well, if the payment fields go missing.

Uncode also suggests a WP Rocket cache lifespan of 10 hours or less, because some theme features use WordPress nonces that expire on cached pages. The donation form does not use a nonce, so its page is safe to cache. The donor portal and receipt links send no-cache headers on their own. See page caching and donation forms for the full list.

If your site runs behind Cloudflare, Uncode's support article says to try disabling Rocket Loader when JavaScript misbehaves. Rocket Loader changes how every script on the page loads, payment scripts included.

Will the Uncode Privacy plugin hide the form?

It can if you set it up that way. The optional Uncode Privacy plugin adds a Consent tab to each row, which can include or exclude that row depending on a visitor's consent. Keep the donation form in a row with no consent rule, or visitors who have not answered the banner may see an empty page. Its built-in consent types cover services such as YouTube, Google Fonts and tracking codes, not payment processors.

How do I match the form to my Uncode colors?

Uncode sets its main color under Theme Options > Customize > General > Accent color. Copy that hex value. Then go to Donor Merchant > Settings > Forms > Form style, choose Custom, paste it, and check the live preview. Pick a button shape to match your site: Pill if your Uncode buttons use btn-circle, Sharp if they use btn-square, or Rounded for something in between.

The form draws its own white card, with its own field and label colors, so it shows as a light panel on a Dark skin row. Its optional heading has no color of its own, so if a Dark skin turns it white, add .dm-form .dm-form__title { color: #1e2430; } as custom CSS. The card fields themselves are drawn by Stripe inside a secure frame, which theme CSS does not reach. More options are in form settings.

A short checklist before you launch

  • Make a small real donation and confirm it appears under Donor Merchant > Donations.
  • Set up webhooks if you offer recurring giving, so renewals are recorded. See webhooks.
  • Test the page on a phone, with your cache plugin and every Uncode performance option you use turned on.
  • Check that the Call To Action Menu shows on mobile in your chosen menu layout.
About this guideChecked against Uncode's documentation in October 2026. We have not tested Donor Merchant inside Uncode. Theme menus change between versions; if a label differs in yours, look for the equivalent option or element.

Sources

Get Donor Merchant

Free from WordPress.org, with recurring giving included.

Download Donor Merchant free Or try the demo first.