Buat formulir permintaan penawaran tanpa unggah file

Minta brief sebagai tautan ke folder bersama di field url, karena Ikiform menolak unggah file dengan 422 files_not_supported. Jadikan layanan dan anggaran pilihan tetap agar setiap permintaan tiba dalam bentuk yang sama, dan janjikan waktu penyelesaian di pesan sukses. Lalu kirim setiap permintaan ke tim beserta tenggatnya, agar janji itu ditepati.

Apa yang berbeda dari permintaan penawaran

Permintaan penawaran datang bersama materi: brief, denah, spreadsheet komponen, desain tahun lalu. Jawaban yang biasa adalah input file. Itu tidak bekerja di sini, dan ada baiknya tahu alasannya sebelum Anda mendesain di sekitarnya.

Unggah file belum didukung. Kiriman berisi file mendapat 422 files_not_supported. Seluruh kiriman ditolak, bukan hanya file-nya, jadi pengunjung yang melampirkan PDF kehilangan semua yang mereka ketik kecuali formulir Anda menampilkan error dan menyimpan input mereka. Tautan bersama menghindari masalah ini dan punya kelebihan sendiri: klien bisa menambah file setelah mengirim, tidak ada batas ukuran, dan tidak ada file besar yang menumpuk di inbox Anda.

Field-nya

Template permintaan penawaran punya set field lengkap dengan telepon, perusahaan, dan jadwal. Versi di bawah memangkasnya dan menambahkan field tautan. Coba tautan http:, atau tautan drive.google.com tanpa skema, untuk melihat bagaimana field url menjawab.

Formulirnya

HTML biasa. type="url" memunculkan keyboard yang tepat di ponsel, dan teks bantuan menjelaskan cara membagikan folder, yang menghemat satu kali bolak-balik saat tautan pertama ternyata privat.

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="POST">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required />

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

  <label for="service">What do you need?</label>
  <select id="service" name="service" required>
    <option value="design">Design</option>
    <option value="development">Development</option>
    <option value="both">Design and development</option>
  </select>

  <label for="budget">Budget</label>
  <select id="budget" name="budget">
    <option value="">Not sure yet</option>
    <option value="under_5k">Under $5,000</option>
    <option value="5k_20k">$5,000 to $20,000</option>
    <option value="over_20k">Over $20,000</option>
  </select>

  <label for="files_url">Link to your files</label>
  <input id="files_url" name="files_url" type="url" inputmode="url" placeholder="https://drive.google.com/..." aria-describedby="files-help" />
  <p id="files-help">A shared folder with the brief, mockups or specs. Set it so anyone with the link can view.</p>

  <label for="details">What should the quote cover?</label>
  <textarea id="details" name="details" rows="5" minlength="20" required></textarea>

  <input type="hidden" name="_redirect" value="https://example.com/quote/thanks" />
  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Request a quote</button>
</form>

Tautan dan skor spam

Formulir penawaran adalah satu-satunya tempat lead asli sengaja mengirim tautan, dan tautan adalah sinyal spam. Tiga tautan atau lebih di semua field menambah 2 pada skor. Field url disimpan sebagai tautan https:// lengkap, jadi ikut dihitung.

Baris ketiga adalah orang sungguhan yang mengira submit pertama gagal. Itulah sebabnya formulir sebaiknya punya satu field tautan, bukan tiga, dan status suksesnya harus tidak mungkin salah dibaca. Periksa filter Spam setiap minggu; menandai permintaan sebagai bukan spam akan mengirim email dan webhook-nya saat itu.

Beri tenggat pada setiap permintaan

Pesan sukses menjanjikan penawaran dalam dua hari kerja. Cloudflare Worker ini mengubah janji itu menjadi tanggal yang bisa dilihat tim. Worker memverifikasi webhook, menghitung tenggat dari created_at, dan mengirim permintaan ke channel penawaran bersama tautan file-nya:

import { verifyWebhook, WebhookVerificationError } from "@ikiform/sdk/webhooks";

function addWorkingDays(from: Date, days: number) {
  const date = new Date(from);
  while (days > 0) {
    date.setUTCDate(date.getUTCDate() + 1);
    const day = date.getUTCDay();
    if (day !== 0 && day !== 6) days -= 1;
  }
  return date.toISOString().slice(0, 10);
}

export default {
  async fetch(request: Request, env: { IKIFORM_WEBHOOK_SECRET: string; SLACK_QUOTES_WEBHOOK: string }) {
    const payload = await request.text();
    let event;
    try {
      event = await verifyWebhook({ payload, headers: request.headers, secret: env.IKIFORM_WEBHOOK_SECRET });
    } catch (error) {
      if (error instanceof WebhookVerificationError) return new Response(error.reason, { status: 400 });
      throw error;
    }
    if (event.type !== "submission.created") return new Response(null, { status: 204 });

    const quote = event.data.fields;
    const due = addWorkingDays(new Date(event.data.created_at), 2);
    const lines = [
      `Quote due *${due}*: ${quote.service} for ${quote.name} (${quote.budget ?? "budget not given"})`,
      quote.files_url ? `Files: ${quote.files_url}` : "No files linked. Ask for them in the first reply.",
      `Reply: mailto:${quote.email}`,
    ];

    const response = await fetch(env.SLACK_QUOTES_WEBHOOK, {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ text: lines.join("\n") }),
    });
    if (!response.ok) return new Response(`Slack answered ${response.status}`, { status: 502 });
    return new Response(null, { status: 204 });
  },
};

• Hari kerja melewati Sabtu dan Minggu dalam UTC. Tambahkan hari libur Anda jika penawaran Anda memperhitungkannya.
• files_url yang tidak ada menghasilkan pengingat untuk meminta file di balasan pertama, alih-alih baris kosong.
• Menjawab 502 saat Slack gagal membuat Ikiform mencoba ulang pengiriman yang sama, jadi permintaan tidak hilang.

Tambahkan URL Worker di Webhooks, salin secret whsec_ ke IKIFORM_WEBHOOK_SECRET, dan simpan URL Slack sebagai secret. Panduan Slack membahas cara membuat incoming webhook.

Pastikan berfungsi

1. Kirim dengan tautan folder Google Drive atau Dropbox. Buka tautan dari email notifikasi di jendela privat untuk memastikan bisa dilihat.
2. Kirim dengan tautan http:. Kiriman ditolak dengan 422 dan pesannya menyebut files_url.
3. Cari type="file" di template Anda dan hapus setiap kecocokan dari formulir penawaran yang mengirim ke Ikiform.
4. Periksa channel penawaran. Pesannya menampilkan tenggat dua hari kerja ke depan dan tautan file-nya.
5. Tekan Reply di email notifikasi. Balasannya menuju alamat di formulir.

Hal yang sering menjebak

• Tautan privat. Kegagalan paling umum adalah tautan yang hanya bisa dibuka pemiliknya. Jelaskan cara membagikannya di teks bantuan, dan minta akses di balasan pertama alih-alih menunggunya.
• Klien punya file tapi tidak punya folder. Minta mereka membalas email pertama Anda dengan lampiran. Reply-to menaruh file mereka di utas email biasa bersama tim Anda.
• Cakupan panjang. Email notifikasi menampilkan nilai hingga 500 karakter. Teks details lengkap ada di dashboard dan webhook.
• Tidak ada email konfirmasi. Ikiform tidak mengirim email ke orang yang mengisi formulir. Pesan di halaman adalah konfirmasinya, jadi buat waktu penyelesaiannya konkret.

Pertanyaan