Google Form을 사이트에 삽입하여 Ajax에서 자체 제작 썬크스 페이지 표시
12120 단어 googleform아약스
하고 싶은 일
Google Form을 내 웹사이트에 삽입하고,
웹 사이트의 Submit 버튼을 누르면 Google Form에 Ajax로 입력 데이터를 전송하고,
그 콜백으로 자작한 썬크스 페이지로 리디렉션시킵니다.
배경
Google Form을 웹사이트에 삽입하여 사용하면,
보통이라면 아래와 같은 Google Form의 완료 페이지가 표시됩니다.
이것을 자작의 썬크스 페이지로 하는 방법은 이하에 기재합니다.
절차 1. Google Form 준비
Qiita 투고용으로 준비해 보았습니다.
htps : // / cs. 오, ぇ. 코 m/후 rms/d/에/1 후 pQLSf후 WYVf88지 p네후 XJdGf우 rMWL베z3yBm9b나 4wCt5d가/ゔぃ에w후rm
순서 2. HTML 작성
(1) 상기 Google Form의 각 입력 항목의 name 속성을 메모
(2) 자신의 사이트에 포함
(1)에서 메모한 각 name 속성을 그대로 사용합니다.
sample.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Formテスト</title>
</head>
<body>
<form action="https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/formResponse">
<input id="name" type="text" name="entry.1777069002" />
<input id="nameKana" type="text" name="entry.974250288" />
<input id="marriage" type="hidden" name="entry.1776684468" value="愛" />
<input id="submitBtn" type="submit" value="送信">
</form>
</body>
</html>
(3) 동작 확인
이 시점이면 완료 페이지는 여전히 Google Form의 페이지입니다.
위의 송신 버튼을 누르면 다음 화면이 표시됩니다.
Google Form의 RESPONSES 탭의 상황보다 제대로 데이터가 전송되고 있는지 확인.
(4) Ajax 스크립트를 방금 HTML에 통합
sample.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Formテスト</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#googleform").submit(function (event) {
var name = $("#name").val();
var nameKana = $("#nameKana").val();
var marriage = $("#marriage").val();
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/formResponse",
data: {"entry.1777069002": name, "entry.974250288": nameKana, "entry.1776684468": marriage},
type: "POST",
dataType: "xml",
statusCode: {
0: function() {
window.location.href="https://google.com"
},
200: function() {
alert("errorMsg")
}
}
})
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="googleform">
<form>
<input id="name" type="text" name="entry.1777069002" />
<input id="nameKana" type="text" name="entry.974250288" />
<input id="marriage" type="hidden" name="entry.1776684468" value="ルックス" />
<input id="submitBtn" type="submit" value="送信">
</form>
</div>
</body>
</html>
주의점으로서 아래와 같이 「Cross-Origin Read Blocking (CORB)」가 발생합니다만,
HTTP 상태 코드에 0이 반환되므로 statusCode가 0의 function로 들어갑니다.
하지만 Google 양식 데이터가 제대로 전송되었으므로 기능 관점에서 문제가 없는 것 같습니다.
또, 이번은 샘플이므로 일시적으로 Google 톱 페이지로 천이했습니다. (※본래는 자작 썬크스 페이지입니다)
(5) 최종 동작 확인
제출 버튼을 누르면 아래와 같이 Google 톱 페이지로 화면이 전환됩니다.
만약을 위해, Google Form에 송신된 데이터도 확인한다.
이상, 끝.
Reference
이 문제에 관하여(Google Form을 사이트에 삽입하여 Ajax에서 자체 제작 썬크스 페이지 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/taichikanaya_1989/items/5d26179013c57e866312
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Google Form을 웹사이트에 삽입하여 사용하면,
보통이라면 아래와 같은 Google Form의 완료 페이지가 표시됩니다.
이것을 자작의 썬크스 페이지로 하는 방법은 이하에 기재합니다.
절차 1. Google Form 준비
Qiita 투고용으로 준비해 보았습니다.
htps : // / cs. 오, ぇ. 코 m/후 rms/d/에/1 후 pQLSf후 WYVf88지 p네후 XJdGf우 rMWL베z3yBm9b나 4wCt5d가/ゔぃ에w후rm
순서 2. HTML 작성
(1) 상기 Google Form의 각 입력 항목의 name 속성을 메모
(2) 자신의 사이트에 포함
(1)에서 메모한 각 name 속성을 그대로 사용합니다.
sample.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Formテスト</title>
</head>
<body>
<form action="https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/formResponse">
<input id="name" type="text" name="entry.1777069002" />
<input id="nameKana" type="text" name="entry.974250288" />
<input id="marriage" type="hidden" name="entry.1776684468" value="愛" />
<input id="submitBtn" type="submit" value="送信">
</form>
</body>
</html>
(3) 동작 확인
이 시점이면 완료 페이지는 여전히 Google Form의 페이지입니다.
위의 송신 버튼을 누르면 다음 화면이 표시됩니다.
Google Form의 RESPONSES 탭의 상황보다 제대로 데이터가 전송되고 있는지 확인.
(4) Ajax 스크립트를 방금 HTML에 통합
sample.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Formテスト</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#googleform").submit(function (event) {
var name = $("#name").val();
var nameKana = $("#nameKana").val();
var marriage = $("#marriage").val();
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/formResponse",
data: {"entry.1777069002": name, "entry.974250288": nameKana, "entry.1776684468": marriage},
type: "POST",
dataType: "xml",
statusCode: {
0: function() {
window.location.href="https://google.com"
},
200: function() {
alert("errorMsg")
}
}
})
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="googleform">
<form>
<input id="name" type="text" name="entry.1777069002" />
<input id="nameKana" type="text" name="entry.974250288" />
<input id="marriage" type="hidden" name="entry.1776684468" value="ルックス" />
<input id="submitBtn" type="submit" value="送信">
</form>
</div>
</body>
</html>
주의점으로서 아래와 같이 「Cross-Origin Read Blocking (CORB)」가 발생합니다만,
HTTP 상태 코드에 0이 반환되므로 statusCode가 0의 function로 들어갑니다.
하지만 Google 양식 데이터가 제대로 전송되었으므로 기능 관점에서 문제가 없는 것 같습니다.
또, 이번은 샘플이므로 일시적으로 Google 톱 페이지로 천이했습니다. (※본래는 자작 썬크스 페이지입니다)
(5) 최종 동작 확인
제출 버튼을 누르면 아래와 같이 Google 톱 페이지로 화면이 전환됩니다.
만약을 위해, Google Form에 송신된 데이터도 확인한다.
이상, 끝.
Reference
이 문제에 관하여(Google Form을 사이트에 삽입하여 Ajax에서 자체 제작 썬크스 페이지 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/taichikanaya_1989/items/5d26179013c57e866312
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
(1) 상기 Google Form의 각 입력 항목의 name 속성을 메모
(2) 자신의 사이트에 포함
(1)에서 메모한 각 name 속성을 그대로 사용합니다.
sample.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Formテスト</title>
</head>
<body>
<form action="https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/formResponse">
<input id="name" type="text" name="entry.1777069002" />
<input id="nameKana" type="text" name="entry.974250288" />
<input id="marriage" type="hidden" name="entry.1776684468" value="愛" />
<input id="submitBtn" type="submit" value="送信">
</form>
</body>
</html>
(3) 동작 확인
이 시점이면 완료 페이지는 여전히 Google Form의 페이지입니다.
위의 송신 버튼을 누르면 다음 화면이 표시됩니다.
Google Form의 RESPONSES 탭의 상황보다 제대로 데이터가 전송되고 있는지 확인.
(4) Ajax 스크립트를 방금 HTML에 통합
sample.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google Formテスト</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#googleform").submit(function (event) {
var name = $("#name").val();
var nameKana = $("#nameKana").val();
var marriage = $("#marriage").val();
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSfhUWYVf88ZipnEfoiXJdGfwIrMWLbez3yBm9bka4wCt5d-gA/formResponse",
data: {"entry.1777069002": name, "entry.974250288": nameKana, "entry.1776684468": marriage},
type: "POST",
dataType: "xml",
statusCode: {
0: function() {
window.location.href="https://google.com"
},
200: function() {
alert("errorMsg")
}
}
})
event.preventDefault();
});
});
</script>
</head>
<body>
<div id="googleform">
<form>
<input id="name" type="text" name="entry.1777069002" />
<input id="nameKana" type="text" name="entry.974250288" />
<input id="marriage" type="hidden" name="entry.1776684468" value="ルックス" />
<input id="submitBtn" type="submit" value="送信">
</form>
</div>
</body>
</html>
주의점으로서 아래와 같이 「Cross-Origin Read Blocking (CORB)」가 발생합니다만,
HTTP 상태 코드에 0이 반환되므로
statusCode가 0의 function로 들어갑니다.하지만 Google 양식 데이터가 제대로 전송되었으므로 기능 관점에서 문제가 없는 것 같습니다.
또, 이번은 샘플이므로 일시적으로 Google 톱 페이지로 천이했습니다. (※본래는 자작 썬크스 페이지입니다)
(5) 최종 동작 확인
제출 버튼을 누르면 아래와 같이 Google 톱 페이지로 화면이 전환됩니다.
만약을 위해, Google Form에 송신된 데이터도 확인한다.
이상, 끝.
Reference
이 문제에 관하여(Google Form을 사이트에 삽입하여 Ajax에서 자체 제작 썬크스 페이지 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/taichikanaya_1989/items/5d26179013c57e866312텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
