Gravity Forms + Events Calendar Submissions

Published on: May 9, 2011 | Categories: Tutorial

Update 10/26/11: with the release of The Events Calendar and Events Calendar PRO 2.0, this solution no longer works! But don’t fret — if you follow the steps outlined in this post, along with those below, you’ll be set. 

A HUGE thanks to Tim Bowen (@creativeslice) for putting this together. If you have any comments or questions, head over to the original article and ask Tim. http://creativeslice.com/tutorials/gravity-forms-events-calendar-submissions/.

This tutorial demonstrates how to use Gravity Forms to submit events to Events Calendar Pro from the public facing side of a WordPress theme.

First you’ll need the Gravity Forms plugin ($39) and the Events Calendar Pro plugin ($30) installed. These are both premium plugins and well worth the price. You should also install the Gravity Forms + Custom Post Types plugin to connect Gravity Forms submissions with Events.

A modified version of this tutorial may work with the free version of The Events Calendar. If there’s enough interest I’ll write up another tutorial for that.

Now that you have the above 3 plugins installed you should create a new Form.

  1. In the admin panel click on Forms > New Form
  2. Title this form and under Form Settings > Advanced change the button text to something like “Submit Event”
  3. Use the Post Fields panel to add Title and Bodyfields to the form.Post Fields
  4. Under the Title field you have created go to Advanced and check the “Save As Custom Post Type” box (this was added by the Gravity Forms + Custom Post Types plugin) and choose Events from the drop-down list.
  5. Use the Advanced Fields panel to add 1 Date and 2 Time fields (for start and end time)
    Advanced FieldsIt’s important to create the fields in this order to match the functions we will be adding later in this tutorial. The Date should be the 3rd field, the Start Time the 4th field and the End Time the 5th field.

Your form should now look like this:
Step 1

Now you can add extra fields to be used by Events Calendar Pro. Available fields:
_EventVenue, _EventPhone, _EventAllDay, _EventCost, _EventAddress, _EventCity, _EventZip, _EventState (use format like AZ), _EventCountry (use format like United States), _EventOrganizerID, _EventVenueID, _EventAllDay, _EventStartDate, _EventEndDate, _EventShowMapLink, _EventShowMap

The Venue Custom Post type uses: _VenueVenue, _VenueCountry, _VenueAddress, _VenueCity, _VenueStateProvince, _VenueZip, _VenuePhone

The Organizer Custom Post type uses: _OrganizerOrganizer, _OrganizerEmail, _OrganizerWebsite, _OrganizerPhone

For example here is how you would add an Event Venue to the form:

  • Under the Post Fields panel choose Custom Field
  • Edit this custom field and label it something like Event Venue
  • Under “Custom Field Name” choose New and enter _EventVenueEvent Venue Custom Field
  • You can add more custom fields as needed

You should now save the form and go to Forms > Edit Forms to see a list of the Gravity Forms you’ve created. Be sure to note the Id of this Submit Event form. If this is the first form you’ve created the Id will be “1″.

Next you need to add some code to the functions.php for of the active theme. (Special thanks to Sam DeVore for this code!)

// Format Date from gravity forms to events plugin
add_action("gform_pre_submission", "format_event_date");

function format_event_date($form){

$formId = 1; // this is the gavity forms id
$dateFormId = 3; // this is the form element that contains the date of the form ‘mm/dd/yyyy’ $_POST['input_3']

$startTimeFormId = 4; // form element for the start time $_POST['input_4'][0] – for hour, $_POST['input_4'][1] – for minute, $_POST['input_4'][2] – for meridian
$endTimeFormId = 5; // form element for the start time $_POST['input_5'][0] – for hour, $_POST['input_5'][1] – for minute, $_POST['input_5'][2] – for meridian
if($form["id"] != $formId){
return;

}
$date = date_parse($_POST['input_'. $dateFormId]); // break the date into an array
// sql format the result
$dateString = $date['year'] . ‘-’ . str_pad($date['month'], 2, “0″, STR_PAD_LEFT) . ‘-’ . str_pad($date['day'], 2, “0″, STR_PAD_LEFT);
// get the start/end times
$startTime = $_POST['input_'. $startTimeFormId];

$endTime = $_POST['input_'. $endTimeFormId];

// load the values for EventsCalendarPro

$_POST['EventStartDate'] = $dateString;
$_POST['EventStartHour'] = str_pad($startTime[0], 2, “0″, STR_PAD_LEFT);

$_POST['EventStartMinute'] = str_pad($startTime[1], 2, “0″, STR_PAD_LEFT);

$_POST['EventStartMeridian'] = $startTime[2];

$_POST['EventEndDate'] = $dateString;

$_POST['EventEndHour'] = str_pad($endTime[0], 2, “0″, STR_PAD_LEFT);

$_POST['EventEndMinute'] = str_pad($endTime[1], 2, “0″, STR_PAD_LEFT);

$_POST['EventEndMeridian'] = $endTime[2];
}

Important Notes:

  1. Make sure to put the above function code inside php tags.
  2. $formId = 1 needs to match your forms Id #
  3. $dateFormId = 3 needs to match the Date form ID. It will be 3 if you followed the instructions above. Alternatively you may need to find this by Viewing Source on the form page.
  4. $startTimeFormId = 4 needs to match the Start Time form ID.
  5. $endTimeFormId = 5 needs to match the End Time form ID.

The last step is to add this new Gravity Form to the page where you’d like visitors to submit events. By default events will be submitted as Drafts and may be approved and edited by an admin.

Visitors to your site may now submit events which will be added to Events Calendar Pro and may be easily published to your Calendar.

Again, a huge thanks to Tim for providing this great solution!

