[donor_merchant]. For the header, add the page to your main menu and set its Menu Style to Button Style (Bordered). If you use a Code Block instead, leave Disable Shortcode Processing off.Does Enfold include a donation form?
No. Enfold by Kriesi is a general-purpose theme. Its elements cover layouts, content, media and contact forms, but nothing for payments. There is no donation system to replace or switch off. You add one with a plugin.
Donor Merchant is a free WordPress plugin for one-time and recurring gifts (weekly to yearly) through Stripe and PayPal. It keeps donor records, sends receipts and annual statements, and gives donors a portal with their giving history and 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.
Where do I put the form in Enfold?
Enfold's Advanced Layout Builder (ALB) sorts its elements into Layout Elements, Content Elements and Media Elements. The Text Block is in Content Elements, and Enfold's documentation says shortcodes "can be used in a text area in pages, posts, sliders and widget areas."
- Create a page called "Donate" and switch it to the Advanced Layout Builder.
- Add a 1/1 column from Layout Elements, or a 2/3 column if you want an appeal beside the form.
- From Content Elements, add a Text Block to the column.
- Paste
[donor_merchant]into it 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. For a goal thermometer, add a second Text Block with [donor_merchant_progress campaign="3"]. Campaign IDs are listed under Donor Merchant > Settings > Shortcodes. On pages that use the default WordPress editor rather than the ALB, add the Donation Form block.
The form is a white card up to 540 pixels wide that centers itself in its column.
Using the Code Block instead
Enfold's Code Block element can show code as readable text or execute it, including shortcodes. It has four settings: Code Wrapper Element, Escape HTML Code, Disable Shortcode Processing and Deactivate schema.org markup. If you use it for the form, leave Escape HTML Code and Disable Shortcode Processing off. With either on, visitors see code or the literal shortcode instead of the form. For most people the Text Block is simpler.
Reusing the form
The ALB has a templates feature for repeating the same layout across pages. If you run several campaign pages, save the donation section as a template and change the campaign number on each page. Keep the form on giving pages only. Donor Merchant loads Stripe.js and the PayPal SDK only where the form appears, so a form placed in a site-wide area would load them everywhere.
How do I add a Donate button to the Enfold header?
Enfold can turn any main menu item into a button:
- Go to Appearance > Menus and add your Donate page to the main menu. Putting it last places it at the right end of a "Logo left, Menu right" header.
- Click the arrow on the menu item to expand its options.
- Set Menu Style to Button Style (Bordered). The same dropdown may offer other button styles in your version.
- Save the menu.
To round the corners or change the border, Enfold's documentation points to Enfold > Advanced Styling > Main Menu > Menu Item Button with Border.
Enfold also documents a header widget area for adding buttons beside the menu. It needs code in a child theme's functions.php, so the menu button is the easier route. Either way, link to the Donate page rather than putting the form in the header.
Which Enfold performance settings matter?
Enfold's Performance tab has File Compression settings for CSS and for JavaScript, each with three levels: disabled, minified theme files without merging (the default since Enfold 5.7), and "Merge and compress all theme CSS (or JS) files." Enfold's documentation describes this as merging of theme files. Donor Merchant's script and the payment scripts are not theme files, so this setting should leave them alone.
Since Enfold 4.3, the theme can also load only the CSS and JavaScript for the layout builder elements a page uses. That applies to Enfold's own elements. Donor Merchant loads its own files whenever the form renders, whichever element holds the shortcode.
Two practical notes from Enfold's documentation:
- After changing compression settings, clear your cache. Enfold's own header button tutorial includes disabling script merging and clearing the cache as part of its steps.
- If your server or CDN serves stale merged files, the Unique timestamp of merged files option has a setting to stop adding timestamps. Only change it if Enfold's merged files are actually out of date.
Problems with payment fields more often come from a cache or optimization plugin that delays or combines JavaScript. If the card fields do not appear, try excluding js.stripe.com, the PayPal SDK (www.paypal.com/sdk/js) and wp-content/plugins/donor-merchant/assets/js/donor-merchant.js from that plugin's JavaScript optimization, or turn it off for the donation page. The donation page is safe to cache because the form has no nonce. The donor portal and receipt links send no-cache headers automatically. The page cache guide has details for common plugins.
How do I make the form match Enfold's colors?
Enfold splits its colors by area under Enfold > General Styling: General, Header, Main Content, Alternate Content, Footer and Socket. Open the Main Content area and copy the color your buttons use. Then go to Donor Merchant > Settings > Forms > Form style, choose Custom, and paste it. The live preview shows the change before you save.
Match the button shape too. If you rounded your menu button in Advanced Styling, pick pill or rounded in Donor Merchant. The form's styles are scoped to .dm-form, so they do not change the rest of your Enfold site.
What should I check before going live?
- Connect Stripe or PayPal (Stripe setup, PayPal setup).
- Add webhooks if you take recurring gifts, so renewals are recorded (webhooks).
- Choose a thank-you page under Donor Merchant > Settings > General if you want one.
- Make a test-mode gift on desktop and phone with your compression and cache settings as they will be in production.