FabForm을 사용하여 정적 웹사이트에 양식 추가

전제 조건

데모

정적 사이트 만들기

npm create-next-app best-language

npm install [email protected]

변경 사항을 보려면 로컬 서버를 실행하십시오.

npm run dev

브라우저를 열고 http://localhost:3000/로 이동합니다.

모형 양식을 설정한 후 https://fabform.io/으로 이동하여 계정을 만들고 아래 단계에 따라 양식에서 데이터를 수집합니다.

FabForm 사용

무료 계정을 만든 후 https://app.fabform.io/forms으로 이동하여 양식의 끝점을 만듭니다.

엔드포인트가 생성되면 모든 엔드포인트가 나열되는 https://app.fabform.io/forms으로 리디렉션됩니다.

엔드포인트를 수정하려면 엔드포인트를 클릭하고 페이지 오른쪽에 있는 설정 아이콘을 클릭하세요.

모든 응답에 대해 알림을 받을 대상 이메일을 입력하십시오. Google 시트에서 응답을 받아야 하는 경우 엔드포인트 설정에서 시트 ID를 추가할 수 있습니다.

Note: Add [email protected] as an editor to the google sheet document linked.

필요한 세부정보를 모두 추가한 후 저장을 클릭하세요.

마지막 단계는 작업 속성을 양식에 추가하는 것입니다.

<form
  id='contactForm'
  action='https://fabform.io/f/{form_id}'
  method='post'
>
</form>

{form_id}를 엔드포인트 ID로 바꿉니다.

데모에서는 내 엔드포인트 ID를 다음 형식으로 보여주고 사용하겠습니다.

지금 개발 서버를 실행하여 양식을 테스트하십시오. 제출 후 변경 사항이 있는지 Google 시트 문서를 확인하세요.

다음과 같이 Google 시트의 응답이 업데이트됩니다.

결론

이 게시물은 FabForm을 사용하여 더 적은 구성으로 정적 웹 애플리케이션의 양식에 기능을 추가하는 방법을 보여줍니다.