포트폴리오 웹사이트에 문의 폼 추가하기

첫 통화 전에 필요한 네 가지를 물으세요. 어떤 프로젝트인지, 예산 범위, 시작 시기, 살펴볼 링크입니다. 정적 포트폴리오에서 폼을 Ikiform으로 POST하면 문의가 받은편지함에 도착하고 Reply가 클라이언트에게 갑니다. 방문자가 보고 온 케이스 스터디로 프로젝트 유형을 미리 채워 두면 무엇이 마음을 움직였는지 알 수 있습니다.

포트폴리오 폼에서 다른 점

포트폴리오에서 문의 폼은 영업 퍼널입니다. 이름, 이메일, 메시지만 있는 폼으로는 질문으로 답해야 하는 메시지가 들어옵니다. 예산이 얼마인지, 언제 시작하고 싶은지, 이미 사이트가 있는지 같은 질문 말이지요. 이를 미리 물으면 이메일 한 차례를 아낄 수 있고, 답변을 보면 어떤 문의에 먼저 답해야 할지 알 수 있습니다.

포트폴리오는 무료 정적 호스팅에 올려 한 번 빌드한 뒤 몇 달씩 그대로 두는 경우가 많습니다. 폼은 패치할 서버 없이도, 여러분이 대시보드를 확인하지 않아도 계속 작동해야 합니다.

전화번호와 회사 규모는 빼세요. 필수 필드가 하나 늘 때마다 문의가 줄어들고, 두 가지 모두 첫 통화에서 알 수 있습니다.

폼

일반 HTML이므로 직접 작성한 포트폴리오, Jekyll이나 Hugo 테마, Astro 템플릿에서 작동합니다. 끝에 있는 스크립트는 방문자를 데려온 링크에서 프로젝트 유형을 미리 채우고, 그 페이지가 어디였는지 기록합니다.

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

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

  <label for="project">What do you need?</label>
  <select id="project" name="project" required>
    <option value="website">A website</option>
    <option value="branding">Branding</option>
    <option value="product">Product design</option>
    <option value="other">Something else</option>
  </select>

  <fieldset>
    <legend>Budget</legend>
    <label><input type="radio" name="budget" value="under_5k" required /> Under $5k</label>
    <label><input type="radio" name="budget" value="5k_15k" /> $5k to $15k</label>
    <label><input type="radio" name="budget" value="over_15k" /> Over $15k</label>
    <label><input type="radio" name="budget" value="unsure" /> Not sure yet</label>
  </fieldset>

  <label for="start">When would you like to start?</label>
  <select id="start" name="start">
    <option value="now">This month</option>
    <option value="soon">In 1 to 3 months</option>
    <option value="later">Later, still planning</option>
  </select>

  <label for="link">Your current site or a brief</label>
  <input id="link" name="link" type="url" placeholder="https://" />

  <label for="message">Tell me about the project</label>
  <textarea id="message" name="message" rows="6" minlength="30" required></textarea>

  <input type="hidden" name="seen" value="" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button type="submit">Send enquiry</button>
</form>

<script>
  const params = new URLSearchParams(location.search);
  const enquiry = document.querySelector("#enquiry");
  const project = params.get("project");
  if (project && enquiry.project.querySelector(`option[value="${CSS.escape(project)}"]`)) {
    enquiry.project.value = project;
  }
  enquiry.seen.value = params.get("from") ?? document.referrer;
</script>

각 케이스 스터디에서 프로젝트 유형과 페이지 이름을 붙여 폼으로 링크하세요.

<a href="/contact.html?project=branding&from=case-study-northwind">Start a branding project</a>

