How to Embed File Upload Forms in your Website

You can easily embed File Upload Forms in any website be it a WordPress blog, a Squarespace site, a WooCommerce store, your company’s intranet or even Google Sites.

Your File Upload Form is internally a web app hosted on script.google.com. You can use IFRAME tags to embed this web app into any other page but before doing that, we need to make a few changes in the Form Settings.

This is required because the File Picker, the library that helps users upload files on to your Google Drive, is configured to work on a single web domain and doesn’t allow multiple origin domain.

What that means is if you have a form served from script.google.com and you change the embed domain to, say, example.com, the file upload will only work on example.com and not the script.google.com domain.

embed-form.png

How to Embed File Upload Forms

  1. Open the associated Google Sheet, go to Addons > File Upload Forms > Form Settings and put your website domain in the EMBED DOMAIN field. For instance, if you wish to embed the form on example.com, you need to put http://example.com in the field.
  2. Save the settings and close the window.
  3. Go to Tools > Script Editor and choose Publish > Deploy as Web App and make a note of the web app URL (see screenshot above).

The web app URL has this format:

https://script.google.com/macros/abc/exec

The embed code would be something like this:

<iframe src="https://script.google.com/a/macros/s/abc/exec" width="800" height="800" frameborder="0"></iframe>

Remember to replace the URL in the IFRAME code with the URL of your web app. You can also change the height and width value as per the design of your own website.