View Categories

How to Connect DriveHub to Elementor Form and Send Files to Google Drive

0:00 4:32
Table of Contents

Do you want people to send files straight to your Google Drive when they fill out a form on your website? You can easily do this by using DriveHub with Elementor Form.

This setup is super useful because it keeps your website server light since large files don’t clog up your hosting space, and it keeps all your documents neatly organized in one secure place.

Here is an easy, step-by-step guide to help you set it all up!

Note: This needs DriveHub Pro.

Step 1: Install and Activate DriveHub #

From the WordPress plugin repository install and activate DriveHub using the following method.

  • Go to Plugins from your WP-Admin.
  • Click on Add New.
  • Search for DriveHub.
  • Click Install and then Activate the plugin.
Search for DriveHub in Add Plugins, then click Install Now and Activate
Install and activate DriveHub

Step 2: Add your Google Account #

Once activated you’ll be redirected to the Setup menu.

  • Click on Start setup.
  • Choose the setup method (Whole Drive/Selected folders).
  • Click on Add account.
  • Select the Google Account you want to add.
  • Allow the necessary permissions.

Read our step by step setup guide to avoid any confusion.

Starting the DriveHub setup

Step 3: Enable Elementor Form Integration #

From the DriveHub settings > choose Integrations.

  • Select Integrations.
  • Find the Elementor Form card under Form uploads and enable Elementor Form.
  • Click Save changes.
Enabling the Elementor Form integration

Step 4: Creating a Module #

The next step is to create a module so that we can use it with the integration.

  • Go to DriveHub and click on Modules.
  • Create a new File Uploader Module.
Create a File Uploader module

Step 5: Choose Your Google Drive Folder (Source Tab) #

In this step, you pick where the files from your form will go:

  • Go to the Source Tab.
  • Pick the Google Drive folder where you want people’s uploaded files to be saved.
Choosing the folder in the Source tab

Step 6: Choose File Rules (Filter Tab) #

Here, you can decide what kinds of files people are allowed to send:

  • Go to the Filter Tab.
  • Allowed Extensions: Type in the types of files you want (like jpg, png, pdf) separated by commas. If you leave this blank, people can upload any file type.
  • File Limits: Choose the maximum number of files people can upload (Max File Uploads), and how big or small the file size can be (Max File Size (MB) and Min File Size (MB)).
Filter tab settings

Step 7: Change How It Looks (Advanced Tab) #

  • Go to the Advanced Tab.
  • Here, you can change the size and width of the upload box on your website.
Advanced tab settings

Step 8: Set Up Email Alerts (Notifications Tab) #

  • Go to the Notifications Tab.
  • Turn this on if you want to get an email every time someone uploads a file through your form.
Notifications tab settings

Step 9: Choose Who Can Use It (Permissions Tab) #

  • Go to the Permissions Tab.
  • Here, you can choose if Everyone can use the upload box, or only people who are Logged In to your website.
  • You can also set a password if you want to keep the uploader extra safe.
  • There are several other options to configure based on your needs and requirements.

Don’t forget to click the Save changes button at the top right when you are finished!

Permissions tab settings

Step 10: Configuring Elementor Form #

From the Elementor editor, create a New form or edit an existing one.

Note: Elementor Form only works with Elementor Pro. Therefore, make sure you have Elementor and Elementor Pro Installed and Activated.

  • Open your page with Edit with Elementor and drag the Form widget onto it, or click an existing form.
  • Add all the necessary fields (e.g., name, email, etc.)
  • In the Form Fields list, click + Add Item to add a new field.
  • From the field’s Type dropdown, look for the Google Drive Upload field type and select it.
Choosing Google Drive Upload as the field type in the Elementor form
  • With the field still open, the field configuration options show below the type.
  • Pick your module from the Google Drive Module dropdown (e.g., Client Upload Box).
  • Configure the rest of the settings according to your needs.
Picking the Client Upload Box module in the Google Drive Module dropdown

Step 11: Publish the Form #

Once you’re happy with all the settings, give your form a name in Form Name, then click Publish in Elementor. Your form now lives right on that page, so there is no shortcode to copy.

The finished form in the Elementor editor with the Publish button

Now whenever someone uploads a file, image, or any other attachment, you will receive an email suggesting the activity and also the file or attachment will be saved inside your connected folder.

The published form with two files ready in the DriveHub upload box

Benefits of using DriveHub with Elementor Form #

  • Save hosting space: Form attachments go to Google Drive, not your server.
  • Right inside your form: The upload box sits in your Elementor form, next to your other fields.
  • One place for files: Every attachment lands in the folder you picked.
  • Your rules: Limit file types, sizes and who can upload.

With DriveHub and Elementor Form, collecting files through your Elementor pages is simple and tidy.

Related guides:

Was this page helpful?

Powered by BetterDocs