If you have a WordPress website and you want to show a calendar of events with a RSVP form you have a few options, I’ll show you my favorite.
Hookup Your Calendar
If you’re looking to add an event calendar to your WordPress website a great option is the popular The Events Calendar plugin, available here. One thing the calendar plugin is missing is the ability to add an RSVP form to event pages. What good is advertising your event if people can’t contact you, right? Luckily this is easy enough to add.
Hookup Gravity Forms
If you’re not familiar with Gravity Forms you’re missing out. This form plugin is the only one I use these days for a variety of reasons. It’s very affordable and has a ton of options (multi-page forms, payment add-ons, etc). We’re going to use this plugin for our RSVP form. Once you purchase your license install the form on your site and create a new form.
Now we’re going to add the fields to the form that we need. We’re going to add name, email, phone, message.
Add form to single event template
We’re going to need to edit the single events template of The Events Calendar so we can add the RSVP form.
From your server download the file “single-event.php” locate at the following location:
wp-content > plugins > the-events-calendar > src > views > single-event.php
Create a folder called “tribe-events” in the root of your theme and put this file inside this folder.
Now lets embed the form on the file. In the single-event.php file you downloaded loook for this code:
<?php do_action( 'tribe_events_single_event_before_the_meta' ) ?> <?php tribe_get_template_part( 'modules/meta' ); ?> <?php do_action( 'tribe_events_single_event_after_the_meta' ) ?>
Right after that add the following:
<?php echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]'); ?>
What we’re doing here is embedding the form by shortcode. Make sure to change the id in the code if yours isn’t “1”.
Upload this folder to your theme and view a single event page. Now you’ll see your RSVP form below the event information:
So that’s great except we’re missing one thing. How do we know which event they’re RSVPing to? We don’t want to have to rely on the user to remember to tell you. This is easy enough to add on to the form.
Open up your form in the editor again and add one more field to the top, we’ll call it “Event Name”. Click to the advanced tab on the fiels and select “Allow field to be populated dynamically”. Below this enter “eventname” as the parameter name. This is the field we’re going to populate dynamically.
Edit your shortcode so it looks like this:
<?php echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true" field_values="eventname='. get_the_title() .' "]'); ?>
What we did is add code which will pull the title of the page that the form is on (so the event title) and will fill this into the event field. Now when somebody submits the form you’ll know which event they’re RSVPing to.
One final optional step is to hide the field we just added. We don’t need the user to see the dynamically filled field, this is just for when we receive the email. We can hide this field by going back to the advanced tab and choosing “admin only”. This hides the field for the users.
Check out a live demo of the RSVP from embedded on a single event page (we left the event name field visible for the purpose of the demo):
Hope that helps you out!