How to build a Gravity Forms event registration calendar

A calendar is the quickest way to show people what’s coming up, whether you run a nonprofit, a yoga studio, or a community group.

In this tutorial, we’ll build an event calendar with Gravity Forms and GravityCalendar. Events are submitted through a form and appear on the calendar automatically. Each event links to its own page, where visitors can register through a second form that already has the event name filled in.

Check out a live demo of the finished event calendar and get your own free trial site preloaded with all GravityKit add-ons!

Let’s get started!

Sneak peek

Here’s a quick preview of what we’re going to build. Events submitted through a form appear on an interactive calendar:

Clicking an event opens a page with the full event details and a link to register:

The link takes visitors to a registration form with the event name already filled in:

Pro tipIf you’re wondering what the difference is between GravityCalendar and The Events Calendar, read GravityCalendar vs The Events Calendar.

What you’ll need

• Gravity Forms – collects event submissions and registrations. Any license level works.
• GravityView – turns each event entry into its own event page.
• GravityCalendar – shows your events on a front-end calendar.
• Gravity Forms Event Field (free) – adds the Event field for start and end dates, times, and repeating events.

Installing GravityCalendar and the Event field

If you have an All Access license, you can install everything from inside WordPress. Hover over GravityKit and click Manage Your Kit. Search for “event” to bring up both GravityCalendar and Gravity Forms Event Field, then click Install and Activate on each. GravityView installs the same way if you don’t have it yet.

If you bought GravityCalendar on its own, download it from your GravityKit account. Then hover over Plugins, click Add New Plugin and Upload Plugin, and choose the file.

Creating the event submission form

First, you’ll need a form for adding events to your calendar. Hover over Forms and click New Form, then give it a name. We’ve called ours “Events” and added the following fields:

• Event Title (Single Line Text field)
• Event date and time (Event field)
• Location (Address field)
• Event Description (Paragraph Text field)
• Organizer Name (Single Line Text field)
• Show on website (Checkboxes field, which we’ll use later to keep internal events off the calendar)

You’ll find the Event field under Advanced Fields. It bundles the start and end dates, times, an all-day option and repeating events into one field, so there’s no need for separate date and time fields. We’ve turned off its Timezone and Show As inputs. Click Save Form when you’re done.

Pro tipGravityCalendar needs a location-based timezone to show event times correctly. Hover over Settings, click General and pick a city under Timezone rather than a UTC offset. Learn more about timezones in GravityCalendar.

Embedding the form

To accept events from the front end, add the form to a page using the Gravity Forms block. There are several ways to embed Gravity Forms; the block is the simplest. Here’s what our form looks like on the front end:

If only your team should add events, keep the page out of public view by setting its status to Private or Password protected.

Alternatively, you can make the form available only to logged-in users by updating its form settings.

Creating a View for your event pages

Each event on the calendar will link to its own page with the full details. GravityView creates those pages, so the next step is to build a View.

Hover over GravityKit and click New View. Give your View a name, then under Data Source select your Events form.

Next, choose a View type. We’ve gone with List.

Editing the Single Entry layout

A View has three layouts: Multiple Entries, Single Entry and Edit Entry. The Single Entry page shows one entry in detail, and it’s where the calendar will send visitors who click an event.

Click the Single Entry Layout tab and add the fields you want visitors to see. We’ve included the event title, date and time, description, location and organizer. Click Publish to save your View.

Pro tipTo show the date and times on one line, we used a Custom Content field with merge tags. The :format modifier turns the start date into words:

{Event date and time (Start Date):13.1:format:l\, F j\, Y} · {Event date and time (Start Time):13.4} to {Event date and time (End Time):13.5}

Creating the calendar

Go to Forms, hover over your event form and click Settings. Open the GravityCalendar tab and click Add New.

Give your calendar a name, then map the Event field’s inputs to Start Date, End Date, Start Time and End Time. Only the start date is required.

Below those, fill in the Event Title, Event Description and Event Location using merge tags. Click the {..} icon beside each box to pick a field from your form.

Pro tipTo learn more about merge tags, check out the Gravity Forms documentation.

Linking each event to its page

Set Event URL Type to Link to Single Entry, then choose the View you created earlier. Now clicking an event on the calendar opens its Single Entry page.

