WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Create a User Submitted Events Calendar in WordPress

How to Create a User Submitted Events Calendar in WordPress

by Courtney Robertson on Jan 3, 2017

Share This

Do you want users to submit events to a calendar on your website? It can be a great time saver when you let your community help organize the events. In this tutorial, we’ll walk you through each step to create a user submitted events calendar in WordPress.

Why Use an Event Submission Calendar?

It’s helpful to have an events calendar on your website for your…

  • local community events
  • organization functions
  • sales or specials
  • sports matches

…and many other types of events!

Allowing your users to submit events instead of adding them all yourself is a great way to engage your audience, and save yourself some time.

To make it easy for users to send in their events, we’ll create a form that connects to a calendar on your site. Let’s begin.

Creating Your Event Submission Form

The first thing you need to do is install and activate the WPForms plugin. Here’s a step by step guide on how to install a WordPress plugin.

Also, you’ll need to have a form created. See our tutorial on How to Create a Simple Contact Form as an example to get started.  Here’s our form:

user submitted events front-end form

In our form, we added these fields to the simple contact form:

  • Event Title is a Single Line Text field
  • Start & End Time are two Date/Time fields
  • Promotional Image is a File Upload field

The Events Calendar Plugin

Next, we need to create a calendar.  For that, we’ll use The Events Calendar.  This is a free plugin for WordPress websites.

The way that The Events Calendar works is to create a custom post type called Events. Custom post types will work the same way that posts and pages work. The plugin will add an extra menu in the dashboard called Events, separate from your posts and pages.

After you’ve installed and activated this plugin, you’ll be able to preview the calendar at http://yoursite.com/events.

For now, it won’t show much information since we don’t have any events submitted yet.

Connecting Your Form to Your Calendar

After setting up The Events Calendar plugin, we need to connect the form we’ve created to your calendar.

From your form, go to Settings » Post Submissions.  Then turn post submissions ON.

allow users to submit calendar events from the front end with post submissions

Then you want to match each field to the relevant part of the event custom post type.

In our example we connected:

  • Post Title to the Event Title field
  • Post Content to the Description field
  • Post Featured Image to the Promotional Image field

We also set Post Type to Events (the custom post type created by enabling The Events Calendar plugin), and Post Status to Pending Review so that you can approve each submission before it goes live on your site.

Now you can scroll down to the Custom Post Meta section. The last part of connecting your form to the calendar is to add just a bit of code here. This will connect the start and end times in our form to the start and end times in the calendar.

We’ve shown you the code you need to include in the image below, but you can look up any other custom meta code that The Events Calendar offers if you want to customize your calendar even more.

connect WPForms with The Events Calendar

Customizing the Thank You Message

We’re almost done.  Before we publish your event submission form, it’d be good to change the default thank you message users will see.

You can do that by going to Settings » Confirmation.  In the preview panel at right, you can customize your message.

thank you confirmation message for event submission form

Publish Your User Submitted Events Form

Publishing your form is easy.  Just go to a post or page.

Select the Add a Form button.  Then choose the form you’ve just created in the popup modal and select Add Form.

You’ll see the code for your form is inserted.  Then just click publish to view your event submission form live on your website.

how to publish a usr submitted events calendar form

Go ahead and give your form a try to make sure everything is working correctly.

Reviewing Event Submissions

After your form is live on your site, you just need to approve the events users submit.  To do this, go to Events.

You’ll see that any submitted events will be listed as Pending.  This means they need to be approved before they appear on the calendar.

Click Edit underneath the event title.

edit front end user submitted event to published

Preview the submission, taking special note of the Time & Date near the bottom of your screen.  This will be the time listed on your calendar.

the events calendar time and date for users submitted calendar form

When you’re finished reviewing all the event details, go ahead and click Publish.  Then you can view your events calendar at http://yoursite.com/events.

When the user hovers their mouse over the calendar event, they’ll see a preview pop up.  By clicking on it, they’ll get the full event listing.

view user submitted event to community calendar

That’s it! You can now ask your community to submit events to your website calendar.

Want to allow clients to schedule appointments on your work calendar? You might also want to check out our guide on how to create a client booking form.

What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Share This

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.