[구글표 셀프 필기] 구글표의 CSS 맞춤법

구글 폼 개술

구글 표는 구글이 무료로 제공하는 설문지 작성과 통계 도구다

구글 계정만 있으면 사용할 수 있고 브라우저에서 간단한 조작만 하면 설문조사와 접촉표를 만들 수 있다구글 표 공식

결점

브라우저에서 만든 표는 디자인에 한계가 있다

하지만 자신의 CSS를 구글 표에 적응시켜 가장 적합한 레이아웃으로 제작할 수 있다는 점도 단점이 없다.

설정 방법

HTML은 형식과 동일한 구도의 형식으로 구글 형식으로 제작되었다

구글 폼 화면에서 크롬의 검증 기능을 사용하여 구글 폼의'Action(formResponse로 끝난 URL)'과'각 input의name 값(entry.xxxx가 있는 곳, 링크를 펼치면 이해하기 쉽다)'을 얻어 HTML 폼을 삽입한다

ActionURL과 각 input의name 값은 HTML 양식 화면에 기록됩니다

위에서 이동할 수 있지만'보내기 버튼'을 누르면 구글 폼의 색스 페이지로 옮겨지기 때문에 자신이 만든 색스 페이지로 링크 주소를 변경한다.이번에는 jQuery의 ajax를 사용했습니다.만든 input 페이지에 다음 jQuery를 추가합니다.

function postToGoogle() {
//フォームの値を取得
var field1 = $('[name="entry.xxxxxxxx"]').val();
var field2 = $('[name="entry.yyyyyyyy"]').val();

$.ajax({
url: "googleフォームのactionの値",
data: {"entry.xxxxxxxx": field1,"entry.yyyyyyyy": field2
},
          type: "POST",
          dataType: "xml",
          statusCode: {
              0: function() {
                  //Success message
location.href="サンクスページのパス";
              },
              200: function() {
                  //Success Message
location.href="サンクスページのパス";
              }
          }
      });
      }

보내기 버튼에 함수 설정

<input type="button" onClick="postToGoogle()" value="送信">

후기

구글 폼의 CSS 맞춤형 방법을 잊지 않기 위해 정리했습니다.
구글 표는 전자 표와 연결되어 데이터를 쉽게 관리할 수 있기 때문에 이 방법은 손실이 없는 것 같다는 것을 기억해라