13 Responses to Gravity Forms + Events Calendar Submissions

  1. Peter Chester says

    Awesome!!!!! Thank you Tim Bowen!

  2. Zacchaeus Nifong says

    Dear Shane, Peter & Rob (and whoever else ;-)

    I’ve followed your instructions exactly but I’m wondering if those custom fields in the Gravity Form can be auto-populated from the Events Calendar. Is that possible?

    Check out where I’ve created this: http://kiscc.com/beta/event/just-another-event-that-youre-gonna-love/

    Any assistance would be greatly appreciated.

    Thanks,
    Z

  3. Rob La Gatta says

    Hey Zacchaeus, that’s looking pretty solid so far. I don’t believe having the custom fields autopopulated would be doable without doing some additional work (beyond that noted in the walkthrough). Have you checked the comments on the GF walkthrough over at Tim’s site, to see if any other users have proposed a way to do this?

    • Zacchaeus Nifong says

      Dear Rob~

      Haven’t check that out yet but I sure will. That would be a sweet add-on in another version of ECP though, dont you think?

      I’m waiting on 2.0 to come so I can support you guys and purchase, but for now, I’m diggin the Beta. ETA on the 2.0?

      Thanks mate,
      Z

      • Rob La Gatta says

        Awesome. I definitely think that could be a sweet add-on…in fact we’ve got something along those lines in the hopper right now, which we’ll announce more on as we get closer to launch.

        The third round of our 2.0 beta is kicking off on 9/5. Send me an email reminder that you’re interested – ideally along with a link to the site where you’ll be using it – and I’ll add you to the list. My email is rob @ tri.be. Thanks man!

  4. Pingback: Event Submissions Using Gravity Forms in 2.0 | Modern Tribe Inc.

  5. Blake says

    All works well, but how does the Venue Name, Venue Address, City, automatically post too? I set it up with those custom types you said, but nothing imported over. Do you have to add more PHP?

    • Kylie Meller @ Duosista says

      Hi Blake, did you get a reply as to weather you need to add more PHP code to get the extra fields to transfer over? Thanks

  6. Rob La Gatta says

    Hey guys. Thanks for the feedback so far. My best suggestion for specific GF-integration issues would be to post them on the PRO forums here; we are trying to avoid getting in the habit of providing direct support on the comments pages because things inevitably get lost.

    I will also say that it might not be a bad idea to contact Tim, who wrote the initial tutorial, directly. Since we didn’t draft that he may be better suited to answer some of the more specific questions than we are. Otherwise, post it in the forum and I can get one of our devs to chime in directly. Thanks!

  7. Julia says

    Hi There,

    I have problems with the php code. I am not a programmer.

    This is the content of my function.php

    $theme_data['Name'],
    ‘theme_version’ => $theme_data['Version']
    ));

    ?>

    Where do I have to add the code?

    • Rob La Gatta says

      Hey Julia. Thanks for the note here; generally if you just add it at the end of the file, it should be fine. Have you given that a go?

      I should also note that the Community Events add-on, our officially supported route for frontend event submissions, should be out this week. As this tutorial was meant just to serve as a stopgap until that was released, you won’t have to do any of this hackery should you snag the Community add-on.

      Hope that helps. Please let us know if you’re still having issues from there.

  8. Julia says

    Dear Rob,

    I have included it at the end but insite the php tags

    $theme_data['Name'],
    ‘theme_version’ => $theme_data['Version']
    ));
    // Format Date from gravity forms to events plugin
    add_action(“gform_pre_submission”, “format_event_date”);

    function format_event_date($form){

    $formId = 12; // this is the gavity forms id
    $dateFormId = 5; // this is the form element that contains the date of the form ‘mm/dd/yyyy’ $_POST['input_3']

    $startTimeFormId = 6; // form element for the start time $_POST['input_4'][0] – for hour, $_POST['input_4'][1] – for minute, $_POST['input_4'][2] – for meridian
    $endTimeFormId = 4; // form element for the start time $_POST['input_5'][0] – for hour, $_POST['input_5'][1] – for minute, $_POST['input_5'][2] – for meridian
    if($form["id"] != $formId){
    return;

    }
    $date = date_parse($_POST['input_'. $dateFormId]); // break the date into an array
    // sql format the result
    $dateString = $date['year'] . ‘-’ . str_pad($date['month'], 2, “0″, STR_PAD_LEFT) . ‘-’ . str_pad($date['day'], 2, “0″, STR_PAD_LEFT);
    // get the start/end times
    $startTime = $_POST['input_'. $startTimeFormId];

    $endTime = $_POST['input_'. $endTimeFormId];

    // load the values for EventsCalendarPro

    $_POST['EventStartDate'] = $dateString;
    $_POST['EventStartHour'] = str_pad($startTime[0], 2, “0″, STR_PAD_LEFT);

    $_POST['EventStartMinute'] = str_pad($startTime[1], 2, “0″, STR_PAD_LEFT);

    $_POST['EventStartMeridian'] = $startTime[2];

    $_POST['EventEndDate'] = $dateString;

    $_POST['EventEndHour'] = str_pad($endTime[0], 2, “0″, STR_PAD_LEFT);

    $_POST['EventEndMinute'] = str_pad($endTime[1], 2, “0″, STR_PAD_LEFT);

    $_POST['EventEndMeridian'] = $endTime[2];
    }

    ?>

    than added the IDs and created a new form but get the following error message.
    Warning: Cannot modify header information – headers already sent by (output started at /is/htdocs/wp1165078_IUT9G4YR99/www/wp5/wp-content/themes/Insignia/functions.php:1) in /is/htdocs/wp1165078_IUT9G4YR99/www/wp5/wp-includes/pluggable.php on line 866

    Does the community Event plugin has the feature that everbody can add their own events without a login? I need this as a wifget for the right hand site navigation.