Can jQuery's .load() method fetch a Google Docs form?

Other Questions Google docs
1

Hey everyone! I’m trying to figure out if it’s possible to use jQuery to load a Google Docs form into a div on my webpage. I’ve got this form I made with Google Docs and I want to display it inside my site without redirecting users.

I tried something like this:

var formUrl = 'my-google-docs-form-url-here';
$('#formContainer').load(formUrl);

But it’s not working as expected. The tricky part is that my #formContainer is actually created dynamically. Any ideas on how to make this work? I’m not sure if there are any cross-origin issues or if I’m just doing something wrong with the jQuery .load() method.

Has anyone successfully embedded a Google Docs form using jQuery before? I’d really appreciate any tips or alternative approaches! Thanks in advance for your help!

2

I’ve actually tackled this issue before in one of my projects. The .load() method won’t work here due to cross-origin restrictions. Instead, I’d recommend using an iframe to embed the Google Docs form. It’s a bit old school, but it gets the job done reliably.

Here’s what worked for me:

var formUrl = 'your-google-form-url';
var iframe = '<iframe src="' + formUrl + '" width="100%" height="500px" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>';
$('#formContainer').html(iframe);

This approach sidesteps the CORS issues and works even with dynamically created containers. Just make sure you’re calling this code after your container is added to the DOM. If you’re concerned about responsiveness, you can adjust the iframe’s dimensions or use CSS to make it more flexible.

One caveat: keep an eye on Google’s terms of service. They occasionally update their policies on embedding forms, so it’s worth double-checking to ensure you’re in compliance.

3

hey dave, i’ve dealt with this before. jquery .load() won’t work cuz of cross-origin stuff. try using an iframe instead:

var formUrl = ‘your-google-form-url’;
var iframe = ‘’;
$(‘#formContainer’).html(iframe);

make sure to run this after ur container is in the DOM. works like a charm for me!

4

I’ve encountered this issue before, and unfortunately, jQuery’s .load() method won’t work due to cross-origin restrictions. However, there’s a simple workaround that’s quite effective.

Instead of using .load(), you can embed the Google Docs form using an iframe. Here’s how you can do it:

var formUrl = ‘your-google-form-url’;
var iframe = ‘’;
$(‘#formContainer’).html(iframe);

This method works well even with dynamically created containers. Just ensure you’re executing this code after your container is added to the DOM.

One thing to keep in mind: Google occasionally updates their policies on form embedding, so it’s worth reviewing their terms of service periodically to ensure compliance.