[Q&A] WEBサイトのお問合せをGoogle formに連携して送っても回答が届かない

WEBサイトのお問合せをGoogle formに連携して送っても回答が届かない

解決したいこと

WEBサイトのお問合せをGoogle formに連携してサーバーにアップし、お問合せを送っても回答がGoogle formに届かない。これを届くようにしたい。

サイトデータ(html、css、JavaScriptの修正で解決できるのか、サーバーかGoogle form 側の設定を変えれば解決すのか、あるいはサーバーやGoogle form への設定の依頼などをすれば解決するのかなども教えていただけると助かります。自身で解決できるのか、サービスに依頼すれば解決できるのか、解決できないのかも特定できると助かります。

発生している問題・エラー

Access to XMLHttpRequest at 'https://docs.google.com/forms/u/0/d/e/…/formResponse' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当するソースコード（一部xxxxで示しております。）

JavaScript

  let $form = $('#js-form')
  $form.submit(function(e) { 
    $.ajax({ 
      url: $form.attr('action'), 
      data: $form.serialize(), 
      type: "POST", 
      dataType: "xml", 

      statusCode: {
        0: function() { 
          //送信に成功したときの処理 
          $form.slideUp();
          $('#js-success').slideDown();
        },
        200: function() {
          //送信に失敗したときの処理
          $form.slideUp();
          $('#js-error').slideDown();
        }
      } 
    });
    return false; 
  });

  let $submit = $('#js-submit')
  $('#js-form input, #js-form textarea').on('change', function(){
    if (
        //$('#js-form input[type="text"]').val() !== "" &&
        //$('#js-form input[type="email"]').val() !== "" &&
        $('#js-form input[name="entry.187xxxxxx"]').val() !== "" &&
        $('#js-form input[name="entry.151xxxxxx"]').val() !== "" &&
        $('#js-form input[name="entry.247xxxxxx"]').val() !== "" &&
        $('#js-form textarea[name="entry.589xxxxxx"]').val() !== "" &&
        $('#js-form input[name="entry.149xxxxxx"]').prop('checked') === true
    ) {
        //全て入力された時
        $submit.prop( 'disabled', false )
        $submit.addClass( '-active' )
        //入力されていない時
      } else {
        $submit.prop( 'disabled', true )
        $submit.removeClass( '-active' )
      }
  })
})

html（抜粋）
<main class="main">
    <section id="contact" class="contact">
        <div class="inner contact-inner">
            <div class="contact-picture">
                <h2 class="util-title wow fadeInUp">お問い合わせ</h2>
            </div>
            <form id="js-form" https
                action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdqkIW26HxNlzjEFau_34sJMqbZYzniYQhfNEaxEvxNCmDrgg/formResponse"
                class="contact-form" method="post">

                <dl class="contact-list">
                    <div class="contact-item">
                        <dt class="contact-item-title">氏名
                            <span class="contact-item-title-inline">必須</span>
                        </dt>
                        <dd class="contact-item-input">
                            <input type="text" name="entry.187xxxxxx" placeholder="氏名" required>
                        </dd>
                    </div>
                    <div class="contact-item">
                        <dt class="contact-item-title">フリガナ
                            <span class="contact-item-title-inline">必須</span>
                        </dt>
                        <dd class="contact-item-input">
                            <input type="text" name="entry.151xxxxxx" placeholder="フリガナ" required>
                        </dd>
…
…
                        </p>
                        <div class="contact-footer-submit">
                            <button id="js-submit" class="contact-submit -submit" type="submit" disabled>送信する</button>
                        </div>
                    </div>
                </dl>
            </form>

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。
●当初ローカルでは普通に回答が届いておりました。
●サーバーにアップしてから届かなくなりました
●サーバーにアップしても届かないときと届かないときがあります。
（初めての端末や時間をおいて接続したときに1回目は届いて、2回目からは届かないような気がします。時間を置いたり、ログインをし直すと届くようになるのかもしれませんが、定かではありません。ローカルは当初届いておりましたが、サーバーにアップしてから同様に届かなくなった気がします。）
●Google foemから直で送ると届きます。
●WEBサイトからはJavaScriptでGoogle foemに送っていますので、こことサーバーとの間でデータが届いていないような気がします。
●以上ですが、WEBサイトのデータの修正で解決できるのか、サーバーなどの設定で解決ができるのか、
　この方法自体が使えないのかなどどう対処すべきか教えていただきたいです。
●サーバーはXserverです。

宜しくお願い致します。

1件の回答

@fumikun 2023年06月04日に投稿

結論から言いますと、この方法は使えないと思われます。
CORSエラーが出ているのでGoogle側でhttps://docs.google.com/forms/u/0/d/e/…/formResponse 以外のページからのアクセスを制限しているようです。

エラーのざっくりとした意味としては、

http://127.0.0.1:5500からの https://docs.google.com/forms/u/0/d/e/…/formResponse へのアクセスはCORSポリシーによって禁止されています。リソースにAccess-Control-Allow-Origin ヘッダーが存在しません

という感じになります
(Access-Control-Allow-Originはorigin（元サイト）以外からのアクセスを許可する設定です)
Google側がサードパーティからのアクセスを禁止しているので連携はできないかと思われます。

独自フォームを作成する場合、基本的にバックエンドを構築する必要があります。phpでSpredSheet APIなどを使えば最終的にGoogle SpredSheetsに入るので検討されてはいかがでしょうか。
以下の記事で解説されています。
https://blog.capilano-fw.com/?p=4337#i-5

フォームのURL流出してますよ