커스텀 백엔드 없이 Webflow 폼 제출을 처리하는 방법

Webflow 문의 폼은 기본 디자인만으로도 충분히 멋있어 보이지만, Webflow는 제출된 데이터를 이메일로 전달하는 것 외에는 별도로 데이터베이스에 저장하거나 CRM에 연동하거나 커스텀 로직을 실행하는 기능을 제공하지 않아요. 단순한 이메일 알림 이상의 기능이 필요하다면, 폼 제출 데이터를 외부 서비스를 통해 처리해야 해요. 다행히 백엔드 코드를 한 줄도 작성하지 않고도 이 문제를 해결할 수 있어요.

Webflow 기본 기능 살펴보기

Webflow의 기본 폼 핸들러는 세 가지 기능을 제공해요. 사이트 소유자에게 이메일 알림을 보내고, 제출 완료 메시지를 표시하고, 유료 플랜에서는 Webflow 대시보드에 제출 내역을 기록해요. 소규모 사이트의 기본 문의 폼에는 충분하지만, 다음과 같은 기능이 필요한 경우에는 금방 한계에 부딪혀요.

• 폼을 작성한 사람에게 자동 응답 이메일 발송
• 특정 팀 받은편지함이나 CRM으로 제출 데이터 전달
• 조건부 로직 (예: 관심 제품에 따라 리드 라우팅)
• Webflow 기본 허니팟을 넘어서는 스팸 필터링
• 타임스탬프와 재시도 기능을 갖춘 안정적인 전송 기록

이 기능들은 기본적으로 제공되지 않아요. 외부 레이어가 필요하고, 현실적으로 추가할 수 있는 방법은 세 가지예요.

네이티브 연동 - Zapier와 Make

Webflow는 Zapier 와 Make(구 Integromat)와 직접 연동을 지원해요. 새로운 폼 제출이 들어오면 트리거가 실행되고, Google Sheets에 행 추가, HubSpot 연락처 생성, Slack 메시지 전송 등 원하는 액션을 연결할 수 있어요.

디자이너들이 가장 먼저 선택하는 노코드 방식이에요. 설정 방법은 다음과 같아요.

1. Webflow에서 프로젝트 설정 > 연동 으로 이동해 Zapier 계정을 연결해요.
2. Zapier에서 Webflow - New Form Submission 을 트리거로 설정해 새 Zap을 만들어요.
3. 이름으로 특정 폼을 선택해요.
4. 액션 단계를 추가해요 (Gmail, Slack, Airtable 등).
5. 실제 제출로 테스트하고 Zap을 활성화해요.

Make는 복잡한 워크플로에서 더 저렴하지만, 두 플랫폼 모두 의존성이 생겨요. Zapier나 Make가 다운되거나 계정 한도에 도달하면 제출 데이터가 조용히 실패하거나 대기열에 쌓여요.

Webflow Webhook 활용하기

Webflow webhook은 더 직접적인 방법이에요. 폼이 제출될 때마다 Webflow가 지정한 URL로 HTTP POST 요청을 보내요. 수신 endpoint를 직접 제어하므로 payload로 원하는 모든 작업을 할 수 있어요.

설정 방법은 다음과 같아요.

1. Webflow에서 프로젝트 설정 > 연동 > Webhooks 로 이동해요.
2. Webhook 추가 를 클릭하고 Form Submission 트리거를 선택해요.
3. 수신 서비스의 endpoint URL을 붙여넣어요.
4. 저장하고 실제 제출로 테스트해요.

Webflow가 전송하는 payload는 모든 필드 값, 폼 이름, 사이트 메타데이터를 담은 JSON 객체예요. 일반적인 payload는 다음과 같아요.

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

문제는 webhook을 수신할 무언가가 필요하다는 점이에요. 소규모 Cloudflare Worker , Pipedream 워크플로, 또는 전용 폼 백엔드 등이 선택지예요. 직접 수신기를 작성하는 것은 이 글에서 피하려는 "커스텀 백엔드" 문제 그 자체예요. 바로 이 지점에서 폼-이메일 서비스가 가장 깔끔한 해결책이 돼요.

폼 endpoint를 외부 서비스로 교체하기

Webflow의 폼 핸들러를 아예 사용하지 않고, 폼의 action 속성을 서드파티 폼 서비스로 직접 지정할 수 있어요. 서비스가 POST 요청을 받아 유효성 검사, 스팸 필터링을 처리하고 결과를 이메일로 전송해요. 별도의 백엔드가 필요 없어요.

