Piotnet Grid Launch Event - 20% discount code "PIOTNETGRID" for Piotnet Forms
×
HIDE

Google Calendar

Do you want to send events from your WordPress contact form straight to Google Calendar?

Perhaps you use Google Calendar to take bookings, or maybe you have a contact form that lets clients book a call with you. You can automatically add those events to your Google Calendar.

In this article, we’ll show you how to easily add Google Calendar events from your WordPress contact form.

Step 1: Get access from Google:

1.1 – Create API key:

– Piotnet Forms > Settings > Click to “Click here to Sign into your Gmail account and access Google Calendar’s application registration”

– Enable APIS and Services: Click to “Enable APIS and Services” which you can see in the below image. Then choose the Google Calendar API and Enable it.

– Next to, You have to create the API key in Credentials.

– Click to Restrict Key

– Choose Restrict key. Then choose the Google Calendar API. And Save it. Now you have “API key”

1.2 – Create Client ID and Client Secret:

– Click “Create OAuth client ID”

– Choose Web application. Then enter Authorized JavaScript origins ( your domain ) and Authorized redirect URIs ( you can get it in Piotnet Forms > Settings ).

Get Authorized redirect URIs

– Click to Create and you will have Client Secret and Client ID:

1.3: Get the access from your website:

– Get back to Piotnet Forms setting page and enter all the informations above to the setting of Google Calendar Integration

– After enter all the informations. Click to “Saving”. Waiting for reloading then click to “Authorization”. And choose your account:

– Click to Advanced

– Click to Go to *your website*

Step 2: Create the Form with Piotnet Forms:

– You can create a form with same as the image in the below:

– Choose “Google Calendar” in Action After Submit option

– Then, please enter all field shortcode which you setup in the form above. Same the image in the below:

– If you choose date type is date time, you have to add the below custome code to Flatpickr Custom Options in Date start field and Date end field

{
  enableTime: true,
  altInput: true,
  altFormat: "Y-m-d H:i",
  dateFormat: "Z",
}

Add the custom code for date field when date type is date time

Send data from Booking Form to Google Calendar

Step 1: Create the Booking Form

Follow this document:  https://pafe.piotnet.com/docs/booking-form-2/

Step 2: Get the Booking Form ID and enter it to Description of Google Calendar