WordPress form with Google sheets dropdown

How to setup a WordPress form that has a dropdown with items retrieved from a Google (drive) sheets file.

This feature is currently only available in the BETA version.

This guide will walk you through the steps to setup a Dropdown element for your form that implements Google Sheets service to retrieve the rows from your sheet as the dropdown items. Note that this can also be used for Keyword element, Autosuggest element and any other elements that implement the "Retrieve method" setting.

First open the Google Cloud Console and Create a New Project if you haven't already.

Enter the project name, billing account and company (optional) and click CREATE.

Enable the Google Sheets API for your project. Direct link to Google Sheets API: https://console.cloud.google.com/apis/library/sheets.googleapis.com

Confirm you are still on the correct project and enable the API by clicking ENABLE as shown below.

Next we will want to create our credentials so that we can communicate with Google Sheets API. Click on the CREDENTIALS tab, then click + CREATE CREDENTIALS and choose Service account as shown below.

Creating a new Service account credential.

Enter the Service account name, ID and description. For our demo we will name it superforms. Click DONE.

Important: Make sure to copy the service account email address as shown in the picture below. You will need it later on to share the Google Sheet document.

Now go ahead and click on the account you just created, in our case superforms@xxxxxx:

Select the Service Account to create a key.

Create a new key for this account. Click on the KEYS tab and click ADD KEY. Choose Create new key from the dropdown to create a new one as shown below.

Creating a new key for your service account.

Choose JSON as the key type and click CREATE as shown below.

Create private key for service account as type JSON.

A .json file should now be downloaded. Open the file and copy the contents to your clipboard. Navigate to your form and add or edit your Dropdown element. Set the Retrieve method to Google sheets and paste the contents of the json file under Google API credentials.json.

Change the Range if needed, but by default this will be Sheet1 which will read all the rows from Sheet1.

The last step is to create a Google Sheet (if you haven't already). A sheet can be set to public or private. If you choose for a private sheet, you will require to add (share) the sheet with the service account created so that it has permissions to view the contents. To do this click the "Share" button or go to File > Share. Here you can paste the service account address:

Share google sheet document with service account.

Sharing the google sheet and giving "Viewer" permissions only.

Now copy the sheet ID. You can find your sheet ID from the URL in your browser as shown below.

Paste this ID under Google sheet ID for your Dropdown element on your WordPress form, and click Update Element to save the settings for the Dropdown element.

Define the google sheet ID for the Dropdown element.

If setup correctly your Dropdown settings should look something like this:

Dropdown configured to retrieve Google Sheets rows as items.

Now Save the form and test if the changes made to the Google Sheet are reflected on the form Dropdown element.

You should now be able to manipulate the dropdown items by editing the Google spreadsheet.

PreviousAdvanced NextCustom registration form for WordPress

Last updated 1 year ago