This tutorial will be helpful to people that book sessions of their time as their main product or as part of their customer journey, and that process is initiated by a form.
Unpopular member Bel asks “I’m trying to add the date location and time from just my deposit invoice to google calendar but it looks like I can’t be specific”. So although you could add a calendar event from a Xero invoice, there’s too much room for error. Instead, I would create the calendar event out of a form.
The tools I’m using in this tutorial are a WordPress website for the CMS (content management system), hosted on WP Engine, running the Divi theme from Elegant Themes, the WordPress plugin Gravity Forms for creating and running the form that initiates the process, Zapier to take the ball and make the calendar event, and Google Calendar for hosting the actual calendar.
The website CMS, host, and forms are interchangeable with different results.
Step 1: Data in
So your calendar entry has to start somewhere, but the only real piece of data we need is a date, and you need it in a format computers like – there are a few formats that work but in this exercise I’m working with something like 8/12/17, the 8th day of December 2017 (my birthday, don’t forget it!).
The element of my customer journey I’m displaying in this tutorial is when a couple decide to book me as their celebrant. The entire form asks all the questions I need answered when someone makes that decision (to book me) and it ends with a financial transaction. We’ll cover that in other tutorials, but for today I needed to point out that you don’t make it to my calendar unless you have signed the contract and paid the deposit. Because this form makes both of those processes possible, I’m ok with the same form creating a calendar event on my business calendar.
In Gravity Forms we create the form, and the most important field is the “Date” field. I like to choose the calendar picker icon as well so customers know they can choose a date instead of typing it. The importance there is that a computer ‘typing’ the address will be cleaner and more correct than a human typing it.
The form displays like this.
Step 2: Processing the form
In Gravity Forms, on submission of a form there are three outputs available.
- A notification, aka an email
- A confirmation, aka what the customer sees
- A third party plugin
In this tutorial I’m sending the data to a third party plugin, namely, the Zapier plugin.
The Gravity Forms Zapier plugin takes everything entered into a form, and hands it off to Zapier to do something with. Zapier is an “if this happens, then do that, and possibly that, and so forth” web service. Today’s example sees “if form is submitted then create a calendar event”.
We create a zap (an action in Zapier) that is triggered by a new Gravity Forms form submission. You’ll need to copy and paste the URL Gravity Forms gives you into Zapier.
Once I have the date into Zapier I convert it into day/month/year instead of the American default of month/day/year, and I do that using the Zapier “Formatter” tool. Choose date, then the input from your form, and then the format you’d like outputted.
The next step in the zap is to create a Google Calendar event, and I’m choosing the ‘Detailed Event” option because I want to do a few tricky things.
The event I’m creating is a wedding, and it’s someone’s wedding, not just any old wedding so I pull their names from the Gravity Forms form and make a title for the event out of them.
I go a little bit detailed in the calendar event because if I’m looking at that event and want to contact them, at least now all of their details will be right there in the event.
Here’s the tricky stuff – Zapier and Google Calendar ask for that info to be input on the same line, Zapier actually has a whole help page about this to save me reinventing the wheel here.
What I want to do is create the event on the date the couple entered on the form, and if I did it without asking for a time, it would become an all day event, or I could add a time here, but every wedding ceremony is at a different time. So in the form I ask for the time, and use it in the zap. You must tell the zap a start time, and an end time, in my case, that’s an hour later so it’s the same data and you literally type +1h at the end to add one hour to that time.
Saving this zap and making it active will create a calendar event as programmed by you every time someone submits that form. I suggest password protecting the form or the page, or attaching a Stripe payment to it so every visitor to that form doesn’t get direct access to your precious Google Calendar.
I like to mark off the hour before a wedding for being at the venue early for setup and to make sure I’m all ready. So there’s an additional step in this zap for me that adds a second, earlier, calendar event called “Be at venue early”. This screenshot shows you the time values to help you create your own.