Discord 웹훅과 Essepage 를 활용한 간단한 문의폼 만들기

💡 실제로 동작하는 문의폼을 보고 싶다면?
👉 문의폼 예제 페이지 에서 직접 확인해보세요!

웹페이지에 문의폼을 추가하는 것은 단순해 보이지만, 실제로는 여러 기술적 요소가 필요합니다.

🤔 문의폼을 만들려면 무엇이 필요할까요?

먼저, 사용자가 입력한 문의 내용을 저장할 데이터베이스가 필요하거나, 이메일로 문의를 받기 위해 메일러 서비스를 설정해야 합니다. Gmail SMTP, SendGrid 같은 외부 서비스를 사용하면 비교적 간편하지만, 인증 과정과 스팸 필터링을 고려해야 하죠.

또한, 백엔드 서버도 필요합니다. 프론트엔드에서 입력된 데이터를 서버로 보내고, 이를 저장하거나 이메일로 전달하려면 Node.js, PHP 같은 기술을 사용해야 합니다. 이 과정에서 SQL 인젝션, XSS 공격을 막기 위한 보안 조치도 필수적입니다.

복잡합니다… 😵
“그냥 내 홈페이지에 문의폼 하나 추가하고 싶을 뿐인데 말이죠.”

하지만 걱정하지 마세요! 이런 복잡함과 귀찮음을 디스코드(Discord)와 Essepage 만 있으면 쉽게 해결할 수 있습니다. 😊

🎯 Essepage + Discord 웹훅을 활용한 간단한 문의폼 만들기

Essepage는 별도의 서버 설정 없이도 웹페이지를 만들 수 있는 온라인 개발툴입니다. 여기에 Discord 웹훅을 연결하면 문의 내용을 쉽게 받을 수 있습니다.

제가 미리 만들어 둔 문의폼 템플릿으로 문의폼 웹페이지를 만들어 보시면, 어떻게 만드는지 더 쉽게 이해하실 수 있을거에요.😊 아래에 템플릿을 이용한 문의폼을 만드는 방법을 소개하겠습니다.

1️⃣ 디스코드 웹훅 URL 준비하기

디스코드 웹훅은 특정 채널로 자동 메시지를 보내는 기능입니다.
웹훅 URL을 생성하는 방법은 디스코드 공식문서에서 확인할 수 있습니다.
👉 웹훅 생성하기 부분을 참고하여 원하는 채널에 웹훅을 만들어 주세요.

2️⃣ Essepage에서 문의폼 템플릿 사용하기

제가 미리 만들어 둔 문의폼 템플릿을 사용하면 더욱 간단합니다!

1. TasteBrad 문의폼 템플릿에 접속
2. 템플릿 사용하기 클릭
3. Essepage ID (URL로 사용할 ID)와 타이틀 입력 후 Essepage 만들기 버튼 클릭

이제 문의폼 페이지가 생성되었습니다! 🎉 정말 간단하죠?

3️⃣ 디스코드 웹훅 URL 연결하기

이제 만들어진 문의폼이 디스코드 채널로 메시지를 보낼 수 있도록 설정해야 합니다.

1. Essepage의 코드에디터 버튼을 눌러 에디터 화면으로 이동
2. 왼쪽 파일 트리에서 +globals.config.json 파일 선택
3. discord_webhook_url 항목에 아까 만든 디스코드 웹훅 URL을 입력하고, 저장

   {
    "discord_webhook_url": "디스코드 웹훅 URL"
   }
   

4. 상단 메뉴에서 페이지 > 모두 적용 클릭하여 적용

설정이 완료되었습니다! 🎉

✅ 문의폼 테스트하기

이제 문의폼 페이지에서 내용을 입력하고 보내기 버튼을 눌러보세요.
디스코드 채널에 문의 내용이 자동으로 전송되는 걸 확인할 수 있을 거예요!

이 방법을 사용하면 백엔드 개발 없이도 문의폼을 쉽게 추가할 수 있습니다.
Essepage 템플릿을 활용한다면 몇 분 만에 끝낼 수 있겠죠?^^ ⏳✨

궁금한 점이 있다면 댓글로 남겨주세요! 😊