웹사이트 폼을 Gmail로 보내기(그리고 mailto:가 실패하는 이유)

폼을 폼 백엔드로 POST하고 Gmail 주소를 수신자로 추가하세요. 방문자의 메일 앱을 열기만 하는 mailto: action은 쓰지 마세요. 그다음 발신자에 대한 Gmail 필터를 추가하면 제출이 스팸함을 건너뛰고 전용 라벨이 붙습니다. Gmail에서 Reply를 누르면 여러분의 주소로 방문자에게 답장합니다.

이 경우가 다른 점

Gmail은 메일함이지 사이트용 발송 서비스가 아닙니다. 폼이 POST할 URL이 없으므로 Gmail로 가는 모든 경로는 다른 무언가를 거칩니다. 대부분의 사람이 처음 시도하는 것은 mailto:입니다.

<form action="mailto:you@gmail.com" method="post" enctype="text/plain">
  <input name="name" />
  <input name="email" type="email" />
  <textarea name="message"></textarea>
  <button>Send</button>
</form>

여러분의 컴퓨터에서는 실제로 동작합니다. Send를 누르면 본문에 필드가 담긴 메일 앱이 열리고, 자기 자신에게 보냅니다. 방문자의 경험은 다릅니다.

메시지가 도착하더라도 본문은 가공되지 않은 name=value 줄입니다. text/plain 인코딩이 그렇게 만들기 때문입니다.

name=Ada Lovelace
email=ada@example.com
message=Hi, do you take on small bathroom jobs in March?

Gmail로 가는 다른 경로도 동작하지만, 모두 직접 운영하는 서버가 필요합니다.

Apps Script는 대부분의 튜토리얼이 권하는 경로이니 좀 더 자세히 살펴볼 만합니다. doPost 함수를 작성하고, 누구나 호출할 수 있는 웹 앱으로 배포한 뒤, 폼을 그 URL로 지정합니다. 동작은 하지만, 일반 폼 POST를 하면 방문자는 여러분의 도메인이 아닌 Google 도메인에서 제공되는 페이지에 남게 되고, URL을 찾은 봇은 누구든 그날의 할당량을 다 써 버릴 수 있으며, 스크립트가 여러분 명의로 실행되므로 버그 하나로 여러분 계정에서 아무에게나 이메일이 갈 수 있습니다. 그 후로 폼 필드를 바꿀 때마다 스크립트도 직접 고쳐야 합니다.

폼을 Gmail로 보내기

작은 시공 업체용 폼입니다. job 필드 덕분에 받은편지함을 훑어보기 쉽고, email은 답장이 방문자에게 가도록 이름을 붙였습니다.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required />

  <label for="email">Email for our reply</label>
  <input id="email" name="email" type="email" autocomplete="email" required />

  <label for="job">What do you need?</label>
  <select id="job" name="job" required>
    <option value="">Choose one</option>
    <option value="repair">A repair</option>
    <option value="quote">A quote for a new job</option>
    <option value="other">Something else</option>
  </select>

  <label for="message">Details</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send to our inbox</button>
</form>

1. Ikiform에서 폼을 만들고 frm_xxxxxxxxxxxxxxxx를 그 ID로 바꾸세요.
2. Gmail 주소로 가입했다면 워크스페이스 소유자로서 이미 이메일을 받습니다. 그렇지 않다면 폼의 Notifications 설정을 열고 Add someone outside the workspace에 Gmail 주소를 입력한 뒤 Send link를 누르세요.
3. Gmail에서 확인 이메일을 열고 확인하세요. 그 전까지 주소에는 Waiting for confirmation이 표시되고 아무것도 받지 않습니다.
4. 폼의 Allowed domains에 도메인을 추가하고, 페이지를 게시한 뒤 테스트를 보내세요.

Gmail 필터로 스팸함 피하기

