Tools Used

Form

Use Case

There are a number of community events specific plugins available. I searched high and low for ones that included a map view and would allow users to submit their own events. I found a couple and tried them out, but they didn’t work for me. Here is a quick synopsis:

• The Events Calendar does not allow more than one location for an event. That was a deal breaker for me.
• Calendarize it! does allow multiple locations for one event, but the user interface is a bit confusing. I ended up collecting event information through Typeform and then manually entering it into Calendarize it!, but that was too much work to sustain.

When I purchased Gravity Forms for another form on my site, I decided to replace the Typeform form I was using with a Gravity Form. Once that was set up, I started researching how to display the information on my site without having to enter it myself. That’s when I discovered GravityView and it was a game changer!

I’ve listed two license options for GravityView above:

• GravityView Core will allow you to display your information in table or list view layouts. (More in this post.)
• GravityView All Access allows you to display all of your entries on a map (including multiple locations in one entry!). It also gives you access to the DIY Layout, which allows you to customize your layout any way you want with a little CSS. (More coming soon.)

This form was inspired by KidsOutAndAbout.com, a site that is not built on WordPress (and that I have no affiliation with), but if it were, it would be a perfect candidate for collecting and displaying community events with Gravity Forms.

Steps

Step 1: Set up Your Form Fields

If you haven’t already done so, set up your form as explained in the post Collect and Display Community Events without Hiring a Developer. Then come back here to follow the instructions to display the information on your website.

Step 2: Setting up the View (Basic)

Now that your form is complete, it is time to set up the View – the way it will display on your website. Once you have installed GravityView, on the form edit screen you will find a new button labeled Create a View. Click there to get started.

If you have the basic license, you’ll be able to choose from Table View or Listing View. For this form we’ll use Listing View.

In the View Configuration section of the screen there are three tabs. Let’s start with Multiple View. This is where you will show a summary of all of your listings in one place.

Let’s start with the Entries Fields, which sets up what shows for each entry. Here is what it looks like once I’ve selected my fields.

You’ll see I added a Custom Content field. In this field I included the entry information from the event date and event start and end time fields. Putting all of this information on one line makes the view more concise. Learn more about Custom Content Fields here.

In order to see what the View looks like, you’ll need to have a few entries. This is where your form testing comes in handy.

Install the View on a page so that you can see what it looks like as it interacts with your theme.

Here is what mine looks like out of the box.

It needs a little clean up work! For one, the Event Title and the Event Image do not need a visible title – they are self-explanatory. The rest of the titles blend in with the content. And what kind of title is “Custom Content”? That does not help the reader know what to find beneath it.

Back in the admin screen you can make adjustments to fix all of this. First, click the gear icon next to Event Title and Event Image and uncheck the box next to “Show Label”. For the rest of the fields I left the label showing, but added a custom label, changing what will show on the View from the label on the form to a label that makes more sense from the viewer’s perspective.

To make my new custom labels stand out from the rest of the text I added a little custom CSS.

In the Custom CSS Class box, I added “comm-events-heading” (without the quotation marks).

In my theme’s Custom CSS box I added the following code:

The final result looks like this.

Now that the multiple view is all set up, I’m going to add a Search Bar to the Above Entry Widgets. I chose to place it in the section labeled Top, which stretches across the entire width of the entries below it. There is also the option to set up a search bar only in the left or right half of the screen. To create the search bar, click the Add Widget button on the line labeled Top. Choose Search Bar from the pop up list.

Next, click the gear icon next to the Search Bar to configure your settings. I wanted to enable filtering by Age, Event Dates, Free Events, and a search by Keyword. Here is what my set up looks like.

From the drop down on the left, you select the field from your form that you want to display. In the box in the middle, you can choose a custom label. On the right you choose how your site visitors will interact with the search field. The options vary depending on the type of field you select at the left.

At the bottom you can choose whether to show results that match any of the parameters your visitors have entered in the search box, or whether to only show results that match all the fields.

Below is what my search bar looks like live.

Note, the default search button is very small and I was afraid it would go unnoticed, so I used a line of CSS to enlarge it. I used my browser’s Inspect Element to find the CSS ID of the button and then entered the following CSS in my theme’s Custom CSS box.

That completes the Multiple Entries set up. Before you move on to Step 5 to create your Single Entry view, you’ll want to pick a field that will link to the Single Entry view. I chose the Title field by simply clicking the gear icon for the Title field and checking the box next to “Link to single entry”.

Step 5: Creating the Single Entry View

To create the single entry view, click on the second tab in the Edit screen. I started by placing all of my fields on the view, but decided that entry was too long. So I went back through and added several custom fields where I could combine multiple field entries into one field. The result looks like this.

To create the custom labeled link in the What field, I used html: <a href=”[website address]”>Custom Text Here</a>. Where the website address belongs, I referenced the response from that question on the form. The website field is required on my form so I don’t have to worry about a broken link here. This is what my field looks like:
<a href=”{Website Address for Full Details:3}”>Visit Website for Full Details</a>

Again I used a little CSS to improve the formatting.

The first box of CSS above applies the heading formats to the Single View as well as the Multiple View.

To prevent the text from wrapping around the image, I added a lot of padding beneath it. I achieved this by adding a Custom CSS class (comm-events-single-image) to the Image field when setting up my view.

Step 6: Updating Your Field Settings

Depending on which license you have for GravityView, you will see some different choices in the View Settings box. To find yours, navigate toward the bottom of the Edit View screen, after the View Configuration box. With a basic license, you will see three tabs on the left of the View Settings box. I left all of the settings at their default. You can learn more about the settings here.

Step 7: Publish

Now all that’s left to do is publish your hard work and watch the submissions come rolling in! (Well, maybe there is a little marketing to be done once the form is published, but that’s a topic for another blog…)