# Menambahkan formulir kontak ke website portofolio Anda

> Formulir kontak portofolio yang menanyakan hal yang biasa Anda tanyakan di panggilan pertama: proyek, budget, waktu, dan link, tanpa server dan dengan balasan dari inbox Anda.

Terbit 2026-10-25 · https://ikiform.com/id/guides/contact-form-static-site/portfolio-website

Tanyakan empat hal yang Anda butuhkan sebelum panggilan pertama: proyeknya apa, kisaran budget, kapan mulai, dan link untuk dilihat. Kirim formulir ke Ikiform dari portofolio statis Anda, sehingga setiap permintaan masuk ke inbox Anda dengan **Reply** langsung ke klien. Isi jenis proyek secara otomatis dari studi kasus asal pengunjung, agar Anda tahu apa yang membuat mereka tertarik.

## Apa yang berbeda dari formulir portofolio

Di portofolio, formulir kontak adalah corong penjualan. Formulir nama, email, dan pesan saja menghasilkan pesan yang harus Anda balas dengan pertanyaan: budget-nya berapa, kapan mau mulai, sudah punya situs atau belum. Menanyakannya di awal menghemat satu putaran email, dan jawabannya memberi tahu permintaan mana yang perlu dijawab lebih dulu.

Portofolio juga cenderung berada di hosting statis gratis, dibangun sekali lalu dibiarkan berbulan-bulan. Formulir harus tetap berfungsi tanpa server untuk di-patch, dan tanpa Anda mengecek dashboard.

| Field | Alasan ada di sini | Tipe |
| --- | --- | --- |
| `project` | Siapa yang dijawab dan apa yang dikirim kembali | `select`, jadi aman untuk difilter |
| `budget` | Rentang lebih mudah difilter daripada angka bebas, dan orang mau menjawabnya | `radio` dengan rentang |
| `start` | "Bulan ini" dan "nanti, masih merencanakan" butuh balasan yang berbeda | `select` |
| `link` | Situs mereka saat ini atau brief, agar Anda bisa membalas dengan sesuatu yang spesifik | `url` |
| `message` | Proyeknya dengan kata-kata mereka sendiri | `textarea`, minimal 30 karakter |

Jangan sertakan nomor telepon dan ukuran perusahaan. Setiap field wajib tambahan mengurangi jumlah permintaan, dan Anda akan tahu keduanya di panggilan pertama.

Formulir: Work with me

- **Nama Anda** (`name`, text, wajib)
- **Email** (`email`, email, wajib)
- **Apa yang Anda butuhkan?** (`project`, select, wajib)
- **Budget** (`budget`, radio, wajib)
- **Kapan Anda ingin mulai?** (`start`, select)
- **Situs Anda saat ini atau brief** (`link`, url)
- **Ceritakan tentang proyeknya** (`message`, textarea, wajib)
- **Datang dari** (`seen`, text)

Tempel definisi ini di tab **Fields** formulir. Ikiform lalu hanya menerima nilai budget dan proyek yang tercantum, dan menolak pesan di bawah 30 karakter dengan error field. `seen` ada di definisi karena formulir yang punya field menolak input yang tidak tercantum; di halaman, field ini berupa input tersembunyi.

> Upload file belum didukung. Kiriman berisi file mendapat `422 files_not_supported`.

## Formulirnya

HTML biasa, jadi berfungsi di portofolio yang ditulis manual, tema Jekyll atau Hugo, atau template Astro. Skrip di bagian akhir mengisi jenis proyek secara otomatis dari link yang membawa pengunjung ke sini, dan mencatat halaman mana itu:

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

Di setiap studi kasus, tautkan ke formulir dengan jenis proyek dan nama halaman:

`case-studies/northwind.html`:

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

