Für eine professionelle Unternehmenswebsite ist ein Karriereportal unerlässlich, das Bewerbern die Möglichkeit gibt, sich direkt online zu bewerben. Ein zentrales Feature hierbei ist die Möglichkeit, Dokumente wie Lebenslauf oder Anschreiben hochzuladen. Bei Webflow gibt es diese Upload-Funktionalität allerdings erst im "Business Plan" für $39. Das bedeutet einen Aufpreis von $26 gegenüber dem regulären "CMS Plan" – viel Geld für nur eine zusätzliche Funktion. Um kosteneffizienter zu agieren, benutzen wir einen Workaround: Wir nutzen Uploadcare, das für unsere Bedürfnisse völlig kostenfrei ist.
In diesem Artikel zeige ich dir, wie du Uploadcare auf deine Seite integrierst und den Upload Button an dein Design anpasst.
Uploadcare Set-Up in Webflow
Schritt 1: Einrichtung bei Uploadcare
- Erstelle zuerst deinen Account bei Uploadcare.
- Leg danach ein neues Projekt an.
- Innerhalb des Projekts findest du den Bereich "API Keys". Klicke darauf und notiere oder speichere den angezeigten Schlüssel sicher.
- Wichtig: Unter dem Reiter "Billing" in deinem Account solltest du deine Kreditkarteninformationen hinterlegen. Andernfalls kannst du nur Bilder hochladen. Keine Sorge, obwohl der Basisplan kostenlos ist, zieht Uploadcare einmalig 1$ zur Verifizierung ab und überweist diesen Betrag sofort zurück.
Schritt 2: Anpassung in Webflow
- Gehe in dein Webflow Projekt.
- Füge diesen Custom Code in den "Head Code" deiner Website ein:
<script>
UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';
</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="Webflow"></script>
Ersetze 'YOUR_PUBLIC_KEY' mit deinem API Key, den du bei Uploadcare gespeichert hast.
Schritt 3: Formularbearbeitung
- In Webflow kannst du dieses bereits vorhandenes Formular duplizieren [https://webflow.grsm.io/uploadcare-template*] oder ein komplett neues Formular im Designer erstellen.
- Wenn du das bereitgestellte Formular nutzt, ist das Input-Feld mit den notwendigen Attributen bereits vorhanden. Achte nur darauf, deinen API Key, wie im Schritt 2 erklärt, einzufügen. Gehe direkt zu Schritt 5, falls du das vorgefertigte Formular benutzt.
Schritt 4: Anpassung des Formulars
- Füge in deinem Formular ein Input-Feld hinzu.
- In den Einstellungen des Feldes (rechts, symbolisiert durch ein Zahnradsymbol), füge dem Feld das Attribut role="uploadcare-uploader" und data-multiple="true" hinzu.
- Damit das Input-Feld nicht sichtbar ist, stelle es auf "versteckt" (display: none).
- Der Uploadcare-Button ersetzt bei Livegang dieses Element und wird für den Nutzer sichtbar angezeigt
Schritt 5: Abschluss
- Das war's! Du kannst nun deine Seite in Webflow veröffentlichen. Dein Basis-Upload-System ist jetzt einsatzbereit.
- Teste die Funktionalität und achte darauf, dass du jeden Schritt vollständig abgeschlossen hast. Danach kannst du bei Bedarf weitere Anpassungen vornehmen.
- Da die Basis nun steht, können wir uns um die Feinheiten kümmern
Anpassen des Uploadcare-Buttons an dein Design
Wenn dir der Standard-Upload-Button von Uploadcare nicht zusagt, kannst du ihn einfach anpassen und simulieren. Hier sind die Schritte dazu:
Schritt 1: Button-Design
- Füge deinem Formular einen neuen Button hinzu.
- Weise diesem Button die Klasse "button-upload-simulation" zu.
- Gestalte den Button in Webflow nach deinen Vorstellungen.
Schritt 2: Standard-Button ausblenden
- Gehe zum Custom Code-Bereich deiner Seite.
- Im Head-Bereich fügst du den folgenden Code ein. Dieser blendet den Standard-Uploadcare-Button aus:
<style>
.uploadcare--widget__button {
display: none !important;
}
</style>
Schritt 3: Original-Button simulieren
- Im Footer-Bereich deiner Seite fügst du dieses JQuery-Snippet ein.
- Das Snippet stellt sicher, dass wenn du den "button-upload-simulation" klickst, im Hintergrund auch der original Uploadcare-Button aktiviert wird:
<script>
$('.button-upload-simulation').on('click', function()
{
$('.uploadcare--widget__button').click();
});
</script>
So kannst du den Uploadcare-Button in dein Design einbinden und seine Funktionalität bleibt erhalten.
Fazit
Prinzipiell finde ich es schwach, dass Webflow für den doch schon relativ hohen Preis von $23 dieses Feature nicht nativ anbietet. Aber solange das Unternehmen bei seiner Meinung bleibt können wir mit diesem Workaround in kürzester Zeit eine Uploadfunktionalität integrieren. Der Workaround spart nicht nur Geld, sondern ermöglicht es dir auch, ein Bewerbungsportal genau nach deinen Vorstellungen zu gestalten.
Vor allem für KMU’S wie Handwerksbetriebe oder auch Agenturen bringt eine Bewerbung direkt über Webflow Formulare viele Vorteile mit sich.
Mit Sternchen * markierte Links sind Affiliate-Links.
