Loading external Google Forms into div element using jQuery

Other Questions Google docs
1

I’m trying to embed a Google Form that I created into a specific div container on my webpage using jQuery’s load method. I have the form URL and want to dynamically insert it into an element.

Here’s what I’m attempting:

var formUrl = 'https://docs.google.com/forms/d/e/sample-form-id/viewform';
$('#target_container').load(formUrl);

The target container is created dynamically through JavaScript. Is this approach going to work for loading Google Forms content, or are there restrictions that would prevent this from functioning properly? I’m wondering if there are any cross-origin issues or other limitations I should be aware of when trying to load external form content this way.

2

Unfortunately, that won’t work because of CORS restrictions. Google Forms block cross-origin requests, so jQuery’s load method will fail when trying to fetch content from Google’s servers. I hit this exact same issue last year building a client dashboard that needed multiple forms loaded dynamically. The browser blocks the request and you’ll see CORS errors in the console. Use Google’s iframe embed instead. You can still load it dynamically by creating an iframe element with jQuery and setting the src to your form URL with “/viewform?embedded=true”. This way you’re embedding it properly in an iframe container rather than trying to load the content directly - which is what Google expects for form embedding.

3

cORS will block that, trust me. google forms can’t be loaded with .load() due to same-origin issues. I’ve faced it when trying to make dashboards too. better to use iframe embedding. just create an iframe and set src to your form URL with ?embedded=true. it avoids CORS.

4

You’re hitting browser security restrictions. Google Forms live on a different domain and they block direct content loading through jQuery’s load function. I ran into this exact issue while building a project management tool that needed to integrate multiple forms. Just use Google’s official embed method instead. Grab the embed code from your form’s send options, or build an iframe manually with the URL tweaked to include the embedded parameter. Try $('#target_container').html('<iframe src="' + formUrl + '?embedded=true" width="100%" height="600"></iframe>'); - works way better. The iframe respects Google’s security policies but still lets you load dynamically into your container. Just tweak the dimensions to match your form’s length.