If your View is embedded on a page, enter that page’s ID under Embedded Page ID so events open there instead. See Linking a calendar event to its single entry page for details.

Configuring the remaining calendar settings

Start by choosing a Default Layout. You can show events in a grid, an agenda or a list, by month, week or day. We’ve gone with Month (Grid).

Under Calendar Controls, drag the buttons visitors use to move around the calendar into place above or below it.

Under No Current Events Behavior, choose Show Next Event. When the current month has no events, the calendar opens on the next month that does, so visitors don’t land on an empty grid.

If you expect a lot of events, set Dynamically Load Events to Yes so the calendar loads only the dates on screen.

Finally, use Conditional Logic to choose which entries appear. Our form has a “Show on website” checkbox, so we only show events where it’s checked. That keeps internal events, like a volunteer training session, off the public calendar.

When you’re done, click Save Settings.

Pro tipCheck out our documentation for guidance on how to color-code different types of events.

Adding the calendar to a page

Create a new page, click the + icon and search for “GravityCalendar”. Add the GravityCalendar block.

In the block settings, choose your form, then choose your calendar under Feed.

Publish the page and open it on the front end. Hovering over an event shows its description:

Clicking the event takes visitors to its Single Entry page, where they can see the full details.

Our calendar is set up, but what if visitors want to sign up for an event? Let’s create a form that lets them do that.

Creating the Gravity Forms event registration form

We have an event submission form, but we don’t yet have an event registration form. Gravity Forms handles that too.

Hover over Forms and click New Form. We’ve created a simple registration form with the following fields:

• Event (Single Line Text field)
• Name
• Email Address
• Number of People (Number field, 1 to 10)

Here’s what it looks like on the front end:

Pro tipGet a head start by installing the event registration form template from the Gravity Forms template library.

Gravity Forms can also limit the number of entries a form accepts. Open the form’s Settings, scroll down to Restrictions and check Enable entry limit. Set the number of entries and a message to show when the limit is reached. The limit counts every registration on the form, so it works best when a form is used for a single event.

When you’re done, embed the registration form on a new page.

Linking to the registration form and filling in the event name

Next, we’ll add a link from each event’s page to the registration form. Using URL query parameters, the link fills in the “Event” field with the name of the event.

Edit the registration form and click the Event field. Open the Advanced tab under the field settings and check Allow field to be populated dynamically. Enter a parameter name, such as event, and save the form.

Now head back to your View, open the Single Entry Layout tab, click Add Field and choose Custom Content.

Click the gear icon to open the field’s settings, and paste the following code into the text editor:

<a href="/your-page/?event={Event Title:1:urlencode}">Register for this event</a>

Replace /your-page/ with the address of the page that shows your registration form. The ?event={Event Title:1:urlencode} part adds the event’s name to the link, and :urlencode keeps names with spaces or symbols working.

Here’s how it works. A visitor clicks an event on the calendar and lands on its page, which ends with a link to register:

Clicking the link opens the registration form with the event name already filled in:

That’s it!

Pro tipTake things further by using GravityView to display a guest list.

Bonus: Syncing your events calendar with Google or Apple Calendar

GravityCalendar can create a subscription link that visitors add to Google Calendar or Apple Calendar. The feed updates as you add new events.

In your calendar settings, scroll down to Calendar Subscription and check Enable calendar subscription link. After you save, you can copy the link or show it on your site with the GravityCalendar Buttons and GravityCalendar Link blocks.

After subscribing to the feed, your Google or Apple calendar will update periodically to reflect any changes to your GravityCalendar. If you’re using Apple Calendar, you can adjust the refresh rate by updating the “Auto-refresh” option.

This option is not yet available in Google Calendar.

Create a Gravity Forms event registration calendar

In this post, we showed you how to build a WordPress event calendar that shows upcoming events and lets visitors register for them from the front end.

GravityCalendar puts your Gravity Forms entries on a calendar. Pair it with GravityView and a second form, and each event gets its own page and a registration form, all without code. Want to see it in action? Try the live demo.

If you found this tutorial useful, check out how to build a vacation calendar using GravityCalendar and Gravity Flow!