Calculated Fields Form - Google Calendar Integration

Compatible with CFF: Free Professional Developer Platinum

Calculated Fields Form - Google Calendar Integration

Easily sync your "Calculated Fields Form" Date/Timeslots controls with Google Calendar to manage schedules and prevent overlapping events.


The "Calculated Fields Form - Google Calendar Integration" plugin enables seamless synchronization between your "Calculated Fields Form" Date/Timeslots controls and Google Calendar, helping you avoid event conflicts. It automatically disables any timeslots in your form that overlap with busy periods on your connected calendar and create Google Calendar events directly using the information submitted through your form.

Timeslots
Timeslots.

The installation process of the "Calculated Fields Form - Google Calendar Integration" plugin is similar to that of any other WordPress plugin. Note this plugin requires you must have installed the Calculated Fields Form plugin installed.

  1. Download the ZIP file containing the plugin's code to your computer (using the download link provided after purchase), and then follow these steps:
  2. Go to the Plugins section in your WordPress dashboard.
  3. Click the "Add New" button at the top of the page.
  4. Click the "Upload Plugin" button, then select the previously downloaded ZIP file.
  5. Finally, install and activate the plugin.

Once activated, the plugin adds a new menu option:
Calculated Fields Form > Google Calendar

This page allows you to link your forms to Google Calendar for easy event management and conflict prevention.

Google Calendar Integration
Google Calendar Integration.

๐Ÿ—“๏ธ Google Calendar Integration

To connect your website with Google Calendar, you need a Google Client ID and Google Client Secret. Follow the steps below:

  1. Go to the Google Cloud Console.
  2. Create a new project - or select an existing one.
  3. Name your project. Google Cloud will automatically generate a unique Project ID.
  4. Your project name will appear at the top of the left sidebar.
  5. From the left menu, go to APIs & Services โ†’ Library.
  6. Search for Google Calendar API and enable it.

๐Ÿ”‘ Create OAuth Credentials

  1. Navigate to APIs & Services โ†’ Credentials.
  2. Click "Create Credentials" โ†’ "OAuth Client ID."
  3. If prompted, configure your OAuth consent screen first (see the next section).
  4. Choose Web Application as the Application Type.
  5. Enter a Name for the credentials.
  6. Under Authorized JavaScript origins, add your website domain (e.g., https://yourdomain.com).
  7. Under Authorized redirect URIs, paste the Redirect URL provided in the plugin interface.
  8. Click Create. You'll now see your Client ID and Client Secret.

๐Ÿงพ Configure the OAuth Consent Screen

  1. Go to APIs & Services โ†’ OAuth consent screen.
  2. Under User Type, select External (recommended).
  3. Fill in the required information such as App Name, User Support Email, and Developer Contact Info.
  4. In the Test Users section, add the email address of the Google Account you'll use to connect the calendar.

โš™๏ธ Connect Your Website

  1. In your plugin settings page, enter the Client ID and Client Secret.
  2. Click "Save Settings & Generate Tokens."
  3. You'll be redirected to your Google Account to grant permission for your website to access your calendars.

Once you've completed these steps, your website will be successfully linked with Google Calendar.

Upon configuring the global settings and obtaining the access token, we are ready to seamlessly integrate our forms with Google Calendar.

Integration in Forms

Form Settings
Form Settings.

The plugin adds a new section in the form settings titled: "Calculated Fields Form - Google Calendar Integration"

๐Ÿ”ง How to integrate the plugin with a form

  • Press the "Build" button corresponding to your form in the "Forms" list, which is accessible via the "Calculated Fields Form" menu option.
  • Scroll down to the "Calculated Fields Form - Google Calendar Integration" section.
  • Tick the "Enable Google Calendar integration" checkbox.
  • By default, the plugin selects your "primary" calendar. To use a different one, press the "Select another calendar" button. This will load a list of calendars associated with your account, allowing you to select the calendar you want to associate with the form.
  • Insert a Date/Timeslot control in the form, and select it from the "Timeslot field" list. The plugin will link this control to Google Calendar for scheduling.

๐Ÿ“… Creating Google Calendar events from form submissions

  • Tick the "Create Google Calendar event on form submission." checkbox.
  • Select the email controls from the "Attendee email fields" attribute. The plugin will add the collected emails as attendees of the calendar event.
  • Enter the event summary in the "Calendar summary text" text area.
  • Enter the event description in the "Calendar description text" text area.

Note: Both the summary and description attributes support the same fields and informative tags that are available in the notification emails.

Screenshots

Plugin Registration
Plugin Registration.
Google Calendar Integration
Google Calendar Integration.
Form's Settings
Form's Settings.
Timeslots
Timeslots.

29.99โ‚ฌ

One time purchase

Details

Version 1.0.0
Last updated 2025/10/13

Compatibility

Php ≥ 7.4
CFF Professional All versions
CFF Developer All versions
CFF Platinum All versions
Tested up to WP 6.8