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”

cld 0

– 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.

cld 1

cld 11

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

cld 12

– Click to Restrict Key

cld1

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

cld1 1

1.2 – Create Client ID and Client Secret:

– Click “Create OAuth client ID”

cld124

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

cld311

Get Authorized redirect URIs

cld3 1

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

client1

1.3: Get access from your website:

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

Screenshot 1 1

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

Screenshot 21

– Click to Advanced

Screenshot 3

– Click to Go to *your website*

Screenshot 5

Step 2: Create the Form with Piotnet Forms:

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

– Choose “Google Calendar” in Action After Submit option

Screenshot 9

– Then, please enter all field shortcode that you set up in the form above. Same as the image in below:

Screenshot 27

– 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",
}
Screenshot 17

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 into the Description of Google Calendar