Jamstack 사이트에 문의 양식 추가하기

나는 최근에 내 블로그에 '연락처' 양식을 추가하여 방문자가 내 이메일을 명시적으로 제공하지 않고도 쉽게 연락할 수 있도록 하고 싶었습니다. Tally.so 으로 내 정적 사이트에 대한 완벽한 솔루션을 찾았습니다.

연락처 양식, 이메일 가입 또는 기타 항목을 추가하고 싶을 수도 있습니다. 이 블로그 게시물이 도움이 될 것입니다. Bio page에서 내 양식을 확인할 수 있습니다.

하지만 저를 놀라게 한 것은 Google Forms, Basin, HubSpot, FormStack 등 선택할 수 있는 양식 서비스가 엄청나게 많다는 것입니다. 양식 서비스로 Tally.so을 선택했습니다. 그 이유와 직접 시작할 수 있는 방법을 알려드리겠습니다.

Tally.so와 함께한 이유

Tally.so를 선택한 이유는 무엇입니까? 양식 서비스에서 원하는 모든 기능 상자를 선택했습니다.

프리 티어(Tally에는 넉넉한 프리 티어가 있음)

내 프로젝트에 추가할 패키지가 없음

reCaptcha를 사용한 스팸 보호(중요)

이메일 알림

심플

Tally는 모든 상자를 선택했습니다. 가입하기 전에 양식을 만들 수도 있습니다!

Tally.so에서 양식 만들기

Tally의 양식 작성기는 해당 앱에 익숙하다면 Notion.so와 매우 유사하게 작동합니다. 양식 작성기 내에서 슬래시 '/' 키를 누르고 원하는 요소의 이름을 입력하기 시작하고 찾은 다음 'Enter'를 누르면 생성됩니다. 짧은 답변, 이메일, 전화번호, 링크, reCaptchas, 직관적인 양식 빌더로 모든 것을 추가하세요.



양식이 원하는 방식으로 표시되면 양식을 게시할 차례입니다. 페이지 상단에서 게시 버튼을 찾으면 계정을 만들도록 안내합니다.

사이트에 양식 추가

이제 양식이 있으므로 사이트에 추가하려고 합니다. 이는 양식을 저장하려는 사이트에 HTML 스니펫을 추가하는 것을 의미합니다. 양식에 대한 코드를 얻으려면 다음 단계를 따르십시오.

https://tally.so/dashboard에서 양식을 찾아 클릭합니다

양식 내 공유 탭으로 이동합니다

.

포함된 양식 섹션으로 이동하여 내 페이지에 표시될 표준 양식을 원했습니다

.

여기에서 양식이 표시되는 방식을 일부 편집할 수 있습니다. 원하는대로 변경하지만 여기 안에는 사이트에 추가하려는 HTML이 있는 코드 가져오기 버튼이 있습니다.

코드가 있으므로 이제 양식을 원하는 곳에 붙여넣으십시오. 이것은 Jamstack 사이트, 클라이언트 측 렌더링, 서버 측 렌더링에서 작동합니다. 사이트에 양식을 가져오는 것은 그만큼 쉽습니다. 내 mdx 파일에 내 것을 추가했습니다!

<div>
  <iframe
    src="https://tally.so/embed/nrNl2n?alignLeft=1&hideTitle=1&transparentBackground=1"
    width="100%"
    height="525"
    frameBorder="0"
    marginHeight="0"
    marginWidth="0"
    title="Contact Me">
  </iframe>
</div>

제출물 보기

제출물을 보려면 양식의 제출물 탭으로 이동하세요. 여기에서 입력된 모든 제출 및 데이터를 볼 수 있습니다. 원하는 대로 구성할 수 있으며 부분적으로 채워진 양식도 볼 수 있습니다.

내가 직접 설정한 한 가지는 이메일 알림이었습니다. 설정 화면에서 이메일 알림을 켤 수 있습니다. 이제 새로운 제출이 있을 때마다 즉시 알려드립니다. 통합을 탐색하여 알림을 받는 다른 방법도 볼 수 있습니다.

마무리 노트

솔직히 내 양식을 작성하고 내 페이지에 가져오는 것보다 찾는 데 더 많은 시간이 걸렸다고 생각합니다Tally.so. 그러나 연구는 성과를 거두었습니다. 사용하기 쉬운 양식이 있고 무료이며 스팸 방지 기능이 있고 새 제출에 대해 알려줍니다. 그냥 작동합니다! 사이트에 양식을 추가해 보세요.