ポートフォリオサイトにお問い合わせフォームを追加する

初回の打ち合わせ前に必要な 4 つのこと、つまり案件の内容、予算の幅、開始時期、参考リンクを尋ねます。静的なポートフォリオからフォームを Ikiform に送信すれば、問い合わせは受信トレイに届き、Reply でクライアントに返信できます。訪問者がどの事例から来たかで案件の種類を事前入力すれば、何が決め手になったかがわかります。

ポートフォリオのフォームならではの違い

ポートフォリオでは、お問い合わせフォームが営業の入り口です。名前、メールアドレス、メッセージだけのフォームでは、予算はいくらか、いつ始めたいか、既存のサイトはあるかといった質問で返信しなければならないメッセージばかりが届きます。最初に尋ねておけばメールの往復が 1 回減り、どの問い合わせに先に返信すべきかもわかります。

ポートフォリオは無料の静的ホスティングに置かれ、一度ビルドしたら何か月も放置されがちです。パッチを当てるサーバーも、ダッシュボードを確認するあなたもいない状態で、フォームは動き続けなければなりません。

電話番号や会社の規模は尋ねません。必須項目が 1 つ増えるごとに問い合わせは減りますし、どちらも初回の打ち合わせでわかります。

フォーム

プレーンな 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 のままにしてください。通知メールはこれを reply-to に設定するので、自分の受信トレイから返信できます。
• フレームワークで作ったポートフォリオなら、ピラーガイドに Next.js、Astro、SvelteKit、Nuxt、React、Vue で同じパターンのフォームがあります。静的サイトジェネレーターには、Jekyll や Hugo など専用のセットアップページがあります。

返信すべき問い合わせから先に返信する

Ikiform はすべての問い合わせを同じ方法で送ります。予算での絞り込みは Webhook を受け取るツールで行います。Zapier や n8n なら、メッセージを送るステップの前に budget のフィルターを追加してください。スマートフォンに直接届けるには、Telegram や Slack の手順に従います。

Ikiform はフォームを入力した本人にはメールを送りません。通知メールが届くのはあなたとチームだけなので、自動返信、確認メール、ダブルオプトインはありません。それらは Webhook をきっかけに、自分のメールツールから送ってください。ポートフォリオなら、いつ返信するかを書いた短いサンクスページで、自動返信の役割はほぼ果たせます。

打ち合わせの予約につなげるサンクスページ

Redirect after submit を自分のサンクスページに設定します。ポートフォリオなら、お礼を言う以上のことができます。すぐに話したい人のためにカレンダーの予約ページへリンクし、それ以外の人にはいつ返信するかを伝えましょう。まだ見ていない事例を 2〜3 件載せておくのも有効です。相手はまだ検討中だからです。

noindex の meta タグでこのページを検索結果から外してください。また、スパムも本物の問い合わせと同じリダイレクトを受けるので、ダッシュボードも確認せずにこのページへの訪問をアナリティクスのコンバージョンとして数えないでください。

ポートフォリオのスパム

ポートフォリオには特有のスパムが届きます。SEO の売り込み、ゲスト投稿の提案、「サイトをリニューアルしませんか」といった定型文です。Ikiform のスコアリングでは、既知のスパム表現で +2、名前欄のリンクで +3、3 つ以上のリンクで +2 が加算され、5 に達したメッセージはスパムとして保存されてメールは送られません。

クライアントが 10 分間に 2 件問い合わせることはまずないので、レート制限は Strict（訪問者ごとに 10 分間で 2 件）に設定します。ドメインを Allowed domains に追加し、最初の数週間はときどき Spam フィルターを確認してください。過去の作品へのリンクを 3 つ含む本物の問い合わせは、スコアが高くなることがあります。

動作を確認する

1. フォームの Allowed domains にサイトのドメインを追加し、開発中は localhost も追加します。空のままにすると、どこからの送信でも受け付けます。
2. contact.html?project=branding&from=test を開き、Branding が選ばれていることを確認します。
3. 問い合わせを送信します。Submissions で、seen が test になっているはずです。
4. ブラウザーの開発者ツールで textarea から minlength を削除し、3 語のメッセージを送ります。Ikiform は message を示して 422 validation_failed で拒否します。
5. 通知の受信者それぞれの受信トレイを確認します。各自にフィールド入りのメールが届き、フォームに email フィールドがあれば Reply の宛先は送信者になります。
6. 何も届かない場合は、ダッシュボードのステータスフィルターを Spam に切り替えてください。スパムにも本物の送信と同じ成功の応答が返ります。

ハマりどころ

よくある質問