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

> 初回の打ち合わせで聞くことを尋ねるポートフォリオのお問い合わせフォーム。案件、予算、時期、リンクを、サーバーなしで受け取り、受信トレイから返信できます。

公開日 2026-10-25 · https://ikiform.com/ja/guides/contact-form-static-site/portfolio-website

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

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

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

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

| フィールド | 尋ねる理由 | 種類 |
| --- | --- | --- |
| `project` | 誰が返信し、何を返すか | `select` なので、絞り込みに安心して使える |
| `budget` | 自由入力の数字より幅のほうが絞り込みやすく、答えてもらいやすい | 幅を選ぶ `radio` |
| `start` | 「今月」と「まだ検討中」では返信が変わる | `select` |
| `link` | 今のサイトや概要資料。具体的な返信ができる | `url` |
| `message` | 本人の言葉での案件説明 | `textarea`、30 文字以上 |

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

フォーム: Work with me

- **お名前** (`name`, text, 必須)
- **メールアドレス** (`email`, email, 必須)
- **ご依頼の内容は？** (`project`, select, 必須)
- **予算** (`budget`, radio, 必須)
- **いつ頃開始したいですか？** (`start`, select)
- **今のサイトか概要資料** (`link`, url)
- **案件について教えてください** (`message`, textarea, 必須)
- **流入元** (`seen`, text)

この定義をフォームの **Fields** タブに貼り付けます。すると Ikiform は一覧にある予算と案件の値だけを受け付け、30 文字未満のメッセージはフィールドエラーで拒否します。フィールドを定義したフォームは一覧にない入力をすべて拒否するので、`seen` も定義に含めています。ページ上では hidden の入力欄です。

> ファイルのアップロードにはまだ対応していません。ファイル付きの送信には `422 files_not_supported` が返ります。

## フォーム

プレーンな HTML なので、手書きのポートフォリオでも、Jekyll や Hugo のテーマでも、Astro のテンプレートでも動きます。末尾のスクリプトが、訪問者が来たリンクから案件の種類を事前入力し、どのページから来たかを記録します:

`contact.html`:

```html
<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>
```

各事例ページから、案件の種類とページ名を付けてフォームにリンクします:

`case-studies/northwind.html`:

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

