Skip to content

Example: Use FormBuilder to create an Event Booking Form with Online Payment

The example below describes how you can use FormBuilder to create a public form that allows people to book onto a CiviCRM event with an online payment. This allows you to create flexible event booking forms that do not follow the strict layout of the core Event booking forms.

Note

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

Step 1: Create The Event

  • Navigate to Administer > Events > New Event.
  • Create a New Event with a Title ‘Christmas Fundraiser’, Start date and time, Event type, and a default role of attendee. On the Fees tab add the required Fee options with labels and amounts. Then Save the event.

Step 2: 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 3: Form Settings

Use the configuration pane on the left side to configure the following settings for your form:

  • Title: Register For Our Christmas Fundraiser.
  • Permission: Change to Allow all users (including anonymous).
  • Page Route: give the form a public URL, such as civicrm/christmasfundraiser.
  • 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 4: Add The Form Fields

  1. At the top of the Form, click the + symbol and choose Participant.
  2. Then again, at the top of the form, click the + symbol and choose Contribution. This creates a new tab called Contribution 1, which allows you to add contribution fields.
  3. Click on the Participant 1 tab. 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.
    • For Event, choose the event you created in Step 1.
    • For Status and choose Pending (incomplete transaction).
  4. In the Add column, select Contribution Amount:Christmas Fundraiser and drag it onto the Participant 1 section on the form Layout. This will add the Fee options for the event to the form.
  5. Click on the Contribution 1 tab. 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.
  6. In the Add column, select Checkout Details and drag it onto the Contribution 1 section on the form Layout.
  7. On the Contribution 1 section on the right panel, click the settings wheel by both fields Contribution Amount and Contribution Source and choose Remove field for both.
  8. 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.
  9. While still on the Individual 1 tab, scroll down to Duplicate Matching. Choose the appropriate Duplicate Matching rule, the default is ‘Email (reserved)’.
  10. 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.