Skip to content

Example: Use FormBuilder to create a Donation Form

The example below describes how you can use FormBuilder to create a public Donation form. This allows you to create flexible online donation forms that do not follow the strict layout of the core Contribution forms.

Note

This example assumes the Stripe Payment Processor is already installed. See the Stripe Extension documentation. Other payment processors are available as FormBuilder Checkout Options.

Step 1: Create The Form

  • Navigate to Administer > Customize Data and Screens > FormBuilder.
  • On the Submission Forms tab, click New Submission Form link.
  • The form will automatically include the Individual and some fields (first name and last name). At the top of the Form, click the + symbol and choose Participant to enable the individual to register for an event.

Step 2: Form Settings

Use the configuration pane on the left side to configure the following settings for your form: * Title: Make a Donation * Permission: Change to Allow all users (including anonymous). * Page Route: give the form a public URL, such as civicrm/support-us

Note

There is already a packaged form called New Donation with the URL civicrm/donate so you'll need to edit that form if you want your donation page to use that URL. There is more information about this on the Contribution Forms page.

  • Frontend or Backend: Choose the Frontend option so the form can be accessed by members of the public.
  • Post-Submit (Optional): If you wish to redirect people to a specific page after the form has been submitted, add the full web link (e.g., https://example.com) to the Post-Submit text box. Alternatively, add a confirmation message to be displayed when. they submit the form. Make sure you save the message if you add a confirmation message.

Step 3: Add The Form Fields

  1. At the top of the Form, click the + symbol and choose Contribution. This creates a new tab called Contribution 1. In the configuration pane on the left side, under Values, set the following values:
    • For the Contact field, remove ‘Select Current User’ and change to Individual 1.
    • Then click the Add Value select list and choose Checkout Option. This will add Checkout Option as a Value. Choose the Stripe Embedded Checkout option from the drop-down.
  2. In the Add column, select Checkout Details and drag it onto the Contribution 1 section on the form Layout.
  3. On the Contribution 1 section on the right panel, click the settings wheel for Contribution Source and choose Remove field.
  4. Click back on the Individual 1 tab on the left panel. In the Add column, select Contact Email(s) and drag it onto the Individual 1 section on the form Layout. Configure the Email block as follows:
    • Toggle the word Multiple so it changes to Single,
    • select is Primary,
    • select a Location type.
  5. While still on the Individual 1 tab, scroll down to Duplicate Matching. Choose the appropriate Duplicate Matching rule, the default is ‘Email (reserved)’.
  6. In the right pane, click the settings wheel symbol on each field in the form Layout and tick the Required option.

Tip

You can also rename each Fieldset or Field, change background colors, and adjust other layout options by clicking the settings wheel symbols. On the Individual 1 tab, you can choose any other individual fields, such as address or phone number, and drag them onto the Individual 1 section on the form Layout.

Step 5: Save and Access the Form

  • Click the Save button at the top right of the form screen.
  • Once saved, a View Page link will appear next to the Save button. This is the link you will share with members of the public so they can register for the event. The form can now be tested and adjusted as needed.