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

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, and even make money online if you charge for event listings.

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.

In order to allow your audience to submit events, you’ll need to install our Post Submissions addon. This addon makes it easy for users to submit events without logging into the admin area. To access this addon, you must have the Pro license plan. You can learn how to install and use the post submissions addon.

Then, 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 popup.  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.

Comments

  1. Is there a way for the events to be auto approved, without requiring someone to manually accept them? Also, can the user who submitted the event remove it?

    1. Good question, Jennifer! You can set up your events to be auto-approved by editing your form and navigating to Settings » Post Submissions, and then changing the Post Status option to Published, as you can see in the screenshot here:

      auto publish submitted events

      The event is similar to a blog post (it’s a custom post type), so the user won’t be able to remove/delete it unless they have access to your site as an Editor or Administrator.

      By default, you’ll always get an email notification when someone fills out your forms. You can customize your notifications or add additional ones (like a confirmation email to the user, for example).

      Feel free to get in touch if you think of any other questions, or need help setting this up 🙂

  2. I love this post, and I’ve referred back to it a few times. This is so useful.

    Has anyone setup any other fields in the Custom Post Meta?

    What about event location, what about event host? or cost?

    I’d love to know if I’m approaching this correctly, right now I’d just guess what the meta field would be

    1. I just saw your link for the Events Calendar custom meta code. Thanks for that!

      I’m having a problem though with my custom post meta – specifically for the event start and end dates.

      The meta code is _EventEndDate

      And when I save the form, it becomes _eventenddate

      and doesn’t seem to work. Any ideas on how to get this working?

  3. Any suggestions on how to do the same thing with front end submissions, but submitting through a payment process like with PayPal?

    1. Hi Mark,

      You can absolutely do this along with a PayPal requirement. You would essentially do exactly what is described in this post, then add a cost and payment on top of that. In case it helps, here’s a tutorial on how to set up PayPal in your forms.

      One thing to note is that since PayPal payments are processed off-site, you’ll need to manually monitor whether those payments were completed before publishing the user-submitted event (whereas with Stripe, the payment must be completed and successful before the form can be submitted).

      If you have any additional questions about how to get this set up, please feel free to contact us in support!

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.