Googleフォームで送信後にページ遷移をせずにメッセージを出したい

Question

Googleフォームをカスタマイズして自分のサイト設置しようと考え、こちらのサイトを参考に進めていきました。
しかし、データの送信はできたもののHTMLのrequiredが機能しなくなり、どうやらsubmitすると効かなくなってしまうらしいということがわかりました。
JavaScriptがわからないなりに考え、ダミーのボタンが押されることでデータ送信用のボタンも押される処理を書いたのですが「Uncaught Could not establish connection. Receiving end does not exist.」というエラーが出てしまいました。

データの送信はできるものの、「お問い合わせありがとうございました」というメッセージが出ない状態です。

該当部分のコードは以下の通りです。

<div id="form">
  <form action="https://docs.google.com/forms/u/0/d/e//formResponse" method="post" name="myForm" class="text-center" target="dummyIframe">
    <label>メールアドレス（必須）</label>
    <p>
      <input type="email" name="emailAddress" value="" autocomplete="email" required>
    </p>
    <label>会社名（必須）</label>
    <p>
      <input type="text" name="entry.1987797232" autocomplete="organization" required>
    </p>
    <dl class="radioBtn">
      <dt>お問い合わせ項目<span>必須</span></dt>
      <dd>
        <ul>
          <li>
            <input type="radio" name="entry.1302079128" value="ブログについて" id="Male">
            <label>ブログ</label>
          </li>
          <li>
            <input type="radio" name="entry.1302079128" value="ホームページについて" id="Female">
            <label>ホームページ</label>
          </li>
          <li>
            <input type="radio" name="entry.1302079128" value="その他">
            <label>その他</label>
          </li>
        </ul>
      </dd>
    </dl>
    <p>
      <label>お問い合わせ内容（必須）</label>
    </p>
    <p>
      <textarea name="entry.1962979988" placeholder="お問い合わせ内容" required></textarea>
    </p>
    <p>
      <input type="button" value="送信" onclick="sendGform()">
      <input type="submit" value="不可視ボタン"  style="display:none" name=submitBtn>
    </p>
  </form>
  <iframe name="dummyIframe" style="display:none;"></iframe>
</div>
<div id="thxMessage" style="display:none;">お問い合わせありがとうございました。</div>
  <script>
    function sendGform(){
      $("input[name=submitBtn]").click()
    }
    function click() {
      document.myForm.submit();
      document.getElementById('form').style.display = 'none';
      document.getElementById('thxMessage').style.display = 'block';
    }
  </script>

コンソールを見たところGoogle側のコードのこの部分にエラーが出ていました。

var Li,hqa,gqa;_.Ki=function(a){_.t.setTimeout(function(){throw a;},0)};_.Mi=function(a){a=gqa(a);!_.Oa(_.t.setImmediate)||_.t.Window&&_.t.Window.prototype&&!_.Dc("Edge")&&_.t.Window.prototype.setImmediate==_.t.setImmediate?(Li||(Li=hqa()),Li(a)):_.t.setImmediate(a)};

Answer 1

根本的な解決方法ではないかもしれませんが、HTMLのrequiredを使わずにJavaScriptでアラートを出す方法に切り替えました。

今回はテキスト入力欄を必須項目にしたいためnameをもとにその部分をチェックし、不備があった場合はアラートが出るようにしました。

var val=document.getElementsByName("emailAddress")[0];
      if (val.value.length == 0) {
        alert("メールアドレスは必須項目です");
        val.focus();
        return;
      }

また、メールアドレス入力欄にメールアドレス以外が入力された場合にアラートが出るようにしたかったため、その部分のコードも追加しました。

var flag = 0;
	      if(!document.myForm.emailAddress.value.match(/.+@.+..+/)){
           flag = 1;
         }
	         if(flag){
		           window.alert('メールアドレスが正しくありません'); 
		             return
                 }

送信ボタンを押すとメールアドレスがきちんと入力されているか、必須項目に空欄がないかを確認してからデータが送信されます。

<div id="form">
  <form action="https://docs.google.com/formsformResponse" method="post" name="myForm" target="dummyIframe">
    <label>メールアドレス（必須）</label>
    <p>
      <input type="email" name="emailAddress" value="" autocomplete="email">
    </p>
    <label>会社名（必須）</label>
    <p>
      <input type="text" name="entry.1987797232" autocomplete="organization">
    </p>
    <dl class="radioBtn">
      <dt>お問い合わせ項目</dt>
      <dd>
        <ul>
          <li>
            <input type="radio" name="entry.1302079128" value="ブログについて">
            <label>ブログ</label>
          </li>
          <li>
            <input type="radio" name="entry.1302079128" value="ホームページについて">
            <label>ホームページ</label>
          </li>
          <li>
            <input type="radio" name="entry.1302079128" value="その他">
            <label>その他</label>
          </li>
        </ul>
      </dd>
    </dl>
    <p>
      <label>お問い合わせ内容（必須）</label>
    </p>
    <p>
      <textarea class="" name="entry.1962979988" placeholder="お問い合わせ内容"></textarea>
    </p>
    <p>
      <input type="button" value="送信" onclick="sendGform()">
    </p>
  </form>
  <iframe name="dummyIframe" style="display:none;"></iframe>
</div>
<div id="thxMessage" style="display:none;">お問い合わせありがとうございました。</div>
  <script>
    function sendGform(){
      var val=document.getElementsByName("emailAddress")[0];
      if (val.value.length == 0) {
        alert("メールアドレスは必須項目です");
        val.focus();
        return;
      }
      var flag = 0;
	      if(!document.myForm.emailAddress.value.match(/.+@.+..+/)){
           flag = 1;
         }
	         if(flag){
		           window.alert('メールアドレスが正しくありません'); 
		             return
                 }
      var val=document.getElementsByName("entry.1987797232")[0];
      if (val.value.length == 0) {
        alert("お名前は必須項目です");
        val.focus();
        return;
      }
      var val=document.getElementsByName("entry.1962979988")[0];
      if (val.value.length == 0) {
        alert("お問い合わせ内容は必須項目です");
        val.focus();
        return;
      }
      document.myForm.submit();
      document.getElementById('form').style.display = 'none';
      document.getElementById('thxMessage').style.display = 'block';
    }
  </script>