So that visitors to your site can donate to your organization, you can add a donation form that integrates with your payment system and contact database.

You can choose the donation fields you want displayed on the donation form as part of the settings for the donation form gadget. One of your donation fields is the Amount field, a system field that cannot be renamed, deleted, or excluded from the donation form.

If the visitor viewing the donation form is not logged in, common fields will appear on the form as well. You can choose the common fields you want to appear on the form as part of the donation form gadget settings, but you cannot exclude the Email field.

To accept online donations, you need to set up online payments.

To track the success of your fundraising efforts, you can add a donation goal gadget to a page on your site. You can also embed a Wild Apricot donation form on another website using widgets.

Adding a donation form

You cannot add a donation form gadget – or any other singular gadget – to a page template or system page, or to a page containing another singular gadget.

To add a donation form to a page on your Wild Apricot site, follow these steps:

  1. Go to Sites pages (under the Website menu) and create or begin editing the site page where you want the donation form to appear.
  2. Click the Gadgets icon to display the list of available gadgets.
  3. Drag the donation form gadget from the list, and drop it where you want it to appear on the page. You can insert it into a section within a layout, or above or below a layout.
    When a layout cell or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout.
  4. After you have dropped the gadget in the desired location, hover your pointer over it and click the Settings icon.
  5. From the gadget settings panel on the left, choose the desired settings for your donation form. For more information, see Donation form settings (below).
  6. Click Save to save the changes to the page.

For instructions on restricting access to the page, see Page access and visibility.

Donation form gadget settings

Using the gadget's settings, you can control its appearance and content. For instructions on displaying gadget settings, see Gadgets.

The following settings are available for donation form gadgets:

Common fields to include
Select the common fields to be included on the donation form. The Email field is automatically included and cannot be excluded.

Donation fields to include
Select the donation fields to be included on the donation form. The Amount field is automatically included and cannot be excluded.

Margins
The amount of space – in pixels – that appears outside the gadget. You can set top, bottom, left, and right margins separately.

Padding
(Kaleidoscope themes only) The amount of space – in pixels – that appears between the content of the gadget and the outer limits of the gadget. You can set top, bottom, left, and right padding separately. If you have set a fixed height for the gadget, the bottom padding will be ignored.

Advanced
Within the Advanced section, you can enter CSS code or classes to further control the appearance and behavior of the gadget. For more information, see Gadget settings.

Customizing donation form fields

The donation form displays the donation fields you have selected from the donation form gadget settings. If the visitor viewing the donation form is not currently logged in, common fields will appear on the form as well. Included in your donation fields is the Amount field, a system field that cannot be renamed or deleted.

To add or modify donation fields, click Donation fields under the Donations menu.

On the screen that appears, you can modify existing donation fields and add new ones. For each field, you can change the following settings:

Field label
The name used to identify the field. The field label must be unique among all donor fields and common fields.

Required field
Controls whether the field has to be filled out before the form can be submitted.

Field instructions
Instructions explaining how to use this field. For information on controlling the appearance of field instructions, see Adding field instructions.

The Amount field is a system field and cannot be deleted or renamed. The Amount field settings allow you to control how the donor indicates the donation amount. The following options are available:

Custom
The donor can enter any amount. If you choose this option, you should enter instructions to the donor in the Entry label field.

Predefined
You provide the donor with a list of labeled amounts to choose from. For each option, enter a label (e.g. Bronze) and amount. Click the green plus sign to add more donation options and the red minus sign to remove them.

You can choose between these options or use both.

Depending on which options you choose, your form can look like one of the following:

Custom donation only

Choice of predefined donation options

Custom and predefined options

For more information on adding and modifying database fields, see Adding and modifying database fields.

Adding a description

You can add a description to your donation form by inserting a content gadget ahead of the donation form gadget. Within the content gadget, you can add a title and description, and format them using text styles. For more information on adding and formatting text, see Using the content editor.

Changing colors and fonts

You can change the colors, text styles, and backgrounds used in your website from the Colors and styles screen.

For more advanced fine-tuning, you can use CSS customization and theme overrides.

For donation form gadgets, you can modify the following elements from the Colors and styles screen:

"Donations"

  • General formatting or Typography > Text/Normal, H3
  • General formatting > Form > Form instructions
    (Bookshelf, Building Blocks, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Kaleidoscope, Showcase, Skyline, Terra, Tinted Tiles, Whiteboard, White Space only)

"Mandatory fields"

  • General formatting or Typography > Text/Normal
  • General formatting > Form > Form instructions
    (Bookshelf, Building Blocks, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Kaleidoscope, Showcase, Skyline, Terra, Tinted Tiles, Whiteboard, White Space only)


Labels

  • General formatting or Typography > Text/Normal
  • General formatting > Form > Labels
    (Bookshelf, Building Blocks, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Kaleidoscope, Showcase, Skyline, Terra, Tinted Tiles, Whiteboard, White Space only)

Options

  • General formatting or Typography > Text/Normal
  • General formatting > Form > Option title
    (Bookshelf, Building Blocks, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Kaleidoscope, Showcase, Skyline, Terra, Tinted Tiles, Whiteboard, White Space only)

Pay, Cancel buttons

  • Functional buttons > Normal/Hover
    (Clean Lines, Dark Impact, Fiesta, White Space themes)

Any changes you make will be applied to other gadgets that use the same settings.

Customizing the donation confirmation email

When a visitor to your site makes a donation – submits the form and makes the payment – a confirmation email is sent to the donor, followed by a donation receipt. To customize the donation confirmation email, click Donation confirmation email under the Donations menu.

On the screen that appears, click Edit to enter edit mode.

Within the body of the email, you can add or replace text, links, pictures, and macros using the options appearing on the toolbar.

To choose a previous email or an email template as the basis for the email, click the Copy from button. To restore the original pre-modified version of the email – the factory default – click the Restore default button.

When you are ready to save your changes, click the Save button. After you have saved the confirmation email, you can test it by clicking the Send test email button. A sample of the email will be sent to you containing sample data – not actual data from your database – to give you an idea of what the email will look like.

Using the donation form

To make an online donation, a visitor to your site fills out the required fields on the donation form and clicks the Pay button.

Each donation form consists of:

  • the common fields selected within the donation form gadget settings
  • the donation fields selected within the donation form gadget settings

If the donor is not logged in, the form will show both the common fields and the donation fields.

If the donor is logged in, the form displays only donation fields (since the system already has contact information for the logged-in donor).

When someone makes a donation without being logged in, their email is used to match them against your existing contacts database. If there is a matching contact, the donation details are linked to their contact record. If there is no matching email, a new contact is created.

Values entered in common fields on donation forms will not update corresponding fields in the donor's contact record, but are stored separately within donation records. See Customizing your common database fields for more information.

Once your payment processor confirms the successful processing of the payment transaction, it will communicate with our server and the donation will be marked as Confirmed in the database. A confirmation email and a payment receipt will then be sent to the donor. The donation receipt can be re-printed or re-sent at any time. For instructions on customizing the donation receipt, see Customizing receipts.

If the payment fails or the visitor abandons the transaction without completing payment, the donation record will have an In progress status, and after 24 hours, it will be automatically marked as Likely abandoned. You can view these records from the Donations screen using Attention required and In progress filters.