- Skrip hanya memilih nilai proyek yang ada di daftar, jadi link yang diedit manual tidak bisa menambahkan nilai baru.
- `seen` berisi nama studi kasus, atau referrer jika tidak ada. Setelah beberapa bulan, CSV memberi tahu karya mana yang mendatangkan permintaan apa.
- Pertahankan `email` sebagai nama field. Email notifikasi menjadikannya reply-to, jadi Anda membalas dari inbox sendiri.
- Untuk portofolio berbasis framework, [panduan utama](https://ikiform.com/id/guides/contact-form-static-site.md#form) punya pola formulir yang sama di Next.js, Astro, SvelteKit, Nuxt, React, dan Vue. Static site generator punya halaman setup sendiri, seperti [Jekyll](https://ikiform.com/id/docs/guides/jekyll.md) dan [Hugo](https://ikiform.com/id/docs/guides/hugo.md).

## Jawab permintaan yang tepat lebih dulu

Diagram: Ke mana permintaan portofolio pergi setelah pengunjung menekan Kirim

1. Pengunjung datang dari studi kasus, dan formulir terbuka dengan jenis proyek yang sudah terpilih.
2. Formulir mengirim ke Ikiform, yang menjalankan pemeriksaan spam dan menyimpan permintaan.
3. Anda mendapat email notifikasi, dan Reply langsung membalas ke klien.
4. Webhook mengirim permintaan yang sama ke Telegram atau Slack, tempat otomasi bisa memberi peringatan khusus untuk budget besar.
5. Setiap permintaan tetap ada di dashboard, jadi Anda bisa mengekspor setahun penuh sebagai CSV dan melihat karya mana yang mendatangkannya.

Email saja sudah cukup untuk memulai. Tambahkan peringatan ke ponsel saat Anda mulai kehilangan proyek karena balasan yang lambat.

Ikiform mengirim setiap permintaan dengan cara yang sama; penyaringan berdasarkan budget terjadi di alat yang menerima webhook. Di [Zapier](https://ikiform.com/blog/form-submissions-to-zapier.md) atau [n8n](https://ikiform.com/blog/form-submissions-to-n8n.md), tambahkan filter pada `budget` sebelum langkah pesan. Untuk langsung sampai ke ponsel Anda, ikuti panduan [Telegram](https://ikiform.com/blog/form-submissions-to-telegram.md) atau [Slack](https://ikiform.com/blog/form-submissions-to-slack.md).

Ikiform tidak mengirim email ke orang yang mengisi formulir. Email notifikasi hanya dikirim ke Anda dan tim, jadi tidak ada autoresponder, email konfirmasi, atau double opt-in. Kirim semua itu dari alat email Anda, dipicu oleh [webhook](https://ikiform.com/id/docs/webhooks.md). Untuk portofolio, halaman terima kasih singkat yang menyebutkan kapan Anda akan membalas sudah mencakup sebagian besar fungsi autoresponder.

## Halaman terima kasih yang langsung menjadwalkan panggilan

Atur **Redirect after submit** ke halaman terima kasih milik Anda sendiri. Di portofolio, halaman itu bisa lebih dari sekadar berterima kasih: tautkan halaman booking kalender untuk orang yang ingin bicara sekarang, dan sebutkan kapan Anda membalas yang lainnya. Tambahkan dua atau tiga studi kasus yang belum mereka lihat; mereka masih menimbang.

Jauhkan halaman itu dari hasil pencarian dengan meta tag `noindex`, dan jangan hitung kunjungan ke sana sebagai konversi di analitik tanpa juga mengecek dashboard, karena spam mendapat redirect yang sama dengan permintaan asli.

## Spam di portofolio

Portofolio mendapat jenis spam tertentu: tawaran SEO, pitch guest post, dan template "desain ulang situs Anda". Skor Ikiform menambahkan +2 untuk frasa spam yang dikenal, +3 untuk link di field nama, dan +2 untuk tiga link atau lebih; pada skor 5 pesan disimpan sebagai spam dan tidak mengirim email.

Klien jarang mengirim dua permintaan dalam sepuluh menit, jadi atur rate limit ke Strict, 2 per 10 menit per pengunjung. Tambahkan domain Anda di **Allowed domains**, dan sesekali cek filter **Spam** di minggu-minggu pertama: permintaan asli dengan tiga link ke karya sebelumnya bisa mendapat skor tinggi.

## Pastikan berfungsi

1. Di **Allowed domains** formulir, tambahkan domain situs Anda, ditambah `localhost` selama pengembangan. Biarkan kosong untuk menerima kiriman dari mana saja.
2. Buka `contact.html?project=branding&from=test` dan pastikan **Branding** terpilih.
3. Kirim permintaan. Di **Submissions**, `seen` seharusnya berisi `test`.
4. Hapus `minlength` dari textarea lewat devtools browser dan kirim pesan tiga kata. Ikiform menolaknya dengan `422 validation_failed`, menyebut `message`.
5. Cek inbox setiap penerima notifikasi. Masing-masing mendapat email berisi field, dan **Reply** terkirim ke pengirim formulir jika formulir punya field `email`.
6. Tidak ada yang masuk? Ubah filter status di dashboard ke **Spam**. Spam mendapat jawaban sukses yang sama dengan kiriman asli.

## Hal yang sering menjebak

| Masalah | Yang harus dilakukan |
| --- | --- |
| `422 validation_failed` untuk `budget` | `value` radio di HTML tidak cocok dengan opsi di definisi. Keduanya harus sama persis, termasuk garis bawah. |
| Proyek tidak terisi otomatis | Nilai `project` di link bukan salah satu nilai opsi. Cek ejaan dan huruf besar-kecilnya. |
| Permintaan klien sungguhan masuk ke spam | Tiga link atau lebih menambah skor, dan jika ditambah frasa dari daftar spam atau alamat sekali pakai, skornya melewati ambang batas. Tandai sebagai bukan spam; email dan webhook-nya lalu terkirim. |
| `422 files_not_supported` | Formulir punya `<input type="file">` dengan file yang dipilih. Upload file belum didukung; hapus input itu atau minta link sebagai gantinya. |

## Pertanyaan

### Haruskah formulir kontak portofolio menanyakan budget?

Biasanya ya, dalam bentuk rentang, bukan angka. Rentang mudah dijawab, dan memberi tahu permintaan mana yang perlu dibalas cepat. Sertakan opsi Belum tahu agar tidak ada yang batal mengisi.

### Bisakah klien melampirkan brief atau file?

Belum lewat Ikiform. Minta link sebagai gantinya: dokumen bersama, folder drive, atau situs mereka saat ini. Field url memastikan itu alamat web yang valid.

### Apakah saya butuh server untuk formulir kontak portofolio?

Tidak. Portofolio tetap statis di host mana pun, dan formulir mengirim ke Ikiform, yang menyimpan setiap permintaan dan mengirimi Anda email.

### Di mana saya melihat studi kasus mana yang mendatangkan sebuah permintaan?

Di field seen pada setiap kiriman. Filter atau cari di dashboard, atau ekspor CSV dan hitung permintaan per halaman setiap beberapa bulan.

### Apakah Ikiform gratis?

Tidak, tidak ada paket gratis. Pengujian gratis: Anda bisa mengirim 50 kiriman uji per bulan dari localhost sebelum membayar. Untuk go live, Pro mulai $6/bln untuk 500 kiriman, atau Anda bisa bayar sekali untuk 10.000 kiriman seharga $49 atau 50.000 kiriman seharga $149, dengan kredit yang tidak pernah kedaluwarsa.

## Panduan lainnya

- [Formulir kontak di situs statis](https://ikiform.com/id/guides/contact-form-static-site.md): Pasang formulir kontak yang berfungsi di situs statis tanpa server: ke mana POST dikirim, spam, balasan lewat email, dan kode untuk setiap host dan framework.
- [GitHub Pages](https://ikiform.com/id/guides/contact-form-static-site/github-pages.md): GitHub Pages tidak bisa menjalankan kode server, jadi POST formulir mendapat 405 Not Allowed; kirim ke form backend dan atur redirect project site dengan benar.
- [Netlify](https://ikiform.com/id/guides/contact-form-static-site/netlify.md): Jalankan formulir kontak di situs Netlify tanpa Netlify Forms: tanpa deteksi saat build, kiriman JSON dari React, dan formulir terpisah untuk deploy preview.
- [Vercel](https://ikiform.com/id/guides/contact-form-static-site/vercel.md): Halaman statis di Vercel menjawab POST formulir dengan 405 Method Not Allowed; ini penyebabnya, dan cara mengirim formulir ke backend.
- [Cloudflare Pages](https://ikiform.com/id/guides/contact-form-static-site/cloudflare-pages.md): Tambahkan formulir kontak ke Cloudflare Pages tanpa menulis Function: kirim ke form backend, atur header di _headers, dan pakai key Turnstile Anda sendiri.
- [Amazon S3](https://ikiform.com/id/guides/contact-form-static-site/aws-s3.md): Endpoint website S3 hanya menerima GET dan HEAD lewat HTTP biasa, jadi kirim formulir kontak ke form backend dan atur redirect dengan benar lewat CloudFront.