# WordPress form with Google sheets dropdown

{% hint style="danger" %}
This feature is currently only available in the [BETA version](https://docs.super-forms.com/developers/beta-version).
{% endhint %}

{% hint style="info" %}
This guide will walk you through the steps to setup a [Dropdown element](https://docs.super-forms.com/elements/form-elements/dropdown) 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](https://docs.super-forms.com/elements/form-elements/keywords) element, [Autosuggest ](https://docs.super-forms.com/elements/form-elements/autosuggest)element and any other elements that implement the "Retrieve method" setting.
{% endhint %}

First open the Google Cloud Console and [Create a New Project](https://console.cloud.google.com/projectcreate) if you haven't already.

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

Enable the [Google Sheets API](https://console.cloud.google.com/apis/library/sheets.googleapis.com) 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.

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FvmXgvT8p971M3IG71pOG%2Fimage.png?alt=media&#x26;token=886650b8-56f7-42e8-b696-6b95fb7b377e" alt="Enable Google Sheets API."><figcaption><p>Enable Google Sheets API.</p></figcaption></figure></div>

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.

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FZ9jFLfWZHrv2BS7hu6ZB%2Fimage.png?alt=media&#x26;token=a3c1553a-2e99-4890-94ee-6994eb59f97d" alt="Creating a new Service account credential."><figcaption><p>Creating a new Service account credential.</p></figcaption></figure></div>

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

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FuIPNv8NAlv4pzffywfpB%2Fimage.png?alt=media&#x26;token=5e00edb6-d329-457e-ad39-a66a85d89270" alt="Entering service account details."><figcaption><p>Entering service account details.</p></figcaption></figure></div>

{% hint style="danger" %}
**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.
{% endhint %}

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2Fs2BbQWMp4kbg4VBf1imP%2Fimage.png?alt=media&#x26;token=876b6876-e985-4696-b056-842a85f6ceb3" alt="Copy the service account email address"><figcaption><p>Copy the service account email address</p></figcaption></figure></div>

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

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2F2ildOwL5kKSNAgsyMEun%2Fimage.png?alt=media&#x26;token=713fc87b-8dc9-4af9-a2fa-428a414ceeba" alt="Select the Service Account to create a key."><figcaption><p>Select the Service Account to create a key.</p></figcaption></figure></div>

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.

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FN042GTM2PrkZ3euUzlYd%2Fimage.png?alt=media&#x26;token=6dc92ee4-b471-4440-aa1a-7715a6271398" alt="Creating a new key for your service account."><figcaption><p>Creating a new key for your service account.</p></figcaption></figure></div>

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

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FUvXpmp0DDHAu3EUTsbnV%2Fimage.png?alt=media&#x26;token=39266281-fd23-454c-bb14-81116cebbd02" alt="Create private key for service account as type JSON."><figcaption><p>Create private key for service account as type JSON.</p></figcaption></figure></div>

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](https://docs.super-forms.com/elements/form-elements/dropdown). 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](https://docs.google.com/spreadsheets) (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:

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FnP7oiNqCPKc3GDfPpEuW%2Fimage.png?alt=media&#x26;token=14de2a49-10ed-41df-9660-0d3c18dac6e1" alt="Share google sheet document with service account."><figcaption><p>Share google sheet document with service account.</p></figcaption></figure></div>

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FWkkPXfI92Z9ySMItOBHn%2Fimage.png?alt=media&#x26;token=73b9b70c-9c78-4445-b48a-51f531134dc7" alt="Sharing the google sheet and giving &#x22;Viewer&#x22; permissions only."><figcaption><p>Sharing the google sheet and giving "Viewer" permissions only.</p></figcaption></figure></div>

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

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FMvNPDeJFR6PavgiScRxW%2Fimage.png?alt=media&#x26;token=7b759961-bfde-46da-9591-1afc2fd5a8e7" alt="Find the google sheet ID from the URL."><figcaption><p>Find the google sheet ID from the URL.</p></figcaption></figure></div>

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.

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2Fg6fiOVK8BO9GO14T88zi%2Fimage.png?alt=media&#x26;token=e2aaf9f4-8f61-42a4-bd4f-3d10f8434572" alt="Define the google sheet ID for the Dropdown element."><figcaption><p>Define the google sheet ID for the Dropdown element.</p></figcaption></figure></div>

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

<div align="left"><figure><img src="https://852124118-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl6Kz0R6S7z3Fb6KLZYVE%2Fuploads%2FQMfNmrNUBt6WSoNDDo74%2Fimage.png?alt=media&#x26;token=1d9f9a2d-be34-4870-97c8-17371a96b3af" alt="Dropdown configured to retrieve Google Sheets rows as items."><figcaption><p>Dropdown configured to retrieve Google Sheets rows as items.</p></figcaption></figure></div>

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

{% hint style="success" %}
You should now be able to manipulate the dropdown items by editing the Google spreadsheet.
{% endhint %}
