Configure and embed your form

INHALTSVERZEICHNIS

• Good to Know
• Create Form
• General
• Queries
• Transaction Settings
• Success Page
• Thank You Email
• Design
• Wordings
• Preview
• Embed Code

Learn in this article how to create, configure, and embed FundraisingBox donation forms on your organization's website.

Good to Know

• Our Tool Tips  provide helpful information about specific fields, their content, and function.
• Find detailed information about each configuration area via links to the Help Center .
• To the right of the donation form settings, you will find a Table of Contents with links for quick navigation.
• Each embed URL/address requires a donation form. So, if you want to embed donation forms on two different websites or under two different URLs, you will need two different donation forms/embed codes. A typical example: Different language versions of the forms on different language versions of the donation website.

Tip: Activate the gift donation function if you want to offer gift donations including automatically created certificates.

Note: Your Content Management System (CMS) must support JavaScript.

For verification insert the following code in your backend on the corresponding page:

<script type="text/javascript" src="https://www.fundraisingbox.com/assets/js/jstest.js"/>

When you visit the page, a message will appear in the browser indicating whether JavaScript is enabled and thus the form can be embedded.

Create Form

1. After logging into your FundraisingBox, click on Forms on the left side.
2. Click on the "Create New Form" button at the top right .

General

1. The form name is not public and is for your internal identification of the form only.
2. Select a language for the display of the donation form.
3. Enter the exact web page address or URL (e.g., https://www.myorganization.com/donate), where the donation form will be displayed, into the field for the embed address.

Note: Ensure a correct and complete entry of the embed address. In the settings, always specify the complete webpage URL, e.g., https://www.sampleorganization.com/donate. Input errors typically result in the FundraisingBox donation form not loading or displaying as expected!

Queries

1. In this section of the form settings, determine which information from donors should be requested.
2. You can also set mandatory fields that donors must fill out in order to complete the donation transaction.
3. Optionally, you can hide certain fields on mobile devices (smartphones).
4. You can determine which salutations are available in the form in the settings.
5. With previously created custom fields, you can supplement the form with organization-specific queries.

The features "hide fields on mobile" and "custom fields" are not available in every FundraisingBox variant. If you have questions, please contact us.

Tip: Further information about the queried form fields can be found here.

Transaction Settings

1. Define the type of donation form via the Amount and Rhythm Settings:
   • Free Donation: Donors specify an amount, which is debited at the rhythm they choose
   • Monthly Amounts: Donors specify an amount, which is multiplied by 12 and proportionally debited over 12 months at the rhythm they choose
   • Annual Amounts: Donors specify an amount, which is divided by 12 and proportionally debited over 12 months at the rhythm they choose
2. Set the selection and positioning of Rhythms by ticking the checkbox of one or more rhythm options as desired, and press the handle directly left of the checkbox to drag it to the desired list position.
3. Optionally, you can allow donors to choose a preferred date for recurring donations. Available options are the 5th, 15th, or 25th of a month. Note: This function is available for all payment methods that allow recurring payments. The initial transaction is executed immediately, and all subsequent transactions on the preferred date.
4. If free entry of a donation amount is to be allowed, then activate the "Allow Free Amount" option.
5. In the Payment Methods section, all options that you have previously activated are displayed. The order of payment methods can be adjusted via the arrow buttons or by drag & drop using the handles left of the respective checkbox.
6. In the Fee Coveragesection, you can enable donors to cover the fees for, e.g., payment service providers. This amount is fixed and cannot be adjusted. The function is integrated as a checkbox in the donation form and is located directly below the selected donation amount. After selecting the donation amount and rhythm, the checkbox adjusts accordingly.

   Note: This is an increase in the donation amount. This total amount will also be reflected on donation receipts, for example.

7. Optionally, you can create items linked to projects. Donors can then select these to communicate a desired purpose for their donation. Once you have collected a certain number of transactions, you can evaluate them via Smart Search, Export, or directly through the Project List.
8. Through optional donation suggestions, you can inform your donors about the impact that can be achieved with certain donation amounts.

Success Page

1. The automatic success page is displayed to your donors in the browser after a successful transaction, instead of the donation form.
2. Using variables, you can personalize the success message, thereby addressing your donors individually. Find more information and examples here.
3. Optionally, you can also activate the share function.
4. Depending on the FundraisingBox variant you have booked, you can use your own success page including parameter transfer instead of the automatic success page.

Good to know: We use the so-called Shariff button solution for the share function. This only establishes a connection to the external page after the button has been pressed. If you use your own success page, such an option must be implemented by yourself!

Thank You Email

Select the previously created email template and the sender's address to automatically send a thank you email to your donors after a successful transaction. More important information about email sending can be found at the following links:

• Setting up email dispatch and activating sender addresses
• Setting up automatic thank you emails

Design

1. Select the desired color for elements like headings or buttons in the form.
2. For a modern and mobile-optimized display, ideally choose our design template recommendations "Polaris" or "Aurora".
3. For custom design adjustments, please enter your CSS code into the "Custom Stylesheet (CSS)" field. Click on "Show Advanced Design Settings" for this.
4. Activating the "Optimized Mobile Display" option is usually unnecessary!

Note: If you switch the design template, custom CSS changes need to be adjusted; they are not automatically transferred.

After making all settings, please click on the "save" button. You will now see additional tabs above the settings: Wordings, Preview , and Embed Code.

Wordings

Check in the Wordings tab if text adjustments are necessary for your form. Important: If the Wordings fields are left blank, the standard wording of the language selected in the General section will be used for the respective form fields.

Preview

Click on the Preview tab to check your form settings. Next to the form, you can view a preview of the automatic success and cancellation pages.

Embed Code

1. Click on the Embed Code tab.
2. Copy the displayed embed code unchanged to the desired location in your CMS (WordPress, Joomla, TYPO3, etc.) or directly into the HTML source code of your website.

Tip: Changes to the settings are automatically updated. The embed code does not need to be reinserted into your website if you make changes to the form settings within your FundraisingBox.

Note: If you use so-called lazy loading (e.g., through a plugin) on your website, please ensure that it is either deactivated for the donation page or at least for the logo in the embed code. Otherwise, a error message will occur.

Once the change is saved to your website, please load the embed address/URL of the donation form in your web browser. Then the donation form will be displayed there.

If the form is not displayed as expected or an error message appears, please check for possible causes.