Anleitung · Schritt für Schritt

Deine Recruiting-Landingpage — selbst gebaut

Eine Seite mit einem Ziel: Passende Bewerber bewerben sich direkt über ein Formular mit Vorfilter-Fragen — du bekommst nur noch qualifizierte Bewerbungen. Diese Anleitung führt dich von ganz vorne bis zur fertigen, live gehosteten Seite — ohne Technik-Wissen.

Bevor du startest

Was ist eine Recruiting-Landingpage — und warum?

Eine fokussierte Seite mit nur einem Ziel: Der passende Bewerber bewirbt sich direkt über ein Formular — statt dir nur eine formlose Mail zu schicken. Über Vorfilter-Fragen (z. B. Arbeitsmodell, Erfahrung, Verfügbarkeit) qualifiziert sich jeder Bewerber selbst, bevor seine Bewerbung bei dir landet.

Warum es funktioniert

Eine eigene, fokussierte Seite zieht genau die Bewerber an, die zu dir passen — statt einer Flut aus generischen Bewerbungen. Die Vorfilter-Fragen sortieren unpassende Kandidaten automatisch aus, bevor sie Arbeit machen. Das spart dir Zeit beim Sichten und sorgt dafür, dass du dich nur noch mit ernsthaften, passenden Bewerbern beschäftigst.

Im Zusammenspiel mit Meta Ads

Über Meta-Werbung führst du passende Kandidaten direkt auf deine Landingpage — und von dort in eine qualifizierte Bewerbung:

Anzeige Landingpage Bewerbungsformular (Vorfilter) Qualifizierte Bewerbung Gespräch Einstellung

Deine Vorteile

Passende Bewerber statt Masse

Eine fokussierte Seite zieht die Richtigen an — statt einer Flut aus unpassenden Bewerbungen.

Vorfilter spart Zeit

Die Vorfilter-Fragen sortieren unpassende Kandidaten automatisch aus, bevor sie bei dir landen.

Läuft automatisch

Bewerbungen kommen rund um die Uhr rein und werden direkt gesammelt — du musst nichts tun.

Planbarer Bewerber-Fluss

Du siehst alle Bewerbungen an einem Ort und behältst jederzeit den Überblick.

Anleitung · Schritt für Schritt

So baust du sie — Schritt für Schritt.

Kein Code Vorfilter-Formular Seite geht live
Zuerst

Claude Code einrichten

Bevor du loslegst, muss Claude Code einmal auf deinem Computer eingerichtet sein (Desktop-App + Git + einmalige Installation). Das machst du nur EINMAL — danach gilt es für alle Anleitungen.

Zum Setup-Guide →

Schon eingerichtet? Dann geht's direkt weiter.

Der Ablauf auf einen Blick

  • Ordner am Desktop anlegen
  • Toolkit-Dateien herunterladen & reinlegen
  • Projekt in der Desktop-App öffnen
  • Prompt starten & Fragen beantworten
  • Vorschau öffnen & Feinschliff
  • Test-Bewerbung durchklicken
  • Netlify-Account erstellen
  • Projektordner hochladen — Seite ist live
  • Subdomain einrichten (DNS-Eintrag)
1

Ordner anlegen

ca. 30 Sekunden

In diesem Ordner wird deine Landingpage entstehen — Texte, Design, alles an einem Ort.

  • Rechtsklick auf den Desktop → Neuer Ordner
  • Nenn ihn z. B. „Landingpage Recruiting"
  • Merk dir den Namen — den brauchst du gleich wieder
2

Toolkit-Dateien herunterladen & reinlegen

ca. 2 Min. · wichtigster Schritt

Das sind die Dateien, die Claude „beibringen", wie deine Recruiting-Landingpage aufgebaut werden soll. Das Herzstück des Systems — ohne sie funktioniert der ganze Prozess nicht.

Im Toolkit enthalten
CLAUDE.md FRAGEN-AN-DICH.md STRUKTUR.md Copy.md LEKTIONEN.md START-HIER.md
Toolkit herunterladen →
  • Die heruntergeladene ZIP-Datei doppelklicken, um sie zu entpacken
  • Alle Dateien aus dem entpackten Ordner in deinen Desktop-Ordner ziehen
  • Nichts umbenennen, nichts öffnen, nichts ändern — einfach reinlegen
  • Claude erkennt die Toolkit-Dateien später automatisch beim Start
Wichtig Ohne diese Dateien weiß Claude nicht, wie deine Landingpage aufgebaut werden soll. Bitte alle reinlegen — auch wenn du einzelne davon noch nie öffnen wirst.
3

Projekt in der Desktop-App öffnen

