← Back to Documentation

Note: This documentation applies to both the Free and Pro versions of FundCollector. To install and use the Pro version, you must first install and activate the Free version, which should not be uninstalled. The sections relating to the Pro version are marked with PRO.

How to Create a Donation Form

This guide explains how to create and configure donation forms in WordPress with FundCollector.

Overview

FundCollector stores each donation layout as a form. Every form has:

• A Form ID used in the shortcode.
• Its own fields (what donors see and what is required).
• Design options (width, colours, typography).
• A shortcode such as [fundcollector_donation_form id=your_id] to embed the form on pages or posts.

You can use the built-in Default donation form to speed up the process, or create additional forms for different campaigns or pages.

Open the Forms screen

1. Log in to the WordPress admin (/wp-admin/).
2. In the left-hand menu, open FundCollector.
3. Click Forms.

You should see the Donation Forms screen: page title Donation Forms and (when forms exist) a table of forms.

Donation Forms list (existing forms)

When at least one form exists, the list shows:

• Form Name (sortable; click the column header to switch sort order).
• Form ID — internal identifier used in the shortcode.
• Shortcode — the exact embed code; a Copy button copies it to the clipboard.
• Status — Active or Inactive.
• Actions — Edit; Delete for custom forms.

Above the table:

• Add New Form (next to the page title).
• Bulk actions — select multiple forms, choose Delete, then Apply (the default form cannot be selected).

Create a new form

1. Click Add New Form (or Create Your First Form on the empty state).
2. The Create New Donation Form panel appears.
3. Enter a Form Name (required). This name mainly helps you recognize the form in the admin; you can set the public-facing title separately in the editor (Purpose of donation / Name).
4. Click Create Form to save, or Cancel to return to the list without creating.

After creation, WordPress opens the form editor for the new form.

Form editor — header, shortcode, and navigation

At the top of the editor:

• Donation Forms title and Add New Form (same as list screen).
• Back to Forms List — returns to the table.
• Purpose of donation / Name — text field; this is the public-facing title or context for donors.
• Shortcode — read-only box with the exact shortcode, e.g. [fundcollector_donation_form id=abc123].

Default form: the built-in form uses id=default. You can embed it with [fundcollector_donation_form id=default] or, for the default only, [fundcollector_donation_form] with no id attribute.

Tab: Form Fields

Three tabs appear: Form Fields, Design Options, Preview. Open Form Fields first.

Calls to action

• Text for main call to action — toggle Show in Form; set the headline text (default idea: “Make a Donation”).
• Text for secondary call to action — optional supporting line under the title.

Donor fields

A table lists fields such as Name, Last Name, Company / Organization, Email, Phone, Address, and address-related fields, Tax ID, and more. For each row:

• Show in Form — include or hide the field.
• Required — donor must fill the field before submitting.

Email is always shown and required (you cannot turn it off).

Privacy

• Privacy — toggle visibility; edit the privacy text in the textarea. You may use HTML (for example a link to your privacy policy page). This text appears next to the privacy consent checkbox on the front end.

Required fields notice

Below the main field table, Required Fields Notice toggles whether the form shows the standard note that asterisk-marked fields are required.

Tab: Design Options

Use Design Options to align the form with your theme:

• Form Width (px) — between 300 and 1200.
• Primary Color — accent for amounts and highlights.
• Background Color — form panel background.
• Button Send Background Color and Buttons Text Color — main donate button.
• Border Radius (px) — slider with live value.
• Font Family — e.g. System Default, Arial, Verdana, Helvetica, Roboto.
• Font Size — Small / Medium / Large.

Tab: Preview

Preview renders an approximate version of the form inside the admin, including:

• Title and secondary text.
• Amount buttons and custom amount area.
• Visible donor fields and donation summary.
• Payment details reflecting enabled payment methods in plugin settings (PayPal, bank transfer; FundCollector Pro PRO adds Mollie card UI).
• Privacy checkbox (if enabled).
• Donate now button (disabled in preview).

If no payment method is enabled, a warning appears instead — enable at least one method under FundCollector → Settings before expecting a full preview.

Recurring donations preview PRO

If you use FundCollector Pro with Mollie enabled (and recurring donations if applicable), the Preview tab shows the card section and frequency options (Just once / Monthly / Annual).

Save

Click Save Settings at the bottom of the editor. On success, a green admin notice confirms that form settings were saved.

Embed the form on the site

You can place the same form on many pages. Use the Donation Form block in the Gutenberg Block Editor (recommended), or paste the shortcode if you prefer the classic approach.

Block Editor (Gutenberg)

1. Open the page or post where you want the form (or create a new one).
2. Add a block: click + and search for Donation Form, or open the Fundcollector block category and choose Donation Form.
3. Click the block in the editor canvas so it is selected.
4. In the right-hand sidebar, make sure you are on the Block panel (icon with two sliders), not the Page/Post document panel.
5. Open the Form Selection section (it is expanded by default). In Select Donation Form, pick the form you want from the dropdown. The list uses the same names as FundCollector → Forms.
6. If you choose an inactive form, the sidebar shows a warning that it will not appear on the front end—set the form to Active under Forms or pick another form.
7. Click Save or Update, then view the page on the front end to confirm the donation form loads.

The Form Settings section in the same sidebar (collapsed by default) lets you change text and amount options for this block only.

Shortcode (alternative)

1. Copy the shortcode from FundCollector → Forms or from the form editor.
2. In the Block Editor (Gutenberg), add a Shortcode block (or use the Classic Editor / a shortcode-ready widget) and paste the shortcode, e.g. [fundcollector_donation_form id=your_form_id].

Front end

After saving the page or post, visitors see the real donation form on the public site.

Related settings

• Payment methods (PayPal, bank transfer, and in Pro Mollie) are configured under FundCollector → Settings, not on the form screen. The Preview tab reflects what is enabled globally.
• Currency and other global options also affect how amounts and symbols appear.

---

Next step: Donations Management →