How to Add a Donation Form to Bridge (Qode)

To add a donation form to a Bridge site, install the free Donor Merchant plugin and paste [donor_merchant] into Elementor's Shortcode widget or a WPBakery Text Block on your Donate page. Before you go live, check one Bridge setting: if Ajax page transitions are on, add the donation page to Bridge's list of pages loaded without Ajax.

Which page builder does my Bridge site use?

Qode says Bridge lets you choose between Elementor, WPBakery Page Builder or the Gutenberg editor, and the WPBakery plugin is bundled with the theme. Which one your site uses usually depends on the demo you imported. Open any page: an "Edit with Elementor" button means Elementor, a Backend Editor button above the content means WPBakery. Donor Merchant works with all three. In the block editor, use the Donation Form block.

What do I need before I start?

WordPress 6.2 or newer, PHP 7.4 or newer (Bridge's own recommendation is the same PHP floor) and HTTPS. Install Donor Merchant from Plugins > Add New, then connect Stripe or PayPal. For recurring gifts, also add the webhook, since that is how renewals get recorded.

Where do I put the form in Bridge?

With Elementor

Edit your Donate page with Elementor.
Click +, find the Shortcode widget and drag it onto the page.
In the Content tab, paste [donor_merchant] into the Shortcode box. Elementor previews the widget in the editor, but check the payment fields on the published page.
Update the page and test it while logged out.

With WPBakery

Open the page in the WPBakery backend editor. Bridge's documentation shows content going into rows, added with the plus icon.
Add a Text Block, which is WPBakery's own advice for third-party shortcodes, and paste [donor_merchant] into its editor.
Update the page.

To link the form to a campaign, use [donor_merchant campaign="3"]. The campaign IDs are listed under Donor Merchant > Settings > Shortcodes. A progress bar for that campaign is [donor_merchant_progress campaign="3"], which you can place in its own widget or Text Block above the form. See campaigns.

Why does the form not load when I click through the menu?

This is the Bridge setting to check before launch. Bridge can use Ajax page transitions, set in Qode Options > General > Settings > Page Transition. Qode's documentation explains that when a transition is on, the header and footer are not reloaded when a visitor clicks a menu item; only the content area is refreshed.

Donor Merchant loads its JavaScript, Stripe.js and the PayPal SDK only on pages where the form renders. If a visitor arrives at the Donate page through an Ajax transition, those scripts may not load, and the payment fields can be missing until the page is refreshed. If you see that, you have three ways to handle it:

Exclude the donation page. Qode Options > General > Settings has a field called List of Internal URLs Loaded Without AJAX (Separated With Comma). Qode describes it as the place for plugins where Ajax needs to be disabled to work properly. Enter the full URL of your Donate page, plus any campaign pages that hold a form.
Set the page itself. Each page has a Page transition setting in its Qode General options box, which overrides the global value.
Turn transitions off. Choose "No animation" so every page loads normally. Qode's own advice is to keep animations disabled if you want the least resource-heavy site.

After changing it, open the home page, click your Donate link and confirm the card fields appear without a refresh.

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

Bridge menus are built in Appearance > Menus. For most header types the main location is Top Navigation; the Sticky Divided header uses Top Left and Top Right menus instead. Add your Donate page to the menu in that location.

For a button-style link, Bridge has header widget areas in Appearance > Widgets:

Header Bottom Right sits next to the menu items. Qode notes it is hidden on phones and on tablets in portrait view, so keep the plain menu link as well.
Header Top Left / Header Top Right appear once you set Qode Options > Header > Header Top > Show Header Top Area to Yes.

Bridge's documented way to put a styled button in a widget area is to build the Button on a test page in WPBakery, switch to Classic mode, copy the shortcode and paste it into a Text widget. Point the button's link at your Donate page.

Does Bridge include its own donation system?

Bridge's documentation does not describe a built-in donation or payment feature. Qode does publish charity, fundraising and animal shelter demos for Bridge, but these are page designs: their Donate buttons need a form to point to. Import the demo for its look, then make its Donate links go to the page holding your Donor Merchant form.

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

Bridge's main colors are in Qode Options > General > Design Style. Qode explains that buttons, icons and similar elements use four predefined colors, with the First Main Color used most widely. Copy that value into Donor Merchant > Settings > Forms > Form style as a custom color, check the live preview, and pick the button shape (pill, rounded or sharp) closest to your Bridge buttons.

For anything finer, Bridge has a Custom CSS field under Qode Options > General. The form's styles are scoped under .dm-form, so start your selectors there. See form settings for every option.

Which speed settings affect the form?

Qode's speed article recommends minifying CSS and JavaScript, gzip compression, browser caching and a CDN. Page caching is fine for the donation page, since the form uses no nonce, and the donor portal and receipts send no-cache headers on their own. If a plugin that minifies, combines, defers or delays 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 feature, or turn it off for the donation page. More detail is in our cache exclusions guide.

Anything else to check?

Permalinks. Qode says transitions need Settings > Permalinks set to Post name. If you keep transitions on for other pages, check this too.
Donor portal. Add [donor_merchant_portal] to its own page so donors can see their giving history and print receipts (donors with a Stripe recurring gift can also update their card or cancel there). Add that page to the no-Ajax list as well. See donor portal.

Checked against Qode's documentationWe checked these steps against Bridge's documentation, Qode's help center and the Elementor and WPBakery docs in October 2026. We have not tested Donor Merchant inside Bridge ourselves. Theme menus change between versions; if a label differs in yours, look for the equivalent setting.

How to add a donation form to the Bridge theme