ca. 1 Minute

Die einmalige Einrichtung hast du im Setup-Guide erledigt. Ab jetzt arbeitest du komplett in der App — ohne Terminal.

  • Öffne die Claude Desktop-App
  • Klick oben auf den „Code"-Tab
  • Klick auf „Ordner wählen" (engl. „Select folder")
  • Wähle deinen Projektordner mit den Toolkit-Dateien aus Step 2
  • Claude erkennt die Toolkit-Dateien automatisch
🖥️ Komplett ohne Terminal Ab hier passiert alles in der Desktop-App. Das Terminal aus der Einrichtung brauchst du nie wieder.
4

Prompt starten & Fragen beantworten

ca. 20–30 Minuten

Jetzt geht's los. In Claude Code siehst du unten ein Eingabefeld — dort tippt man mit Claude wie in einem normalen Chat. Kopiere genau diesen Prompt und füge ihn dort ein:

Bau mir eine Recruiting-Landingpage. Nutze dafür das komplette Toolkit in diesem Ordner: CLAUDE.md, FRAGEN-AN-DICH.md, STRUKTUR.md, LEKTIONEN.md, Copy.md und START-HIER.md. Starte mit den Fragen aus Block 1 (Unternehmen).

Claude liest jetzt alle Dateien aus deinem Ordner, versteht den Aufbau und stellt dir dann Schritt für Schritt Fragen — zu deinem Unternehmen, der Position, deinem Wunschbewerber, Design und Tonalität. Aus deinen Antworten baut Claude die komplette Seite automatisch: die Startseite mit dem Bewerbungsformular (inkl. Vorfilter-Fragen) und die Dankesseite, auf der deine Bewerber nach dem Absenden landen — du musst dich um keine der Seiten selbst kümmern.

So läuft der Dialog ab

  • Claude stellt pro Nachricht nur 2–3 Fragen — du beantwortest sie in eigenen Worten
  • Enter drücken, Claude stellt die nächsten Fragen
  • So arbeitet ihr euch durch alle Themenblöcke — Schritt für Schritt
  • Unsicher bei einer Frage? Schreib „weiß nicht" oder „mach einen Vorschlag" — Claude gibt dir passende Optionen
  • Je ehrlicher und konkreter du antwortest, desto besser wird die Seite

Bilder einbauen — so geht's

Claude fragt dich im Verlauf, ob du eigene Bilder einbauen willst (z. B. Team-Fotos, dein Logo, Produkt-Bilder). Wenn ja:

  • Lege alle gewünschten Bilder direkt in deinen Desktop-Ordner (neben die Toolkit-Dateien)
  • Claude erkennt sie automatisch — du musst nichts hochladen oder verlinken
  • Nenn Claude einfach den Dateinamen, z. B. „Das Team-Foto heißt team.jpg" — oder lass Claude die Datei selbst finden
  • Formate: JPG, PNG, WebP oder SVG sind alle okay
Keine Bilder? Kein Problem. Wenn du noch keine eigenen Bilder hast, baut Claude die Seite mit eleganten Platzhaltern (z. B. Initialen-Kreisen statt Fotos). Du kannst später jederzeit echte Bilder nachreichen.

Videos einbetten — so geht's (Vimeo)

Claude fragt dich aktiv, ob du Videos einbetten willst (z. B. eine kurze Botschaft des Geschäftsführers / Teamleads, ein Office-Walkthrough, ein Mitarbeiter-Statement) — und wenn ja, an welcher Stelle. Standard ist immer ein eleganter Platzhalter, du kannst Videos jederzeit später nachreichen oder ganz weglassen und stattdessen Mitarbeiter-Statements in Textform mit Foto + Name + Rolle einbauen — auf Recruiting-Pages funktioniert Text oft genauso gut wie Video.

