The Event Builder is how you customize the look and feel of your event registration pages. It’s very similar to the Form Builder that you use to customize your donation forms.
If you’re looking for the Peer-to-Peer Event Builder, click here.
If you’re looking for the Auction Event Builder, click here.
To view a quick-start tutorial on the Event Builder, check out this video:
Contents:
Using Event Builder
Basic Navigation Within Event Builder
Navigate to the Events on your donation form and click Edit for the event you want to customize.
Once you’ve navigated to the event you’d like to manage, click the Event Builder link next to the event’s name.
You can also access Event Builder from within the Donation Form Builder.
From within Form Builder, simply select one of your events from the drop-down menu to be taken to the Event Builder interface.
You can exit Event Builder at any time by clicking the ✖️ along the top of your screen:
If you have unsaved changes, you’ll see a message to the right of the ✖️ indicating that you should save or undo changes by clicking Save Page along the side of your screen.
At the top right you’ll see a drop-down menu that gives you options to customize your event registration form.
You can also click View All Content to view the full Donation Form Builder.
Editing Sections and Widgets
To configure any of the editable sections or to edit a widget once you've placed it on your registration form, you’ll click the gear icon located in the upper right-hand corner of each section item.
The majority of the wording on your registration form is controlled by the settings menus within these gear icons.
Pro tip: Not sure how to change the wording for part of the form? Try clicking one of the gear icons.
On each page of your registration, you’ll also find sections that can be reordered by dragging and dropping them.
Widgets Tab
The first tab you’ll see in your toolbar is the Widgets tab.
Each page of the registration form has slightly different drag-and-drop widgets.
Thermometer Widget
You’ll only see the thermometer widget if you’ve added a goal in the Goals section of your form-level control panel. You can read more about adding goals here. You can exclude forms from your event goal by configuring your goal settings.
With the thermometer widget, you can add a progress thermometer to your registration form. After dragging and dropping the widget to the desired location on your form, you can configure the settings to alter how it will display on the public-facing form.
- If desired, add a Title for your thermometer. This will display above the widget on the public-facing form.
- Select the either Left, Right, or Center for the Widget Title Alignment.
- Next, choose a Goal from the drop-down. What you create in the Goals section of your control panel will display here.
- After that, select a Style: either Thermometer or Simple.
- You can also choose a Vertical or Horizontal Layout.
- If desired, change the fill color using the color-picker tool.
- Select which information you'd like displayed with your thermometer on the public-facing form:
- Display Achieved Amount will show the dollar amount raised on your form during the time period you entered for your goal (if you entered one)
- Display Goal Amount will display the total dollar amount of your goal
- Display Goal Completion Percentage will display the % of your goal that's been raised
- Display Thermometer Countdown will show a timer counting down to the end date you entered for your goal (if you entered one)
- Lastly, select if you'd like a border to display around the thermometer on your public-facing page.
Borders will look something like this on your public-facing form:
Thermometers automatically update every 60 seconds to display your goal progress.
When you've configured the widget settings how you'd like, click Update. Be sure to click the green Save Page button before navigating away, as well.
Heading Widget and Text Widgets
If you'd like to add a heading to a page or section of the registration, drag and drop the heading widget and enter your desired text.
To add a small block of text to your form, use the text widget. The font is a smaller size than the heading widget.
Here's what they look like on your public-facing form:
Spacing Widget
Need to add a little spacing to your form? Use the spacing widget! You can enter how many pixels you'd like the added space to be.
Custom Content Widget
This widget can be used for adding a block of formatted text to your form. The widget offers an editor so you can style the text however you'd like. You can also add hyperlinks, images, and custom HTML, if applicable. There's even a handy spellchecker!
Social Sharing Widget
The Social Sharing widget is only available on the Confirmation step of registration. It contains settings for sharing the registration form on Facebook and X. You can even configure Default Post Content for X users.
You’ll notice some additional widgets on the Landing Page and Confirmation page. We’ll cover those later in the article.
Theme Tab
In the Theme tab, you'll find some simple controls to customize the primary color and font on your form.
Changing the Primary Color will alter the color of the text and buttons on your form, as well as the colors on your Landing Page.
Once you click the box, you'll see an area where you can choose a custom color. If you have the code for a certain color you'd like to use, input it in the field next to the # icon. Click OK when you're done making adjustments.
In the Font drop-down, choose which font you'd like to use on your form.
Advanced Tab
If you have any Custom CSS you’d like to apply to your form, you may do so in the Advanced tab. Any CSS added here will be applied to all pages/steps of your registration form.
Registration Form Pages and Editing
Now that we’ve applied global changes to the registration form, let’s take a look at what we can do with each page.
Please note: When customizing text on the form, you may see “Suggested Tags” indicated. Suggested tags reflect best practices and we recommend you use them. Suggested tags can be removed if you don’t want to include the information they generate, but they cannot be replaced with different tags.
Pro tip: Whenever you make changes to any part of the form, remember to click Save Page to save your changes.
Landing Page
The Landing Page is what your event registrants will see when they first arrive on your registration form. This page displays all of the event information you configured in the settings, as well as any additional widgets and customizations you’ve added.
Click the gear icon in the Header area to customize the display settings and text for your Logo, Organization Name, Registration Button, Donation Button, Remaining Tickets Message, and Sharing Options.
Please note: Based on your Event Settings, you may or may not see all of these options.
The About this Event section displays whatever text you entered in the Event Description area of the event settings. By clicking the gear icon, you can also change the section heading.
The Event Details section can display the Location, Time, Date, and Price of the event, as well as links to the Add to Calendar integration and Google Maps (if you’ve included a venue address in your event settings).
Live view
Edit view
You can also hide the Event Details area entirely by unchecking all of the Display options.
If you've enabled the Display Map option in your Event Settings, the Landing Page will also include the Event Map, which displays the map and can display the venue address, a Google Maps link, and any Additional Text you want to include. You can also select if you'd like a border to appear around the map on your public-facing form by selecting Display Widget Border.
The Landing Page also has a few unique widgets you can add to further customize the page.
These widgets are covered in detail in the [New Forms] Form Builder: Landing Page article.
The Event Landing Page also includes a unique widget called Event Participants. This widget can display up to twenty of your event's attendees.
The Theme tab for the Landing Page shares settings with the Theme tabs of the other pages, with the addition of a Font Size slider.
On this tab, you'll also find the Individual Content Styles area. In this section, you can change the appearance of individual widgets on your Landing Page by setting individual styles for colors and font size. Choose the widget you'd like to set styles for from the drop-down.
The Advanced tab also includes a field for Page-Specific Settings, where you can input a Page Description to better identify the page in search results.
Registration: Tickets
The Registration: Tickets page is where your ticket packages and groups are displayed.
The Choose Your Tickets widget on this page includes a lot of customizable wording for the registration.
You can reorder the packages and groups by dragging and dropping them.
This page also includes the Optional Gift and Matching Gift sections.
Please note: The heading area at the top of the page is consistent across all pages of the registration form.
Registration: Details
The Registration: Details page is where you’ll gather personal information from your event registrants.
Registration: Additional Details
If you’ve set up Custom Fields for your event, they’ll appear on the Registration: Additional Details page.
You can reorder the custom fields and custom field groups on this page by dragging and dropping.
Please note: Reordering the fields for a package on this page will reorder those fields for all the packages they’re associated with.
If you’ve enabled the Request attendee details per ticket setting in the Event Settings, the attendee details fields will also appear on this page.
If you’d like to customize the help text or hide the option to copy details from other tickets, you can do so in the Attendee Details settings.
Please note: There are no widgets available for this page.
Registration: Checkout
The Registration: Checkout page is where you’ll gather registrants’ payment details.
Please note: If an attendee’s registration is completely free, they won’t see this page on your public-facing form during registration.
Registration: Confirmation
The Registration: Confirmation page appears after registrants complete their registration.
The Confirmation Header can include the Event Date and Location, as well as the Heading and optional Subheading.
The Registration Details area summarizes the attendee’s registration. This area can be collapsed, expanded, and printed on your public-facing form.
Please note: Some of the wording in the Registration Details area is controlled in the Summary area.
The Confirmation page also includes an additional widget: the Add to Calendar widget.
When included on the page, registrants can add your event details directly to their Apple, Google, Office 365, Outlook, or Yahoo calendar.
Summary Area
Every page of the Event Builder, except the Landing Page, includes the Summary area. Click the Summary button to open this area, and then click the gear icon to configure the wording.
Some of the wording in this area, such as “Tickets,” “Subtotal,” and “Total,” also appears on the Confirmation page in the Registration Details area.