Formular für Angebotsanfragen ohne Datei-Uploads bauen

Frag in einem url-Feld nach dem Briefing als Link zu einem geteilten Ordner, denn Ikiform lehnt Datei-Uploads mit 422 files_not_supported ab. Halte Leistung und Budget als feste Auswahl, damit jede Anfrage in derselben Form ankommt, und versprich in der Erfolgsmeldung eine Bearbeitungszeit. Schick dann jede Anfrage mit angehängtem Fälligkeitsdatum ans Team, damit das Versprechen gehalten wird.

Was an einer Angebotsanfrage anders ist

Eine Angebotsanfrage kommt mit Material: ein Briefing, ein Grundriss, eine Tabelle mit Teilen, das Design vom letzten Jahr. Die übliche Antwort ist ein Datei-Input. Der funktioniert hier nicht, und es lohnt sich zu wissen, warum, bevor du darum herum planst.

Datei-Uploads werden noch nicht unterstützt. Ein Post mit einer Datei bekommt 422 files_not_supported. Abgelehnt wird der ganze Post, nicht nur die Datei, also verliert ein Besucher, der ein PDF anhängt, alles Eingetippte, außer dein Formular zeigt den Fehler und behält seine Eingaben. Ein geteilter Link umgeht das Problem und hat eigene Vorteile: Der Kunde kann nach dem Senden Dateien ergänzen, es gibt kein Größenlimit, und nichts Großes liegt in deinem Posteingang.

Die Felder

Die Vorlage für Angebotsanfragen hat den vollständigen Feldsatz mit Telefon, Unternehmen und Zeitplan. Die Version unten kürzt ihn und ergänzt das Link-Feld. Probier einen http:-Link oder einen nackten drive.google.com-Link, um zu sehen, wie das url-Feld antwortet.

Das Formular

Reines HTML. type="url" bringt auf Smartphones die passende Tastatur, und der Hilfetext sagt, wie man den Ordner teilt, was eine Rückfrage spart, wenn sich der erste Link als privat herausstellt.

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

Links und der Spam-Score

Ein Angebotsformular ist der eine Ort, an dem echte Leads absichtlich Links senden, und Links sind ein Spam-Signal. Drei oder mehr Links über alle Felder erhöhen den Score um 2. Ein url-Feld wird als vollständiger https://-Link gespeichert, zählt also mit.

Die dritte Zeile ist eine echte Person, die dachte, das erste Absenden sei fehlgeschlagen. Deshalb sollte das Formular ein Link-Feld haben, nicht drei, und deshalb muss der Erfolgszustand unmissverständlich sein. Prüf den Filter Spam wöchentlich; markierst du eine Anfrage als kein Spam, werden dann ihre E-Mail und ihr Webhook gesendet.

Jeder Anfrage ein Fälligkeitsdatum geben

Die Erfolgsmeldung verspricht ein Angebot innerhalb von zwei Werktagen. Dieser Cloudflare Worker macht aus dem Versprechen ein Datum, das das Team sieht. Er verifiziert den Webhook, berechnet das Fälligkeitsdatum aus created_at und postet die Anfrage mit dem Datei-Link in einen Angebots-Channel:

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 });
  },
};

• Werktage überspringen Samstag und Sonntag in UTC. Ergänze deine Feiertage, wenn du sie beim Angebot berücksichtigst.
• Ein fehlendes files_url erzeugt eine Erinnerung, in der ersten Antwort nach Dateien zu fragen, statt einer leeren Zeile.
• Mit 502 zu antworten, wenn Slack fehlschlägt, lässt Ikiform dieselbe Zustellung erneut versuchen, sodass keine Anfrage verloren geht.

Füge die URL des Workers unter Webhooks hinzu, kopiere das whsec_-Secret in IKIFORM_WEBHOOK_SECRET und speichere die Slack-URL als Secret. Die Slack-Anleitung behandelt das Anlegen des Incoming Webhooks.

Prüfen, ob es funktioniert

1. Sende mit einem Ordner-Link von Google Drive oder Dropbox. Öffne den Link aus der Benachrichtigungs-E-Mail in einem privaten Fenster, um zu prüfen, dass er sichtbar ist.
2. Sende mit einem http:-Link. Der Post wird mit 422 abgelehnt, und die Meldung nennt files_url.
3. Durchsuche deine Vorlagen nach type="file" und entferne jeden Treffer aus Angebotsformularen, die an Ikiform senden.
4. Prüf den Angebots-Channel. Die Nachricht zeigt das Fälligkeitsdatum zwei Werktage später und den Datei-Link.
5. Drück Reply in der Benachrichtigungs-E-Mail. Sie schreibt an die Adresse aus dem Formular.

Stolperfallen

• Private Links. Der häufigste Fehler ist ein Link, den nur sein Besitzer öffnen kann. Sag im Hilfetext, wie man ihn teilt, und bitte in der ersten Antwort um Zugriff, statt darauf zu warten.
• Kunden mit Dateien, aber ohne Ordner. Bitte sie, auf deine erste E-Mail mit Anhängen zu antworten. Reply-To bringt ihre Dateien in einen normalen E-Mail-Verlauf mit deinem Team.
• Lange Umfänge. Benachrichtigungs-E-Mails zeigen Werte bis zu 500 Zeichen. Der vollständige details-Text steht im Dashboard und im Webhook.
• Keine Eingangsbestätigung per E-Mail. Ikiform schreibt der Person, die das Formular ausfüllt, keine E-Mail. Die Meldung auf der Seite ist die Bestätigung, also mach die Bearbeitungszeit konkret.

Fragen