Wenn du echte Videos einbetten willst, läuft das über Vimeo. Der kostenlose Plan reicht völlig aus — bis zu 1 GB Speicher.

  • Auf vimeo.com kostenlos anmelden
  • Video hochladen
  • Privatsphäre-Einstellung auf „Public" / „Anyone can see" setzen — sonst kann das Video nicht eingebettet werden
  • Vimeo-Link kopieren (z. B. https://vimeo.com/123456789)
  • In Claude Code mit klarer Position-Anweisung einfügen, z. B.: „Bette dieses Vimeo-Video als Botschaft des Teamleads im Hero ein: https://vimeo.com/123456789"
Vorerst Platzhalter — bewusste Entscheidung Wenn du noch kein Video aufgenommen hast: lass Claude Platzhalter setzen. Die Seite kann sofort live gehen, du reichst Videos nach. Genauso legitim: Mitarbeiter-Statements / Testimonials in Textform mit Foto + Name + Rolle — das wirkt oft authentischer als ein Video.

Am Ende des Dialogs baut Claude automatisch die Startseite (index.html) und die Dankeseite (bewerbung-eingegangen.html).

5

Vorschau öffnen & Feinschliff

ca. 15–20 Minuten

Wenn Claude fertig gebaut hat, zeigt er die Seite im Preview-Panel. Falls nicht automatisch: diesen Prompt verwenden:

Öffne die Vorschau

Schau dir die Seite an. Passt etwas nicht, sag es Claude in eigenen Worten:

  • „Ändere die Hauptüberschrift zu: XYZ"
  • „Mach das Gold etwas dunkler"
  • „Füge noch einen Punkt bei den Aufgaben hinzu: ..."
  • „Die FAQ-Antwort zu Homeoffice ist zu lang, kürze sie"

Claude passt an, du schaust wieder in die Vorschau. So lange, bis alles sitzt.

6

Test-Bewerbung durchklicken

ca. 5 Minuten

Bevor du die Seite live stellst, klickst du einmal das Bewerbungsformular durch — damit du sicher bist, dass später wirklich jede Antwort bei dir ankommt.

  • Öffne deine Landingpage (Doppelklick auf die index.html in deinem Ordner)
  • Klick auf „Jetzt bewerben" — das Popup öffnet sich
  • Beantworte jede einzelne Frage und trag deine echten Kontaktdaten ein
  • Rechtsklick irgendwo auf der Seite → „Untersuchen" (oder F12) → Reiter „Netzwerk" öffnen
  • Klick auf „Bewerbung absenden" und beobachte im Netzwerk-Reiter den Eintrag, der erscheint
  • Klick auf diesen Eintrag → Reiter „Payload" oder „Formulardaten"
KRITISCH — alle Felder prüfen Im Payload müssen alle deine Antworten auftauchen — sowohl die Radio-Antworten (z. B. „Vollzeit vor Ort") als auch Name, E-Mail, Telefon. Wenn auch nur eine Antwort fehlt, kommen später echte Bewerbungen unvollständig an. In dem Fall: Claude schreiben „Eine Antwort fehlt im Submit — stelle sicher, dass das komplette Formular als statisches HTML im Quelltext steht (alle Steps)" und erneut testen.
Die scharfe Test-Bewerbung kommt nach dem Hochladen Dieser lokale Durchklick prüft nur, ob alle Felder erfasst werden. Ob die Bewerbung wirklich bei Netlify ankommt und du auf der Dankesseite landest, testest du erst live nach dem Hochladen (siehe Step 8) — denn das Formular-Handling und die Dankesseite funktionieren zuverlässig nur auf der echten Internet-Adresse, nicht in der lokalen Vorschau.
7

Netlify-Account erstellen

ca. 5 Min. · Free-Plan reicht

Netlify ist der Dienst, der deine Seite im Netz zugänglich macht. Das Wichtige vorweg: der kostenlose Plan reicht für eine normale Recruiting-Landingpage völlig aus — inklusive Formular-Handling.

  • Gehe auf netlify.com
  • Klick auf „Sign up" — am einfachsten mit Google-Account
  • Wähle zunächst den Free-Plan aus — du kannst jederzeit später upgraden
Free oder Pro? Der Free-Plan erlaubt 100 Formulareinsendungen pro Monat und unbegrenzte Deploys für eine Seite — das reicht für den Start locker. Erst wenn du regelmäßig über 100 Bewerbungen pro Monat bekommst, lohnt sich Pro (ca. 9 € / Monat). Fang mit Free an, du verlierst nichts dabei.
Zu Netlify →
8

Projektordner hochladen — Seite ist live

ca. 3 Minuten

Letzter technischer Schritt. Bei dieser Seite brauchst du keine ZIP-Datei — du ziehst einfach deinen kompletten Projektordner auf Netlify. Danach ist die Seite live — zunächst auf einer netlify.app-URL, deine eigene Subdomain folgt im nächsten Schritt.

  • Gehe auf app.netlify.com/drop
  • Zieh deinen ganzen Projektordner per Drag & Drop in das Feld — kein ZIP nötig
  • Netlify nimmt den kompletten Ordner und stellt die Seite sofort online
  • Du bekommst eine URL (z. B. mutiges-licht-1234.netlify.app) — deine Landingpage ist live
Zu Netlify Drop →

Jetzt scharf testen

Sobald die Seite live ist, machst du eine echte Test-Bewerbung über die echte Internet-Adresse — den lokalen Durchklick aus Step 6 hast du ja schon gemacht, hier zählt der Live-Test:

  • Öffne deine live Landingpage und klick dich durch das Bewerbungsformular wie ein echter Bewerber
  • Beantworte alle Vorfilter-Fragen und sende die Bewerbung ab
  • Prüf: Landest du danach auf der Dankesseite?
  • Prüf: Erscheint die Bewerbung im Netlify-Dashboard unter „Forms" (mit allen Antworten)?
Damit Netlify Bewerbungen erfasst — die Form-Erkennung Damit Netlify die Bewerbungen aus deinem Formular automatisch sammelt (Vorfilter-Antworten, Name, E-Mail, Telefon), muss das <form>-Tag das netlify-Attribut tragen. Claude setzt das automatisch, wenn du das mitgelieferte Toolkit nutzt — du musst nichts manuell ergänzen. So sieht ein korrekt vorbereitetes Formular aus (Beispiel aus der Netlify-Doku):
<form name="contact" netlify>
  <p>
    <label>Name <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Email <input type="email" name="email" /></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>
Wenn nach dem Upload keine Bewerbungen im Netlify-Dashboard unter „Forms" erscheinen: höchstwahrscheinlich fehlt das Attribut. Lösung: Claude in der Desktop-App bitten — „Stelle sicher, dass alle Formulare das netlify-Attribut tragen" — und den Ordner erneut auf Netlify ziehen.
Später Änderungen hochladen Wenn du später etwas ändern willst: in der Desktop-App über den „Code"-Tab anpassen lassen, dann den Ordner erneut auf Netlify ziehen. Die alte Version wird automatisch durch die neue ersetzt.
9

Subdomain einrichten (DNS-Eintrag)

ca. 10 Min. · optional, aber empfohlen

Deine Seite läuft jetzt auf einer netlify.app-URL (z. B. mutiges-licht-1234.netlify.app). Für einen professionellen Auftritt verbindest du sie mit einer eigenen Subdomain wie karriere.deinefirma.at oder bewerbung.deinefirma.at. Du musst keine neue Domain kaufen — eine Subdomain deiner bestehenden Domain reicht.

Schritt für Schritt

  • Im Netlify-Dashboard auf dein Projekt klicken → oben auf „Domain management"„Add a domain" / „Add custom domain"
  • Deine Wunsch-Subdomain eintragen, z. B. karriere.deinefirma.at → bestätigen
  • Netlify zeigt dir jetzt den exakten DNS-Wert an, den du beim Domain-Anbieter eintragen musst — typisch ein CNAME-Eintrag, der auf deine netlify.app-Adresse zeigt
  • In einem zweiten Tab beim Domain-Anbieter einloggen (World4You, IONOS, GoDaddy, Namecheap o. ä.) → „DNS-Einstellungen" / „DNS verwalten"„Neuer Eintrag"
  • Typ: CNAME · Name / Host: Subdomain-Teil ohne Hauptdomain (z. B. karriere) · Wert / Ziel: die netlify.app-Adresse aus Netlify · TTL: Standardwert lassen
  • Speichern. 15 Min. bis 24 Std. warten (DNS-Propagation). Netlify richtet das SSL-Zertifikat automatisch ein.
Wo finde ich die DNS-Einstellungen beim Anbieter? Im Kundenbereich einloggen → Reiter „Domains" oder „Meine Domains" → bei deiner Domain „DNS-Einstellungen", „DNS verwalten" oder „Nameserver / DNS". Wenn du es nicht findest, schreib dem Support deines Anbieters: „Wo finde ich die DNS-Einstellungen für meine Domain?" — die helfen sofort.
DNS braucht Zeit — Ruhe bewahren Nach dem Speichern dauert es zwischen 15 Minuten und 24 Stunden, bis die Subdomain weltweit erreichbar ist (DNS-Propagation). Wenn die Seite nach 5 Minuten noch nicht läuft: warten, nichts rückgängig machen.
SSL automatisch durch Netlify Sobald der DNS-Eintrag aktiv ist, richtet Netlify für deine Subdomain automatisch ein SSL-Zertifikat ein (das grüne Schloss im Browser). Du musst dich darum nicht kümmern.

Bonus: Meta Pixel einbinden

optional · bei Meta-Ads empfohlen

Wenn du über Meta (Facebook / Instagram) Werbung schaltest, willst du wissen, wer über deine Ads auf der Landingpage landet und sich bewirbt. Dafür brauchst du einen Meta Pixel — einen kleinen Tracking-Code, den Claude bereits als Platzhalter in deine Seite eingebaut hat.

Was du tun musst

  • Im Meta Business Manager einen Pixel erstellen (falls noch nicht vorhanden)
  • Deine Pixel-ID kopieren (eine lange Zahlenfolge)
  • Claude schreiben: „Setze meine Meta Pixel ID: [deine ID]" — Claude baut sie an den richtigen Stellen ein
  • Ordner erneut auf Netlify ziehen (siehe Step 8)
Ausführliche Schritt-für-Schritt-Anleitung Wie du einen Meta Pixel erstellst, einrichtest und konfigurierst, erklären wir dir im Salesforce-Kurs. Dort gehen wir klickgenau durch: Pixel anlegen, Events definieren, Zielgruppen aufbauen, mit Werbeanzeigen verknüpfen. Wenn du den Kurs noch nicht gemacht hast, schreib uns — wir schicken dir den Zugang.

Fertig.
Deine Landingpage ist live.

Bewerbungen über das Formular findest du in deinem Netlify-Dashboard unter „Forms". Wenn du später etwas ändern willst: zurück in die Desktop-App über den „Code"-Tab, Änderung sagen und den Ordner erneut auf Netlify ziehen — die alte Version wird automatisch ersetzt.

Häufige Fragen

Was kostet das alles zusammen?
Claude Pro (ca. 20 € / Monat) + Netlify Pro (ca. 9 € / Monat) = ca. 29 € / Monat. Beide Abos sind monatlich kündbar. Wenn du Claude nur zum Bauen nutzt, kannst du das Abo nach dem Launch pausieren — die Seite läuft auf Netlify weiter.
Was, wenn Claude etwas falsch macht?
Sag es ihm. „Das Icon liegt falsch, mach es mittig." oder „Der Text ist zu lang, kürze ihn auf 2 Sätze." Claude korrigiert sich sofort. Je konkreter deine Anweisung, desto besser.
Kann ich später noch Änderungen machen?
Jederzeit. Du öffnest dein Projekt wieder in der Desktop-App über den „Code"-Tab, sagst Claude die gewünschte Änderung, und ziehst danach den Ordner erneut auf Netlify. Die alte Version wird automatisch ersetzt.
Wie sehe ich die eingegangenen Bewerbungen?
Im Netlify-Dashboard unter „Forms". Du kannst zusätzlich eine E-Mail-Benachrichtigung einrichten — dann bekommst du jede neue Bewerbung sofort per Mail. Du brauchst kein Mailchimp und keine zusätzlichen Tools — Bewerbungen kommen direkt bei Netlify an.
Was, wenn keine Bewerbungen im Netlify-Dashboard erscheinen?
Zwei häufige Ursachen: (1) Das Formular wird per JavaScript erzeugt — Netlify scannt beim Build aber nur statisches HTML und sieht es dann nie. Das komplette mehrstufige Formular muss im Quelltext der index.html stehen (Steps werden nur per CSS ein-/ausgeblendet). (2) Dem <form> fehlt das netlify-Attribut oder das versteckte form-name-Feld passt nicht exakt zum Formularnamen. Beides macht Claude bei Verwendung des Toolkits automatisch. Wichtig: Das Formular erscheint im Netlify-Dashboard erst nach einem erfolgreichen Deploy. Falls trotzdem nichts ankommt: in der Desktop-App über den „Code"-Tab bitten „Stelle sicher, dass das Bewerbungsformular komplett als statisches HTML im Quelltext steht und das netlify-Attribut trägt", dann den Ordner erneut auf Netlify ziehen.
Wie binde ich ein Botschafts-Video vom Teamlead ein?
Über Vimeo — kostenloser Plan reicht (1 GB Speicher). Video hochladen, Privatsphäre auf „Public" / „Anyone can see" stellen, Link kopieren und Claude geben mit klarer Position-Anweisung — z. B. „Bette dieses Vimeo-Video als Botschaft des Teamleads im Hero ein: https://vimeo.com/123456789". Ohne Video setzt Claude einen Platzhalter — viele der besten Recruiting-Pages laufen ganz ohne Video, mit authentischen Mitarbeiter-Statements in Textform.
Brauche ich eine eigene Domain?
Nein. Netlify gibt dir automatisch eine kostenlose URL. Wenn du aber eine eigene Domain hast, kannst du sie mit einem Klick verbinden — wie das geht, zeigt dir Step 9 (Subdomain einrichten). Eine neue Domain musst du nicht kaufen — eine Subdomain wie karriere.deinefirma.at reicht völlig.
Ich komme nicht weiter — was jetzt?
Schreib uns. Wir schauen gemeinsam drüber und lösen's. Eine Landingpage zum Laufen zu bringen darf nicht an einem Schritt scheitern.