Anfrageformular für die Website erstellen – Angebotsanfrage ohne Backend

Ein Formular für Angebotsanfragen verrät Ihnen mehr als ein Kontaktformular: was der Kunde braucht, welches Budget er hat und bis wann es fertig sein soll. Sie bauen es in reinem HTML, erhalten jede Anfrage als übersichtlich aufgebaute E-Mail und schicken dem Kunden automatisch eine „Ist angekommen“-Antwort.

Sie brauchen: ein kostenloses Frontmail-Konto und etwa fünfzehn Minuten.

1. Postfach verbinden

Verbinden Sie unter E-Mail-Dienste → Dienst hinzufügen Gmail, Outlook, einen SMTP-Server oder einen Transaktions-Anbieter, aktivieren Sie Als Standard festlegen und klicken Sie auf Prüfen & speichern.

2. Vorlage für die Angebotsanfrage anlegen

1. Öffnen Sie Vorlagen → Aus der Galerie und wählen Sie Angebotsanfrage (Kategorie Geschäftlich).
2. Klicken Sie auf Vorlage verwenden. Die Anfrage geht an Ihre Adresse; Reply-To ist der Kunde.

Die Vorlage hat diese Parameter:

Parameter	Typ	Pflicht	Hinweis
name	string	ja
email	email	ja
phone	string	nein
company	string	nein
service	enum	ja	einer der Werte auf dem Tab Parameter
budget	enum	nein	einer der Werte auf dem Tab Parameter
deadline	date	nein	YYYY-MM-DD, genau das, was <input type="date"> sendet
details	text	ja	mindestens 10 Zeichen

service und budget akzeptieren nur die aufgeführten Werte. Das Codebeispiel unten verwendet die Werte der englischen Galerie-Vorlage (Website, E-shop, Mobile app, Consulting, Other und Under $5k, $5k–20k, $20k–50k, Over $50k). Legen Sie die Vorlage auf Deutsch an, lauten sie Website, Onlineshop, Mobile App, Beratung, Sonstiges und Unter 5.000 €, 5.000–20.000 €, 20.000–50.000 €, Über 50.000 €. Passen Sie sie auf dem Tab Parameter an Ihr Angebot an – das Formular muss genau die Werte senden, die dort stehen.

3. Automatische Bestätigung hinzufügen

1. Vorlagen → Aus der Galerie → Automatische Antwort: Danke für Ihre Nachricht → Vorlage verwenden.
2. Legen Sie auf ihrem Tab Parameter Standardwerte für company_name (Ihre Firma) und response_time (zum Beispiel innerhalb eines Werktags) fest. Speichern.
3. Öffnen Sie die Vorlage der Angebotsanfrage → Einstellungen → Zustellung und wählen Sie die neue Vorlage als Vorlage für automatische Antwort. Speichern.

Eine Einsendung verschickt jetzt zwei E-Mails: die Anfrage an Sie und die Bestätigung an den Kunden. Die automatische Antwort kann nur Ihr eigenes Formular auslösen – niemand kann sie missbrauchen, um Fremden E-Mails zu schicken.

4. Website freigeben

Tragen Sie unter Sicherheit Ihre Domain bei Erlaubte Websites ein und klicken Sie auf Speichern. Schützen Sie das Formular anschließend vor Bots: Legen Sie ein kostenloses Cloudflare-Turnstile-Widget an, fügen Sie dessen Schlüssel unter Sicherheit → Bot-Schutz ein und aktivieren Sie das CAPTCHA für alle Vorlagen.

5. Formular einbauen

Verwenden Sie Ihren öffentlichen Schlüssel und die Vorlagen-ID aus dem Tab Snippets:

<form id="quote">
  <label>Name <input name="name" required /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Company <input name="company" /></label>
  <label>What do you need?
    <select name="service" required>
      <option>Website</option>
      <option>E-shop</option>
      <option>Mobile app</option>
      <option>Consulting</option>
      <option>Other</option>
    </select>
  </label>
  <label>Budget
    <select name="budget">
      <option value="">Not sure yet</option>
      <option>Under $5k</option>
      <option>$5k–20k</option>
      <option>$20k–50k</option>
      <option>Over $50k</option>
    </select>
  </label>
  <label>Deadline <input name="deadline" type="date" /></label>
  <label>Project details <textarea name="details" required minlength="10"></textarea></label>
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Request a quote</button>
  <p id="quote-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });
  const form = document.getElementById('quote');
  const status = document.getElementById('quote-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thanks! Check your inbox – we’ve sent you a confirmation.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset();
    }
  });
</script>

Leere optionale Felder (kein Budget gewählt, kein Termin) erscheinen einfach nicht in der E-Mail.

6. Testen

Senden Sie eine Testanfrage mit Ihrer eigenen Adresse im Feld Email. Sie sollten die Anfrage und kurz darauf die Bestätigung erhalten. Beide erscheinen im Verlauf, jede mit ihrem eigenen Zeitverlauf.

Jede E-Mail kostet einen Credit, eine Anfrage mit automatischer Antwort also zwei. Gehen Ihnen in der Hochsaison die Credits aus, warten die Anfragen in der Warteschlange zurückgehaltener E-Mails und werden versendet, sobald Sie aufladen – keine geht verloren.

Nächste Schritte

• Speichern Sie jeden Kunden unter Kontakte: Die Vorlage ordnet email, name und company bereits zu; aktivieren Sie Kontakte sammeln in den Einstellungen der Vorlage.
• Sie möchten die Anfrage in der Sprache des Kunden? Fügen Sie der Vorlage eine Sprachvariante hinzu und senden Sie das Formular mit einem versteckten Feld fm_locale (zum Beispiel de).