google 양식을 자유롭게 디자인하기 위해.

하고 싶었던 일

간단한 LP
아빠와 뭔가 만들고 싶었지만,
php를 사용하거나 rails로 만들거나 wordpress로 만들거나
경우에 따라 오버 스펙이 될 수 있습니다.
쉽게 빨리 만들 수 있는 방법을 찾고 있었다.

google 양식

이번에 찾은 것은 google 양식이다.
google 폼이라고 검색하면 맨 위에 나오는 녀석.
goggle의 계정 가지고 있으면 누구라도 곧 간단하게 폼을 만들 수 버린다.

실제로 만들어 보았다.

보기 어려울지도 모르지만 어딘가 느낌.
textfield라든지 textarea라든지 radio라든지 checkbox라든지 대체로 만들 수 있다.

막상, 내장

이것으로 아빠와 폼을 만들 수 있었기 때문에 (약 2 분 정도) 자신의 짜 html에 박고 싶다.
살펴보면 google 양식 페이지의 오른쪽 상단에 있습니다.

이 송신 버튼을 누르면

이런 느낌의 화면이 나오고 <>를 누르면 임베딩용으로 iframe 태그가 생성된다.
이것을 복사하여 자신이 작성하고 있는 html에 복사하면 이미 임베드 완료입니다!

디자인

신경이 쓰이는 것은 디자인이군요~.
디자인은 google 양식에서 가볍게 할 수있는 것 같습니다.

또한 오른쪽 상단의 팔레트 버튼을 누르면 옆에 메뉴가 나옵니다.
헤더의 이미지이거나 테마의 색감을 좋은 느낌으로 설정할 수 있습니다.

아직도! !

라는 것으로 google 폼 할 수 있었고, 임베드하고 디자인도 조정했고 만족!
라는 쪽은 이 이후는 읽지 않아도 괜찮습니다.
여기에서는 더 자신의 사이트에 익숙해지도록 디자인하고 싶다든가,
여기의 여백 1px 늘리고 싶다-라고 생각하는 분만 봐 주세요!

현재 상태

현재라고 iframe으로 묻어 있기 때문에 css라든지 엉망이지요. . .
그래서 iframe을 제거하고 특수한 방법으로 구현합니다!

먼저 form 태그를 만듭니다.

<form>
  <input type="text" name="">
  <div>
    <input type="radio" name="" value="">
    <input type="radio" name="" value="">
  </div>
</form>

이런 식으로.

페이지 소스에서 가져오기

google 양식으로 돌아가기
또 오른쪽 상단의 송신으로부터 이번은 중간의 클립 마크를 눌러 봐 주세요.

그러면 양식 URL이 타고 있습니다.

해당 페이지에 액세스하고 마우스 오른쪽 버튼을 클릭하여 페이지 소스 표시를 선택하면
굉장히 문자가 나온다고 생각합니다.
그런 다음 해당 페이지에서 "form action=""라고 검색합니다.
mac라면 커맨드 +F로.

그러면 form="이 히트하므로 action=""의 내용을 전부 복사해
방금 만든 HTML의 form 태그의 action에 복사한 내용을 붙여 넣습니다.

또한 페이지 소스로 돌아갑니다.
textfield,radio 버튼의 input 태그의 name 속성을 찾고 싶습니다.
여기는 할애하겠습니다. .
input name="entry.34234"같은 것이 설정되어 있을 것이므로
name 속성의 내용을 복사하여 방금 만든 input 태그에 붙여넣습니다.

textfield에 관해서는 name 속성을 copipe 해 끝입니다만,
radio 버튼, checkbox 버튼에 관해서는
value의 값을 google 양식에서 설정한 값과 일치시키지 않으면 답변이 반영되지 않는 것 같습니다.

끝

그래서 간단한 양식을 만들 수있었습니다!
그리고는 자신이 좋아하는 것처럼 디자인해 주셨으면 합니다!
마지막 달리기가 되어 버렸습니다만, 이상입니다.

덤

디자인과는 관계없지만, 실은 google 폼을 스프레드시트와 연동시킬 수 있는 것 같습니다↓↓
htps : // 이 m/wt 돈/있어 ms/15874f01d75599f8d8에3