Google 양식 맞춤설정으로 비동기 전송 [Ajax]

15069 단어 HTML googleform 아약스 jQuery

정적 사이트의 폼 구현 문제는 지금까지 수많은 뛰어난 웹 제작자들을 괴롭혀 온 문제 중 하나다.

방법은 다양하지만 솔직히 PHP 파일을 만지고 싶지 않아 ... 서버는 가지고 다른 것입니다.

이번 취재반은 ついにそのベストプラクティスを発見することに成功した。
전제 조건

jQuery 사용

상당히 억지로 (법인 사이트보다 설문지 방향)

목표: Google 설문지에서 정적 사이트의 설문지 이동

이 기사를 읽고 할 수 있게 되는 것

Google 양식과의 연결

송신 완료 후,이 페이지에 「문의 해 주셔서 감사합니다」라는 메시지를 낼 수있다

썬크스 페이지로 전환 할 수 있습니다

Google 양식 만들기

우선은 Google 양식을 작성한다.

HTML 폼으로 만들 예정의 것과 당연히 같은 것을 만듭니다.

input,textarea의 name의 값, form의 action처의 URL를 메모한다

Chrome의 유효성 검사 기능으로 검색합니다.

라디오 버튼만, 각 요소의 뒤에 마지막에 1개만 input가 있으므로 거기만 메모합니다.

여기가 양식을 제출합니다.

HTML 양식 작성


<div class="form-wrapper">
    <form
      action="https://docs.google.com/forms/u/0/d/e/hoge"
      id="form">
      <div class="box">
        <label for="name">お名前</label>
        <input type="text" name="entry.396652" id="name" placeholder="お名前" required>
      </div>
      <div class="box">
        <label for="mail">メールアドレス</label>
        <input type="mail" name="entry.1934980" id="mail" placeholder="メールアドレス" required>
      </div>
      <div class="box">
        <p class="box">お好きなプログラミング言語</p>
        <div class="flex-box"><input type="radio" name="entry.1977612" required value="scala">
          <p>scala</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.1977612" required value="kotlin">
          <p>kotlin</p>
        </div>
        <div class="flex-box"><input type="radio" name="entry.1977612" required value="basic">
          <p>basic</p>
        </div>

      </div>
      <div class="box">
        <textarea name="entry.181178" id="" cols="30" rows="10" placeholder="自由記述"></textarea><!-- /# -->
      </div>
      <input type="submit" class="submit-btn">
    </form>
    <p class="end-message">お問い合わせありがとうございました</p>
    <p class="false-message">送信失敗です</p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

여기에서 google 양식과 동일한 내용의 HTML 양식을 만들고 name과 action의 값을 맞춥니다.

form 태그에 id="form"→form내의 input의 value를 취득하기 위해 id 지정(이름은 임의)

jQuery로드 → Ajax 사용을 위해

이 근처는 나중에 필요하게 되기 때문에, 기술해 둡니다.

제출해보기

제출하면 ...

오, 받을 수 있습니다! !
그리고 여기서 감동해도 좋지만,いきなりこんなページに飛ばされるのは、ユーザビリティ的に問題があります。여기에서 ajax 구현으로, 이 화면으로 천이하지 않게 손을 더해 갑시다.

문의 완료 메시지를 낸다.

$(document).ready(function () {

      $('#form').submit(function (event) {
        var formData = $('#form').serialize();
        $.ajax({
          url: "https://docs.google.com/forms/u/0/d/e/hoge",
          data: formData,
          type: "POST",
          dataType: "xml",
          statusCode: {
            0: function () {
              $(".end-message").slideDown();
              $(".submit-btn").fadeOut();
              //window.location.href = "thanks.html";
            },
            200: function () {
              $(".false-message").slideDown();
            }
          }
        });
        event.preventDefault();
      });

    });

우선 serializeでform内のinputのvalueを取り出しgormDataに代入그 후 urlにgoogleフォーム送信先(action)のurl記入그리고 jQueryのメソッドで送信後「完了メッセージ表示」마지막으로 event.preventDefault 에서 submit 이벤트를 무효화하고 천이시키지 않는다
라는 흐름.

전송 후 완료 메시지를 slideDown으로 표시할 수 있습니다.

さりげに送信後submit-btnをfadeOutさせているところに、気配りを感じますよね？（二重投票防止）

비동기에서도 데이터를 받을 수 있습니다. 뭔가 감동...

썬크스 페이지 전환

이쪽은 순간입니다.


statusCode: {
            0: function () {
              //$(".end-message").slideDown();
              //$(".submit-btn").fadeOut();
              window.location.href = "thanks.html";
            },