새 발신자의 첫 이메일은 Spam이나 Promotions에 들어갈 수 있습니다. 발신자 필터를 만들면 이 문제가 완전히 해결됩니다. Gmail에서 검색 옵션을 열고 From에 notifications@ikiform.com을 넣은 뒤 Create filter를 누르고, Never send it to Spam, Apply the label, Always mark it as important, Categorize as: Primary를 체크하세요. 마지막 항목이 Promotions로 가는 것을 막습니다.

또는 필터를 가져오세요. 아래는 Gmail 자체 필터 Export가 만드는 형식입니다. Google이 이 형식을 따로 문서화하지 않으므로, 가져오기에 실패하면 위처럼 직접 필터를 만드세요. mailFilters.xml로 저장한 뒤 Settings, See all settings, Filters and Blocked Addresses, Import filters로 이동하세요.

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:apps="http://schemas.google.com/apps/2006">
  <title>Mail Filters</title>
  <entry>
    <category term="filter"></category>
    <title>Mail Filter</title>
    <content></content>
    <apps:property name="from" value="notifications@ikiform.com"/>
    <apps:property name="label" value="Website"/>
    <apps:property name="shouldNeverSpam" value="true"/>
    <apps:property name="shouldAlwaysMarkAsImportant" value="true"/>
    <apps:property name="smartLabelToApply" value="^smartlabel_personal"/>
  </entry>
</feed>

먼저 Website 라벨을 만들거나 파일에서 이름을 바꾸세요. 모든 알림이 같은 주소에서 오므로 필터 하나로 모든 폼을 처리합니다. 폼마다 다른 라벨로 나누려면 subject:("New submission: Quote request")처럼 제목으로 필터링하세요.

Gmail에서 답장하기

Gmail은 회신 주소 헤더를 따르므로 Reply를 누르면 방문자에게 답장합니다. 답장은 여러분의 Gmail 주소에서 나가며, 스레드 어디에도 Ikiform은 없습니다.

• 대신 회사 주소로 답장하려면 Settings, Accounts and Import, Send mail as에서 추가하고, 답장할 때 From 줄에서 고르세요.
• 제목이 항상 New submission: 뒤에 폼 이름이 붙은 형태이므로, Gmail은 같은 제목의 알림을 대화 하나로 묶을 수 있습니다. 메시지마다 한 줄씩 보고 싶다면 Gmail 설정에서 Conversation view를 끄세요.
• 시간별 다이제스트는 여러 방문자를 다루므로 회신 주소가 없습니다. 이 경우에는 대시보드 링크에서 답장하세요.

동작 확인하기

1. 페이지에서 폼을 작성해 제출하세요. 여러분의 감사 페이지나 Ikiform의 호스팅 감사 페이지로 이동합니다.
2. Gmail에서 이메일을 찾으세요. 라벨이 붙어 있고 Spam이나 Promotions에 있지 않습니다.
3. Reply를 누르세요. To 줄에 폼에 입력한 주소가 있습니다.
4. 허니팟을 채워서 _gotcha=bot으로 POST하세요. 성공 응답은 받지만 제출은 스팸으로 저장되고 이메일도 웹훅도 보내지 않습니다.
5. 아무것도 도착하지 않았나요? 대시보드의 상태 필터를 Spam으로 바꿔 보세요. 스팸도 실제 제출과 같은 성공 응답을 받습니다.

주의할 점

• Google Workspace 별칭. 수신자가 별칭이나 Google 그룹이라면 외부 발신자를 허용할지는 그룹 자체 설정이 결정합니다. 믿고 쓰기 전에 테스트를 보내세요.
• 확인 메일이 스팸함으로 감. 확인 링크 이메일도 Ikiform에서 옵니다. 보이지 않으면 Spam을 확인하고 스팸이 아님으로 표시하세요.
• 여러 Gmail 주소. 폼마다 모두 합쳐 최대 10개 주소로 이메일을 보내며, 외부 주소는 각각 따로 확인합니다.
• 다른 곳에 남은 예전 mailto: 링크. 푸터의 mailto: 링크는 링크로서는 괜찮습니다. 문제는 폼의 action에 쓴 mailto:뿐입니다.

질문