質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

845閲覧

コンタクトファームを送信後、サンクスページへ遷移させたい。

spn

総合スコア37

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/05/12 12:43

実現したいこと

Googleフォームをサイトに埋め込みました。
送信後、Googleフォームの送信完了のページに遷移してしまうので、
コンタクトファームを送信後、送信ボタンを消し、ありがとうメッセージを出し、
自作のサンクスページへ遷移させたい。

前提

https://shogo-log.com/google-form-ajax/
を参考にし、jQueryで移動するように変更しましたが、動きません。
idもクラス名も合っています。

発生している問題・エラーメッセージ

エラーが出ています。

SameSite 属性を指定して、クロスサイトリクエストで Cookie を送信するかどうかを指定します。
Cookie の SameSite 属性が設定されていないか無効であるため、デフォルトで SameSite=Lax になり、Cookie がクロスサイトリクエストで送信されなくなります。 この動作により、ユーザー データが誤って第三者に漏洩したり、クロスサイト リクエスト フォージェリから保護されます。
この問題を解決するには、Cookie の属性を更新します。
Cookie をクロスサイト要求で送信する必要がある場合は、SameSite=None および Secure を指定します。 これにより、サードパーティによる使用が可能になります。
Cookie をクロスサイト要求で送信しない場合は、SameSite=Strict または SameSite=Lax を指定します。

該当のソースコード

index.html

1 <form 2 action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc68CwcBH9_LMtwaIP1D5I9EpSL1wGJ4mcNXl8ai9JPjEJAdA/formResponse" 3 target="_self" method="POST" id="mG61Hd" jsmodel="TOfxwf Q91hve CEkLOc" 4 data-shuffle-seed="8911685883490239039" data-response="%.@.[]]" 5 data-dlp-data="%.@.null,false,[]]" data-first-entry="0" data-last-entry="7" 6 data-is-first-page="true"> 7 8 9 <div class="contact__container "> 10 <div class="input-field"> 11 <label class=" input-label">お問い合わせ種類 12 <span class="require" aria-hidd37-en="true">必須</span><!-- /.require --> 13 </label><!-- /.contact__ttl --> 14 <div class="radio-wrap"> 15 <div class="radio-wrap_item"> 16 <input type="radio" id="company" class="radio" name="entry.305880971" checked 17 value="弊社製品について" required> 18 <label for="company">弊社製品について</label> 19 </div><!-- /.radio-wrap_item --> 20 <div class="radio-wrap_item"> 21 <input type="radio" id="strawberries" class="radio" name="entry.305880971" 22 value="いちご狩りについて" required> 23 <label for="strawberries">いちご狩りについて</label> 24 </div><!-- /.radio-wrap_item --> 25 <div class="radio-wrap_item"> 26 <input type="radio" id="ohter" class="radio" name="entry.305880971" 27 value="その他のお問い合わせ" required> 28 <label for="ohter">その他のお問い合わせ</label> 29 </div><!-- /.radio-wrap_item --> 30 </div><!-- /.radio-wrap --> 31 </div><!-- /.input-field --> 32 33 </div><!-- /.contact__container --> 34 35 <div class="contact__container"> 36 <div class="input-field"> 37 <label for="contact__name" class="input-label">お名前 38 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 39 </label><!-- /.contact__name --> 40 <input type="text" id="contact__name" name="entry.691037678" required> 41 </div><!-- /.input-feild --> 42 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">お名前を入力してください。</p> 43 <!-- /.error-text --> 44 </div><!-- /.contact__container --> 45 46 <div class="contact__container"> 47 <div class="input-field"> 48 <label for="contact__post-code" class="input-label">郵便番号</label> 49 <input type="text" id="contact__post-code" name="entry.843362794" inputmode="numeric"> 50 </div><!-- /.input-field --> 51 </div><!-- /.contact__container --> 52 53 <div class="contact__container"> 54 <div class="input-field"> 55 <label for="contact__address" class="input-label">ご住所 56 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 57 </label> 58 <input type="text" id="contact__address" name="entry.672554844" required> 59 </div><!-- /.input-field --> 60 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">ご住所を入力してください。 61 </p><!-- /.error-text --> 62 </div><!-- /.contact__container --> 63 64 <div class="contact__container"> 65 <div class="input-field"> 66 <label for="contact__email" class="input-label">メールアドレス 67 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 68 </label> 69 <input type="email" id="contact__email" name="entry.1375337957" required> 70 </div><!-- /.input-field --> 71 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true"> 72 正しい形式のメールアドレスを入力してください。</p><!-- /.error-text --> 73 </div><!-- /.contact__container --> 74 75 <div class="contact__container"> 76 <div class="input-field"> 77 <label for="contact__tel" class="input-label">電話番号 78 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 79 </label> 80 <input type="tel" id="contact__tel" name="entry.1445859162" required> 81 </div><!-- /.input-field --> 82 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">電話番号を入力してください。 83 </p><!-- /.error-text --> 84 </div><!-- /.contact__container --> 85 86 <div class="contact__container"> 87 <div class="input-field"> 88 <label for="contact__msg" class="input-label">お問い合わせ内容 89 <span class="require" aria-hidden="true">必須</span><!-- /.require --> 90 </label> 91 <textarea id="contact__msg" name="entry.2136629426" cols="30" rows="10" 92 placeholder="全て欄を埋めていただくと、送信できるようになりますのでお試しください。" required></textarea> 93 </div><!-- /.input-field --> 94 <p class="error-text" role="alert" aria-live="polite" aria-hidden="true"> 95 お問い合わせ内容を入力してください。 96 </p><!-- /.error-text --> 97 </div><!-- /.contact__container --> 98 99 <p class="end-message">お問い合わせありがとうございました</p> 100 <p class="false-message">送信失敗です</p> 101 102 <div class="btn-center"> 103 <button id="submit" class="btn btn--action" disabled>送信する</button> 104 </div> 105 </form>

