How to add a donation form to Divi

Divi's Code module runs plugin shortcodes in both Divi 4 and Divi 5, so a Donor Merchant form goes in with one module and one line.

Short answerInstall Donor Merchant, open your donation page in the Divi Builder, add a Code module and paste [donor_merchant]. Elegant Themes documents the Code module for third-party shortcodes in both Divi 4 and Divi 5. Then add a Button module to your Theme Builder header that links to the page.

Does this work in Divi 5?

Yes. Elegant Themes announced the official launch of Divi 5 in February 2026. Divi 5 stopped storing Divi's own layouts as shortcodes, which caused some worry, but Elegant Themes states that only the Divi framework's shortcodes were removed and that shortcodes from third-party plugins still work.

What needs care in Divi 5 is older third-party Divi modules. Elegant Themes says Divi 5 detects unsupported Divi 4 modules and loads the Divi 4 framework on those pages, at a performance cost. Donor Merchant does not add a Divi module. It is a WordPress shortcode and block, so there is nothing to convert: the form goes in a standard Code module.

What do I need before I start?

  • Divi (the theme or the Divi Builder plugin), version 4 or 5.
  • Donor Merchant, from Plugins > Add New: search for "Donor Merchant". It needs WordPress 6.2 or later, PHP 7.4 or later, and HTTPS.
  • Stripe, PayPal, or both, connected using the Stripe setup and PayPal setup docs.

Where do I put the donation form in Divi?

Give the form its own page, such as /donate/, so menus, emails and social posts can all link to one address.

Divi 4

  1. Open the page and click Use The Divi Builder.
  2. Click the green + to insert a row, then the gray + inside the row to open the module library.
  3. Search for Code and select the Code module.
  4. Paste [donor_merchant], save the module, and save the page.

Divi 5

  1. Open the page in the Visual Builder.
  2. Click the green + to insert a row, then the gray + inside the row to see the modules.
  3. Find the Code module, or search for it, and paste [donor_merchant].
  4. Save the page.

Elegant Themes notes that JavaScript in a Code module shows up after you save and exit the Visual Builder. The payment fields are loaded by script, so judge the form on the published page, not inside the builder. Make a test donation with your gateway in test mode.

Options work the same in either version. [donor_merchant campaign="3"] ties the form to a campaign (use your campaign's ID), and [donor_merchant title="Support our work"] changes the heading. Donor Merchant > Settings > Shortcodes lists them with your real IDs. A campaign form shows its own goal bar; for a thermometer elsewhere, add a second Code module with [donor_merchant_progress campaign="3"]. See campaigns and goal thermometers.

If you write some pages in the WordPress block editor instead of Divi, use the Donation Form block there.

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

If your header is built in the Theme Builder:

  1. Go to Divi > Theme Builder.
  2. Edit the global header, or click Add Global Header and choose Build Global Header if you do not have one yet.
  3. Add a Button module next to your Menu module. Set its text to "Donate" and its link to your donation page.
  4. Save, exit the builder, and click Save Changes on the Theme Builder screen.

Elegant Themes' Divi 5 header tutorial builds the same thing: a Menu module plus a call-to-action Button module in the navigation area. If you still use Divi's default header rather than a Theme Builder template, add the button as a menu item instead: Appearance > Menus, add a Custom Link to the donation page labeled "Donate", and save.

Link to the page rather than opening the form in a popup or a hidden section. PayPal opens its own window during checkout, and a page is easier to share and test.

Which Divi performance settings can affect the form?

Divi's speed options live under Divi > Theme Options > General > Performance. Most of them, such as Dynamic CSS, Critical CSS and Dynamic Module Framework, deal with Divi's own files.

The one to know about is Defer Additional Third Party Scripts. Divi's own description warns that it "can cause JavaScript errors in some cases and should be used carefully", because it defers scripts that plugins register. If the card fields or PayPal buttons do not appear on your donation page, turn this option off and test again.

Defer jQuery And jQuery Migrate should not matter here: Donor Merchant's form script does not use jQuery.

The same fix applies to any separate optimization plugin. If one delays or combines JavaScript 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, or turn the setting off for the donation page. Page caching itself is fine: the form carries no nonce, and the donor portal and receipt links send no-cache headers on their own. Our page cache exclusions guide has the details for each caching plugin.

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

  • Divi 4: the main color is the Theme Accent Color, in the Theme Customizer under General Settings > Layout Settings. Divi uses it across many elements.
  • Divi 5: colors are kept as global colors in the Variable Manager (Design Variables). Your existing Primary and Secondary global colors appear there.

Copy that hex code, then go to Donor Merchant > Settings > Forms > Form style, choose the custom color and paste it. The live preview shows the result. Set the button shape (pill, rounded or sharp) to whichever is closest to your Divi buttons. The card fields are drawn by Stripe in a secure frame that Divi's CSS cannot reach. If Divi's input or button styles change the other fields, check them on the published page.

What else should I check?

  • Test the published page on a phone, and check the column width you chose on desktop. A narrow column squeezes the form, so give it a wide one.
  • If you offer recurring gifts, set up webhooks, which record each renewal.
  • Optionally set a thank-you page under Donor Merchant > Settings > General.

Checked against Divi's documentation in October 2026. Divi's menus change between versions, and Divi 4 and Divi 5 label some things differently; if a label differs in yours, look for the equivalent module or setting.

Sources

Get Donor Merchant

Free from WordPress.org, with recurring giving included.

Download Donor Merchant free Or try the demo first.