Hugo 웹사이트에서 Google 폼 제출하기

가끔은 hugo 기반 웹사이트에 폼 제출 기능을 추가해야 할 때가 있습니다.

Page content

매주 두 번째 금요일은 아니지만, 여전히… 우리는 두 가지 주요 접근 방식을 가지고 있습니다.

‘배달원이 우편을 전달하는 모습’

폼 제출 서비스에 대한 일반적인 옵션

  1. 웹 폼 제출 서비스를 사용하는 방법입니다. 예를 들어, https://getform.io ($15.83/월, Start 플랜) 또는 https://kwesforms.com (19/월), 또는 https://form-data.com ($10/1,000 제출)과 같은 서비스가 있습니다. 무료로 월 100회 제출이 가능한 대안도 존재합니다. 하지만 여전히 스팸으로부터 자신을 보호해야 합니다. 귀찮은 reCaptcha를 보시겠죠.

  2. 구글 폼을 사용하는 방법입니다. 간단하고 편리합니다.

구글 폼으로부터 폼을 제출하는 방법에 대한 단계 목록은 다음과 같습니다. 하우고 웹사이트에서 구글 폼으로 폼 제출.

구글에서 폼 설정

구글 폼 설정 페이지로 이동하세요: https://docs.google.com/forms/u/0/

“연락처 이메일”, “이름”, “메시지"와 같은 필드를 포함한 웹 폼을 생성하세요.

하우고 생성 웹사이트에서 구글 폼 제출을 위한 구글 폼 설정

화면 오른쪽 상단에 세로로 배치된 세 개의 점이 있는 원형 버튼이 있습니다. Embed HTML을 복사하세요. 다음과 유사한 형태가 나와야 합니다:

<iframe src="https://docs.google.com/forms/d/e/qwesomenumbersandlettersqwe/viewform?embedded=true"
width="640" height="1142" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

구글 폼 컨텍스트 메뉴

하우고 웹사이트 설정

rawhtml

rawhtml shortcode가 있는지 확인하세요.

파일 layouts/shortcodes/rawhtml.html에 다음과 같은 코드가 있어야 합니다.

<!-- raw html -->
{{ .Inner }}

연락처 페이지 생성

어떤 페이지에도 추가할 수 있지만, 먼저 contuct-us 페이지에서 시도해 보겠습니다.

hugo new contact-us.md

이 페이지의 끝에 구글에서 복사한 embedded HTML을 추가하세요.

하우고 웹사이트에서 rawhtml

하우고 웹사이트의 연락처 페이지 테스트

로컬에서 하우고 웹사이트를 테스트하려면:

hugo server -D

하우고가 다음과 같은 메시지를 표시한 후:

Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

http://localhost:1313/contact-us로 이동하여 폼 제출이 작동하는지 확인하세요.

대체 텍스트

제출자당 1회 제출 제한이 있는 폼 설정도 있습니다. 이 설정은 구글 로그인을 요구합니다. 이 설정은 기본적으로 활성화되어 있습니다.

따라서 이 설정을 비활성화하는 것이 좋습니다.

구글 폼 또는 스프레드시트에서 제출된 폼 데이터 확인

제출 버튼을 클릭한 후 구글 폼으로 이동하세요.

제출된 세부 정보를 확인할 수 있습니다.

대체 텍스트

또는 구글 스프레드시트에서:

대체 텍스트

저의 웹사이트에 있는 연락처 페이지는 정확히 이 방법을 사용하고 있습니다.

유용한 링크