thanks.html

1 2 <section id="contact" class="contact _cream-bg contact__thanks"> 3 <div class="section-inner__sm contact-inner thanks-inner"> 4 <h2 class="section__ttl section__ttl_67">お問い合わせ</h2><!-- /.section__ttl --> 5 6 <p class="thanks_txt">またのご購入、お問い合わせを<br class="blank"> 7 お待ちしております。</p><!-- /.contact_txt --> 8 9 <p class="contact-thanks">送信完了しました。<br class="blank">お問い合わせありがとうございました。</p> 10 </div><!-- /.section-inner --> 11 12 </section><!-- /.contact -->

jQuery

1 2 $(document).ready(function () { 3 4 $('#form').submit(function (event) { 5 var formData = $('#form').serialize(); 6 $.ajax({ 7 url: "https://docs.google.com/forms/u/0/d/e/1FAIpQLSc68CwcBH9_LMtwaIP1D5I9EpSL1wGJ4mcNXl8ai9JPjEJAdA/formResponse", 8 data: formData, 9 type: "POST", 10 dataType: "xml", 11 statusCode: { 12 0: function () { 13 $(".end-message").slideDown(); 14 $("#submit").fadeOut(); 15 window.location.href = "thanks.html"; 16 }, 17 200: function () { 18 $(".false-message").slideDown(); 19 } 20 } 21 }); 22 event.preventDefault(); 23 }); 24 25 }); 26

scss

1//送信後メッセージ 2.end-message { 3 display: none; 4 margin-top: 26px; 5 font-weight: bold; 6} 7 8.false-message { 9 display: none; 10 margin-top: 26px; 11 color: #F7320E; 12 font-weight: bold; 13} 14 15 16.input-field { 17 display: flex; 18 flex-direction: column; 19 20 21 label { 22 display: block; 23 flex: 1; 24 text-align: left; 25 cursor: pointer; 26 } 27 28 label:not(.radio-wrap_item label) { 29 font-weight: 700; 30 } 31 32 .radio-wrap, 33 input[type=text], 34 input[type=email], 35 input[type=tel], 36 textarea { 37 display: block; 38 width: 100%; 39 margin-top: 15px; 40 cursor: pointer; 41 } 42 43 input[type=text], 44 input[type=email], 45 input[type=tel], 46 textarea { 47 background: #EFEAE6; 48 border: 1px solid transparent; 49 font-size: 16px; 50 padding: 6px 10px; 51 border-radius: 10px; 52 } 53 54 55} 56 57 58 59

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

HTMLのidがformになっていなかったんので書き換えました。
サイトにアップ後、操作が可能になっていました。

投稿2023/05/14 11:16

spn

総合スコア37

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問