How to Add a Donation Form to Salient

To add a donation form to a Salient site, install the free Donor Merchant plugin, open your Donate page in the Salient WPBakery Page Builder, add a Raw HTML element and paste [donor_merchant]. ThemeNectar's documentation says shortcodes inside Raw HTML still run. For the header, give a Donate menu item a button style in Salient's menu item options.

What do I need before I start?

Salient pages are built with the Salient WPBakery Page Builder, a version of WPBakery that ThemeNectar bundles and rebuilds for the theme. You do not need a WPBakery license. For Donor Merchant you need WordPress 6.2 or newer, PHP 7.4 or newer and HTTPS.

Install Donor Merchant from Plugins > Add New, then connect Stripe or PayPal. For recurring gifts, add the webhook as well so renewals are recorded.

Where do I put the form in Salient?

Create a page called "Donate" and open it in the page builder. You can use the backend view or the Frontend Editor, which edits on top of the live layout.
Click + to open the element list and add Raw HTML to a column.
Paste [donor_merchant] into it and save the element.
Update the page and view it while logged out.

Two things from ThemeNectar's notes on Raw HTML are useful to know. The content is stored base64 encoded, so if you switch the page to Classic Mode the element looks like a block of gibberish; that is expected. And shortcodes inside it still run, while WordPress's automatic paragraph tags are not added, so the form will not pick up stray line breaks.

Variations you may want:

[donor_merchant campaign="3"] ties the form to a campaign. Find IDs under Donor Merchant > Settings > Shortcodes.
[donor_merchant title="Support our work"] sets the heading.
[donor_merchant_progress campaign="3"] in a second Raw HTML element shows a goal thermometer. See campaigns.

Salient's rows and columns let you set column widths per device. The form stops at 540 pixels wide and centers itself, so a full-width row works, and so does a 2/3 column beside your appeal.

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

Salient can style any top-level menu item as a button, which is how its demos put a call to action at the end of the navigation:

Go to Appearance > Menus, add your Donate page to the header menu and save.
Open the Donate item and click Salient menu item options.
On the Menu Item tab, set Menu Item Link Button Style to the style you want, and adjust the text color if needed.
Turn on Persist In Mobile Navigation Header (Salient 14 and later). By default Salient moves every item into the off-canvas menu on phones; this keeps Donate visible in the mobile header.

To separate the button from the rest of the menu, Salient has a menu location called Top Navigation Menu Pull Right (Appearance > Menus > Manage Locations). Create a menu holding only the Donate link and assign it there. ThemeNectar notes this location only appears with compatible header layouts, chosen in the Header Navigation tab of the Salient options panel.

Does Salient include its own donation system?

No. Salient's documentation says the theme has no built-in form builder; it styles forms made by plugins such as Fluent Forms, WPForms and Contact Form 7. It does not describe any donation or payment feature, so there is nothing to switch off. Donor Merchant supplies the form, payments, receipts and donor records.

Will Salient restyle the donation form?

Possibly. Theme Options > Form Styling sets how fields, labels and submit buttons look across the site, and ThemeNectar says it applies to whichever plugin generates the form. Donor Merchant's styles are scoped under .dm-form, but site-wide input styles can still reach its text fields. After you change the Overall Form Style, look at your Donate page and check that the amount and name fields read clearly. If something needs a small fix, Salient's site-wide CSS box is Theme Options > General Settings > CSS/Script Related > Custom CSS Code; start selectors with .dm-form.

How do I match the form to Salient's colors?

Salient's palette lives in Theme Options > Accent Colors: Accent Color, Extra Color #1 to #3 and two gradients. Copy the Accent Color value into Donor Merchant > Settings > Forms > Form style as a custom color and check the live preview. For the button shape, look at Salient's Button Styling Choice in General Settings and pick the closest Donor Merchant shape: pill, rounded or sharp. See form settings.

Which Salient performance settings affect the form?

Salient has its own Performance tab at Theme Options > General Settings > Performance. The option with the biggest effect is Delay Javascript Execution, which ThemeNectar describes as holding the theme's JavaScript back until the visitor clicks, scrolls, touches, presses a key or moves the mouse. It covers Salient's own scripts, so on its own it should leave Donor Merchant alone.

The setting to check is in your caching plugin. ThemeNectar's guide recommends WP Rocket with Delay JavaScript execution on and Themes ticked under One-click exclusions, so that WP Rocket delays third-party scripts and leaves Salient's to the theme. Stripe.js and the PayPal SDK are third-party scripts. If the card fields or the PayPal button do not appear, or only appear after a scroll, add js.stripe.com, www.paypal.com/sdk/js and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js to WP Rocket's delay exclusions, or turn delay off for the donation page. The same applies to W3 Total Cache's minify, which ThemeNectar suggests running in "Auto" mode.

Page caching itself is fine. The donation form has no nonce, so a cached page still works, and the donor portal and receipt links send no-cache headers on their own. Our cache exclusions guide covers other plugins.

The rest of Salient's Performance tab (lazy loading builder images, local Google Fonts, top-level image optimization, Font Display Swap and so on) does not affect the form. One note on Move jQuery to Footer: ThemeNectar warns that scripts expecting jQuery in the head can break. Donor Merchant's scripts do not use jQuery and already load in the footer, but if you turn the option on, test the Donate page anyway.

Anything else to check?

Page transitions. Salient's transitions are an animation between page loads, using either the browser's View Transitions API or a JavaScript fade. If the fade conflicts with a plugin that takes over links, ThemeNectar offers Disable Fade Out On Click for the Standard transition method. Click through to your Donate page once from the menu to confirm the form appears.
Donor portal. Put [donor_merchant_portal] in a Raw HTML element on its own page. See donor portal.

Checked against ThemeNectar's documentationWe checked these steps against Salient's documentation (written for Salient 18.3) in October 2026. We have not tested Donor Merchant inside Salient ourselves. Theme menus change between versions; if a label differs in yours, look for the equivalent element.

How to add a donation form to Salient