Menambahkan formulir kontak ke website portofolio Anda

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.

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

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:

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

<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 punya pola formulir yang sama di Next.js, Astro, SvelteKit, Nuxt, React, dan Vue. Static site generator punya halaman setup sendiri, seperti Jekyll dan Hugo.

Jawab permintaan yang tepat lebih dulu

Ikiform mengirim setiap permintaan dengan cara yang sama; penyaringan berdasarkan budget terjadi di alat yang menerima webhook. Di Zapier atau n8n, tambahkan filter pada budget sebelum langkah pesan. Untuk langsung sampai ke ponsel Anda, ikuti panduan Telegram atau Slack.

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

Pertanyaan