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/.../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です。
宜しくお願い致します。