• 스크립트는 목록에 있는 프로젝트 값만 선택하므로, 손으로 고친 링크로 새 값을 추가할 수 없습니다.
• seen에는 케이스 스터디 이름이, 없으면 리퍼러가 들어갑니다. 몇 달이 지나면 CSV를 보고 어떤 작업이 어떤 문의를 불러오는지 알 수 있습니다.
• 필드 이름은 email로 유지하세요. 알림 이메일이 이를 회신 주소로 설정하므로 여러분의 받은편지함에서 답장할 수 있습니다.
• 프레임워크로 만든 포트폴리오라면 필라 가이드에 Next.js, Astro, SvelteKit, Nuxt, React, Vue로 작성한 같은 폼 패턴이 있습니다. 정적 사이트 생성기에는 Jekyll, Hugo 같은 별도의 설정 페이지가 있습니다.

중요한 문의에 먼저 답하기

Ikiform은 모든 문의를 같은 방식으로 보냅니다. 예산별 필터링은 웹훅을 받는 도구에서 합니다. Zapier나 n8n에서 메시지 단계 앞에 budget 필터를 추가하세요. 휴대폰으로 바로 받으려면 Telegram 또는 Slack 가이드를 따르세요.

Ikiform은 폼을 작성한 사람에게 이메일을 보내지 않습니다. 알림 이메일은 여러분과 팀에게만 가므로 자동 응답, 확인 이메일, 더블 옵트인은 없습니다. 이런 이메일은 웹훅으로 트리거해 이메일 도구에서 보내세요. 포트폴리오라면 언제 답장할지 알려 주는 짧은 감사 페이지가 자동 응답이 할 일 대부분을 해냅니다.

통화 예약으로 이어지는 감사 페이지

Redirect after submit을 여러분의 감사 페이지로 설정하세요. 포트폴리오에서는 감사 인사 이상을 할 수 있습니다. 지금 바로 이야기하고 싶은 사람을 위해 캘린더 예약 페이지를 링크하고, 나머지 사람에게는 언제 답장하는지 알려 주세요. 아직 보지 않은 케이스 스터디도 두세 개 추가하세요. 그들은 아직 결정하는 중입니다.

noindex 메타 태그로 이 페이지가 검색 결과에 나오지 않게 하세요. 스팸도 실제 문의와 같은 리디렉션을 받으므로, 대시보드를 함께 확인하지 않고 이 페이지 방문을 분석 도구에서 전환으로 집계하지 마세요.

포트폴리오 스팸

포트폴리오에는 특유의 스팸이 옵니다. SEO 제안, 게스트 포스트 제안, "사이트를 리디자인해 드립니다" 같은 템플릿 메시지입니다. Ikiform의 점수는 알려진 스팸 문구에 +2, 이름 필드의 링크에 +3, 링크가 세 개 이상이면 +2를 더하며, 5점이 되면 메시지를 스팸으로 저장하고 이메일을 보내지 않습니다.

클라이언트가 10분 안에 문의를 두 번 보내는 일은 드물므로, 레이트 리밋을 방문자당 10분에 2회인 Strict로 설정하세요. Allowed domains에 도메인을 추가하고, 처음 몇 주 동안은 가끔 Spam 필터를 확인하세요. 지난 작업 링크를 세 개 넣은 실제 문의가 높은 점수를 받을 수 있습니다.

작동 확인하기

1. 폼의 Allowed domains에 사이트 도메인을 추가하고, 개발하는 동안에는 localhost도 추가하세요. 비워 두면 어디서 오는 POST든 받습니다.
2. contact.html?project=branding&from=test를 열어 Branding이 선택되었는지 확인하세요.
3. 문의를 보내세요. Submissions에서 seen이 test여야 합니다.
4. 브라우저 개발자 도구에서 textarea의 minlength를 지우고 세 단어짜리 메시지를 보내세요. Ikiform은 message를 지목하며 422 validation_failed로 거부합니다.
5. 알림 수신자마다 받은편지함을 확인하세요. 각자 필드가 담긴 이메일을 받고, 폼에 email 필드가 있으면 Reply가 제출한 사람에게 갑니다.
6. 아무것도 오지 않았나요? 대시보드의 상태 필터를 Spam으로 바꿔 보세요. 스팸은 실제 제출과 같은 성공 응답을 받습니다.

주의할 점

질문