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!

  4. Will this connect to Google Calendar and is there an option to avoid conflict while approving. I notice that you also have an auto approve option which would mean that it qualifies the availability. Thanks.

    1. Hi Chander,

      Sure! It’s possible connect with Google Calendar with our Zapier addon, which is available with our Pro and Ultimate license levels. We have a tutorial on how to set that up if you’d like to check that out 🙂

      However, this integration can only go one way — events can be sent from your form entries to Google Calendar, but dates and times in your forms can’t be blocked off based on existing events.

      I hope this helps! If you have more questions about this, please get in touch 🙂

    1. Hi Jeane,

      Great question. While our File Upload field will absolutely accept PDFs, there isn’t a great way to automatically send a PDF to an Events Calendar event from a form submission. The issue is that a PDF would need to be added within the main content area, where an event description would generally go. This is also true for regular WordPress pages/posts, since there isn’t a separate field in the editor to add these (whereas a featured image has its own specific spot in the editor).

      So in order to add PDF to an event, you’d need to manually edit the event listing to add a PDF link. In case it helps, here’s WPBeginner’s tutorial on how to create links to PDFs.

      I hope that helps! If you have any questions, please let us know 🙂

      1. Hi Jess,

        I see what you mean. So, if we used this WPForms scenario to add community events to “The Events Calendar” plugin, could we have the user upload a PDF with the submission and then manually attach it on the backend? Or, will it just not work?

        Thanks in advance!

      2. Hi Jeane,

        Yes, that’s correct — that approach will work 🙂
        So the general sequence would go something like this:

        1) Receive entry with an uploaded PDF (you can set this to send straight to your site’s Media Library if you’d like)
        2) Open the editor for that event, and add a PDF download link (here’s a screencast video to demo)
        3) Save event

        The events editor works pretty much the same as a regular WordPress page/post, so that luckily makes it pretty easy.

        If you have any other questions, please let us know in support and we’ll be happy to help!

  5. I want to have this on my site but I want the events to be from all over the country. A drop down menu to all 50 states and the events to show only in those states.

    Also the calendar to those states can be accessed by anyone, however to submit an event the user must be registered on the site before they can submit. Imagine having a “submit an event here” button but takes them to the log in page if they are not logged in and then allows access to this form after they are registered. I hope I made this clear enough. Is there a way to do this?

    1. Hi Eli,

      For the states part of your question, it would be best to ask the Events Calendar team 🙂 They should be able to provide more details on how this would work/if it’s an option, and if so we could help you connect your form to pass that data along when an event is made.

      Also, we don’t currently have a way to restrict access to forms, however you could consider using a plugin like Restrict Content (which is free) to achieve this.

      I hope this helps! If I’ve misunderstood what you’re looking for in any way, or if you have any other questions, please let us know 🙂

  6. Hi the events calendar plugin community events which users would use to submit events doesn’t have the ability to let users pay for event listings. Do you know of a way to still use the events calendar and set it up so users can pay to list events?

    1. Hi Amy,

      Great question, and I believe this should still work. To be certain, though, I’d recommend reaching out to Modern Tribe to ask if their meta keys are the same for this plugin as for the regular Events Calendar (so the same as above: _EventStartDate, etc). If not, they should be able to let you know the meta keys you’d need to use.

      I hope this helps! If you have any other questions about this, please feel welcome to contact our support team 🙂

  7. Do you know of a simplified way to have all data/fields from each event displayed in an customer interactive/sortable front end spreadsheet style list view. Basically, allowing any customer to sort the events based on all desired visible fields. I.E. sort in list view by date, name, or any other custom fields?

      1. Hi Mike,

        I apologize, but this functionality would actually fall to the third-party events plugin your using — such as The Events Calendar plugin described above.

        In case it helps, here’s the link to their free version support, and here’s the link to their main website’s support page.

        Based off of this discussion thread I found, it sounds like this type of filter functionality may require a paid addon through them — but their support should be able to clarify that further.

        I hope that helps you to find what you’re looking for! 🙂

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.