초간단 HTML, 웹페이지에 구글 설문지를 추가해보자

안녕하세요

오늘은 웹페이지에 구글 설문지를 추가해봅시다

원래는 JS 이용해서 이메일로 자동으로 보내주는게 아주 전통적인 방법이지만 좋은 방법 놔두고 그럴 필요가..?

일단 연결 하려면 구글 폼이 필요합니다

https://www.google.com/intl/ko_kr/forms/about/

Google Docs

Google Docs. 좋아하는 사람 55,999명 · 이야기하고 있는 사람들 198명. News and updates about Google Docs, Sheets, Slides, Sites, Forms, and more!

www.facebook.com

아래 가서 하나 만들어보세요

구글 폼을 연결하면 구글 폼에 자동으로 설문 결과가 집계되기 때문에 의외로 편리한 사용이 가능합니다

여튼 가서 [ 새 양식 시작하기 ] -> 아무거나 하나 만들어줍니다

저는 행사 참석 여부 눌러보죠

자동으로 설문지 폼을 하나 주는데 원하시면 수정을 하신 다음 [ 보내기 ] 를 누릅니다

기본적으로 접속하면 설문지 이메일 전송 창이 뜨는데

여기서 < > 생긴거 눌러줍니다

그러면 이런게 뜨는데 너비랑 높이는 나중에 조절할 수 있으니 [복사] 눌러줍니다

[ 이건 제 코드입니다 - 이걸 복붙하는게 아니라 위에 있는 발급받은 고유 코드를 복붙하는 거에요 ]

그러면 뭔지 몰라도 <iframe> 이라는 객체에 들어있는 코드가 생깁니다

( 저거 복붙하라는게 아니라 발급받으신 고유한 코드를 복붙하세요 )

대충 html:5 tab 쳐서 테스트 페이지를 만들고

타이틀 바꾸고 싶으시면 바꾸고 ( 원래 정해져 있으면 바꾸지 마세요 )

원하는 위치에 놓고 <body> 태그 안에 붙여줍니다

[제 코드]

<!DOCTYPE html>

<head>

</head>

<body>

FAIpQLSdEsMM-BfcWXF6sOAXtRhkDerah0STYxktoXNN4Vn7I7BIkyg/viewform?embedded=true" width="640" height="1086" frameborder="0" marginheight="0" marginwidth="0">로드 중…</iframe>

</body>

</html>

잘 모르시겠으면 일단 해보시면 됩니다

[ 템플릿 코드 ]

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

이거에다 https 어쩌고 복사해서 때려넣으면 대충 맞습니다

난 저기에 스타일을 넣어볼래 하면 <div 감싸고 클래스에 하나 집어넣으시면 됩니다 >

<!DOCTYPE html>

<head>

</head>

<style>

.code1 {

font-size: 12pt;

font-family: Arial, Helvetica, sans-serif;

}

</style>

<body>

</div>

</body>

</html>

이걸 이제 저장한 다음에 live 서버로 여시거나 배포를 하면 됩니다

짜란 설문지가 하나 들어갔죠?

이게 답니다 ( 저거 설정은 구글 설문지에서 바꾸면 됩니다 )

네트리파이에 하나 올려둘건데 궁금하시면 들어가보세요

https://dapper-marshmallow-6a5a19.netlify.app/

테스트 페이지 입니다!

dapper-marshmallow-6a5a19.netlify.app

물론 집어넣은게 설문지 뿐이기에 그게 다거든요

저작자표시 비영리 변경금지

'행복해.. 아마도?' 카테고리의 다른 글

원신에서 온 여행자를 위한 유튜브 프리미엄 쿠폰 수령기! (0)	2022.12.16

작은 별의 블로그

초간단 HTML, 웹페이지에 구글 설문지를 추가해보자

'행복해.. 아마도?' 카테고리의 다른 글

티스토리툴바

초간단 HTML, 웹페이지에 구글 설문지를 추가해보자

'행복해.. 아마도?' 카테고리의 다른 글

관련글

티스토리툴바