Webflow에서의 워크플로는 다음과 같아요.

1. Webflow 디자이너에서 폼 요소를 선택해요.
2. 폼 설정 패널에서 Action 필드에 폼 서비스 endpoint URL을 입력해요 (예: https://sendform.net/!your-form-id ).
3. Method 를 POST 로 설정해요.
4. 각 입력 필드에 name 속성이 있는지 확인해요 - Webflow는 기본적으로 이를 설정해요.
5. 사이트를 게시하고 제출을 테스트해요.

이 방법은 Webflow의 폼 핸들러를 완전히 우회해요. 제출 데이터가 방문자의 브라우저에서 폼 서비스로 직접 전송돼요. 이메일은 받고, 재시도 및 스팸 처리는 서비스가 담당하며, Webflow는 UI 레이어 역할만 해요.

이 방식은 정적 사이트나 노코드 사이트 어디서든 동일하게 적용돼요. GitHub Pages나 Cloudflare Pages에 호스팅 중이라면, 문의 폼이 작동하는 무료 정적 웹사이트 호스팅 글에서 동일한 방법을 다루고 있어요.

Sendform vs. 다른 서비스 비교

Webflow와 연동되는 폼 서비스는 여러 가지예요. 문의 폼 설정에서 실제로 중요한 항목들을 기준으로 주요 서비스를 비교해 봤어요.

Sendform이 표에 담기 어려운 구체적인 이유들로 눈에 띄는 점이 있어요.

• 마찰 없는 설정: 계정을 먼저 만들지 않아도 폼 endpoint URL을 바로 받을 수 있어요. Webflow의 Action 필드에 붙여넣으면 끝이에요.
• 기본적으로 제출 데이터 미저장: Sendform은 데이터를 이메일로 전달하고 서버에 보관하지 않아요. GDPR 준수를 위한 올바른 기본 설정이에요. Formspree 같은 경쟁 서비스는 모든 제출 데이터를 대시보드에 저장하기 때문에 사용자 데이터가 서드파티 서버에 무기한 남아있어요.
• 개발자 친화적이면서 노코드로도 사용 가능: Zapier와 달리 유지할 워크플로가 없어요. Netlify Forms와 달리 특정 호스팅 서비스에 종속되지 않아요. Webflow, GitHub Pages, 어떤 호스팅에서도 동작해요.
• 솔직한 무료 플랜: 유료 플랜으로 유도하기 위해 "리다이렉트 기능은 업그레이드 필요" 같은 숨겨진 제한이 없어요.

어떤 방법을 선택해야 할까요?

폼 제출 후 실제로 무엇이 필요한지에 따라 최적의 선택이 달라져요.

• 이메일 알림만 필요한 경우: Sendform을 사용하세요. Webflow의 Action 필드에 endpoint URL을 붙여넣으면 2분 안에 끝나요.
• 이메일 + CRM 또는 스프레드시트 동기화가 필요한 경우: Sendform으로 이메일 전송을 처리하고, 수신된 이메일을 트리거로 하는 Zapier 단계를 선택적으로 추가하거나, 플랜에서 지원하는 경우 Sendform의 webhook 출력을 활용하세요.
• 복잡한 다단계 자동화가 필요한 경우: Webflow webhook을 Make나 Zapier에 연결하는 방식이 적합해요. 단, 유료 플랜 비용을 예산에 반영하세요.
• 이미 Netlify를 사용 중인 경우: 간단한 경우에는 Netlify Forms도 괜찮지만, 활성화된 사이트라면 월 100건 한도에 금방 도달해요.

이름, 이메일, 메시지 필드로 구성된 대부분의 Webflow 문의 폼에서 받은편지함으로 안정적으로 전달되기를 원한다면, Sendform이 가장 빠르고 깔끔한 선택이에요. 백엔드도 없고, 월별 태스크 한도도 없고, 삭제하는 것을 잊어버린 서드파티 대시보드에 제출 데이터가 쌓이는 일도 없어요.

백엔드 없이 Webflow 문의 폼을 처리하세요

Sendform은 Webflow의 Action 필드에 바로 붙여넣을 수 있는 폼 endpoint를 제공해요. 폼 제출 데이터가 즉시 받은편지함으로 도착하며, 스팸 필터링과 GDPR 친화적인 기본 설정이 포함되어 있어요.

Sendform 무료로 시작하기 →