- スクリプトは一覧に存在する案件の値しか選ばないので、手で書き換えたリンクで新しい値を追加することはできません。
- `seen` には事例の名前が、なければリファラーが入ります。数か月後には、どの作品がどの問い合わせにつながったかが CSV でわかります。
- フィールド名は `email` のままにしてください。通知メールはこれを reply-to に設定するので、自分の受信トレイから返信できます。
- フレームワークで作ったポートフォリオなら、[ピラーガイド](https://ikiform.com/ja/guides/contact-form-static-site.md#form)に Next.js、Astro、SvelteKit、Nuxt、React、Vue で同じパターンのフォームがあります。静的サイトジェネレーターには、[Jekyll](https://ikiform.com/ja/docs/guides/jekyll.md) や [Hugo](https://ikiform.com/ja/docs/guides/hugo.md) など専用のセットアップページがあります。

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

図: 訪問者が送信を押した後、ポートフォリオの問い合わせがたどる道筋

1. 訪問者が事例ページから来ると、案件の種類があらかじめ選ばれた状態でフォームが開きます。
2. フォームは Ikiform に送信され、Ikiform がスパムチェックを実行して問い合わせを保存します。
3. 通知メールが届き、Reply でクライアントに直接返信できます。
4. Webhook が同じ問い合わせを Telegram や Slack に送り、自動化で高予算の案件だけを通知させることもできます。
5. すべての問い合わせはダッシュボードに残るので、1 年分を CSV でエクスポートし、どの作品が問い合わせにつながったかを確認できます。

始めはメールだけで十分です。返信の遅れで仕事を逃すようになったら、スマートフォンへの通知を追加しましょう。

Ikiform はすべての問い合わせを同じ方法で送ります。予算での絞り込みは Webhook を受け取るツールで行います。[Zapier](https://ikiform.com/blog/form-submissions-to-zapier.md) や [n8n](https://ikiform.com/blog/form-submissions-to-n8n.md) なら、メッセージを送るステップの前に `budget` のフィルターを追加してください。スマートフォンに直接届けるには、[Telegram](https://ikiform.com/blog/form-submissions-to-telegram.md) や [Slack](https://ikiform.com/blog/form-submissions-to-slack.md) の手順に従います。

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

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

**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** に切り替えてください。スパムにも本物の送信と同じ成功の応答が返ります。

## ハマりどころ

| 問題 | 対処 |
| --- | --- |
| `budget` で `422 validation_failed` になる | HTML のラジオボタンの `value` が定義の選択肢と一致していません。アンダースコアも含めて完全に一致させる必要があります。 |
| 案件の種類が事前入力されない | リンクの `project` の値が選択肢の値のどれとも一致していません。綴りと大文字小文字を確認してください。 |
| 本物のクライアントの問い合わせがスパムに入っている | 3 つ以上のリンクでスコアが加算され、さらにスパムリストの表現や使い捨てアドレスが加わるとしきい値を超えます。スパムではないとマークすれば、その時点でメールと Webhook が送られます。 |
| `422 files_not_supported` | フォームの `<input type="file">` でファイルが選択されています。ファイルアップロードにはまだ対応していません。入力欄を削除するか、代わりにリンクを尋ねてください。 |

## よくある質問

### ポートフォリオのお問い合わせフォームで予算を尋ねるべきですか？

たいていは尋ねるべきです。数字ではなく幅で尋ねましょう。幅なら答えやすく、どの問い合わせに早く返信すべきかがわかります。離脱を防ぐため、「未定」の選択肢も入れてください。

### クライアントは概要資料やファイルを添付できますか？

Ikiform ではまだできません。代わりにリンクを尋ねてください。共有ドキュメント、ドライブのフォルダー、今のサイトなどです。url フィールドが実在するウェブアドレスかどうかを確認します。

### ポートフォリオのお問い合わせフォームにサーバーは必要ですか？

いいえ。ポートフォリオはどのホストでも静的なままで、フォームは Ikiform に送信され、Ikiform が各問い合わせを保存してメールで通知します。

### どの事例から問い合わせが来たかはどこで確認できますか？

各送信データの seen フィールドです。ダッシュボードで絞り込みや検索をするか、数か月ごとに CSV をエクスポートしてページごとの問い合わせ数を数えてください。

### Ikiform は無料ですか？

いいえ、無料プランはありません。テストは無料で、支払いの前に localhost から月 50 件のテスト送信ができます。本番運用するには、月 $6 で 500 件からの Pro を選ぶか、1 回払いで 10,000 件 $49 または 50,000 件 $149 を購入できます。クレジットに有効期限はありません。

## その他のガイド

- [静的サイトのお問い合わせフォーム](https://ikiform.com/ja/guides/contact-form-static-site.md): サーバーなしで静的サイトに動くお問い合わせフォームを追加します。POST の送り先、スパム、メールでの返信、各ホストとフレームワーク向けのコードまで。
- [GitHub Pages](https://ikiform.com/ja/guides/contact-form-static-site/github-pages.md): GitHub Pages ではサーバーコードが動かず、フォームの POST は 405 Not Allowed になります。フォームバックエンドに送信し、プロジェクトサイトのリダイレクトを正しく設定しましょう。
- [Netlify](https://ikiform.com/ja/guides/contact-form-static-site/netlify.md): Netlify Forms を使わずに、Netlify のサイトでお問い合わせフォームを運用します。ビルド時の検出なし、React からの JSON 送信、デプロイプレビュー用の別フォーム。
- [Vercel](https://ikiform.com/ja/guides/contact-form-static-site/vercel.md): Vercel の静的ページはフォームの POST に 405 Method Not Allowed を返します。その理由と、代わりにバックエンドへフォームを送る方法を説明します。
- [Cloudflare Pages](https://ikiform.com/ja/guides/contact-form-static-site/cloudflare-pages.md): Function を書かずに Cloudflare Pages にお問い合わせフォームを追加します。フォームバックエンドに送信し、_headers でヘッダーを設定し、自分の Turnstile キーを使います。
- [Amazon S3](https://ikiform.com/ja/guides/contact-form-static-site/aws-s3.md): S3 のウェブサイトエンドポイントは平文 HTTP の GET と HEAD しか受け付けません。お問い合わせフォームはフォームバックエンドに送信し、リダイレクトは CloudFront で正しく扱います。