Getting around CORS with embedded google forms

user_4972043 0
Viewed 4855

I'm trying to send form data to google via an embedded form.

I found this post that seems to answer my question but I'm getting CORS errors. Is there a way to solve this?

Other posts seem to say that CORS isn't an issue but I'm getting the errors.

Here is my code:

-JS- 

function ajax_post() {
  var field1 = $('#email').val();

  $.ajax({
      url: "https://docs.google.com/forms/d/e/xxxxxxxxxxxxxxxxxxxxxx/formResponse",
      data: {"entry.xxxxxxxxxx": field1},
      type: "POST",
      dataType: "xml",
      statusCode: {
          0: function() {
          //Success message
          },
          200: function() {
          //Success Message
          }
      }
  });
}

-HTML-

<form id="emailForm" target="_self" onsubmit="" action="javascript: ajax_post()">
    <input id="email" type="text" autocomplete="off" tabindex="0" name="entry.xxxxxxxxxx" required>
    <button id="send" type="submit">Submit</button>
</form>
cors xml jquery ajax javascript
2 Answers

I've found that it's actually easier to just POST the form with a hidden iframe as its target, and capture that iframe reload when the response is submitted.

For example, if this is your form:

<form id="my-form" target="my-response-iframe" action="https://docs.google.com/forms/u/1/d/e/<YOUR-ID>/formResponse" method="post">
  <input type="text" name="entry.12345678" value="" required>
  <input type="submit">
</form>

Then include an iframe on the same page, with the same id AND name you put as target in the form:

<iframe id="my-response-iframe" name="my-response-iframe"></iframe>

When the form is submitted, it should reload that iframe with the "Your response has been recorded." page from Google. We can catch that reload with JavaScript, so include this after your form and iframe:

<script type="text/javascript">
   // set the target on the form to point to a hidden iframe
   // some browsers need the target set via JavaScript, no idea why...
   document.getElementById('my-form').target = 'my-response-iframe';
   // detect when the iframe reloads
   var iframe = document.getElementById('my-response-iframe');
   if (iframe) {
     iframe.onload = function () {
       // now you can do stuff, such as displaying a message or redirecting to a new page.
     }
   }
</script>

You can't check whether the response was submitted correctly because you can't inspect the contents of a cross-origin iframe (that'd be a huge security risk), so just assume that if this iframe reloads, the response was ok.

You can hide the iframe with the following CSS:

visibility: hidden
height: 1px;

Much cleaner if you ask me, with no console errors or failed requests.

user_28418870
Related