Hur man skapar ett Dropbox-uppladdningsformulär i WordPress

Filuppladdning i WordPress var frustrerande.

När jag brukade ge teknisk support beskrev mina kunder sina problem via e-post, men utan att se felloggar eller skärmdumpar sköt jag ofta i blindo.

Det var då jag upptäckte kraften i Dropbox-uppladdningsformulär i WordPress. Till skillnad från standarduppladdaren för media i WordPress, som hade begränsningar för filstorlek, var filstorlekar inte ett problem med Dropbox-uppladdningsformulär. Det hjälpte min hosting att hålla sig ren och jag kunde komma åt uppladdningar var som helst.

I den här artikeln kommer jag att visa dig exakt hur du skapar ett Dropbox-uppladdningsformulär som effektiviserar allt.

Varför använda Dropbox för formulärbilagor

Som standard sparar WordPress alla uppladdade filer direkt i ditt mediebibliotek. Även om detta fungerar för grundläggande användning, skapar det ofta problem när du kör avancerade WordPress-webbplatser, som en jobbportal eller en webbplats med flera inlämningsformulär.

Huvudproblemet är att WordPress inte automatiskt organiserar uppladdningar efter formuläret de kom ifrån. Detta leder till två stora utmaningar:

• Alla filtyper lagras tillsammans på ett ställe, vilket gör det svårt att hantera.
• Det finns inget sätt att kategorisera filer efter det specifika formulärinlägget de tillhör.

På så sätt kan det vara frustrerande och tidskrävande att hitta rätt fil som skickats in av en användare.

En annan nackdel är serverlagringsanvändningen, eftersom varje uppladdad fil tar upp plats på din värdplan. Stora filer, som dussintals PDF-dokument som tillsammans blir hundratals megabyte, kan snabbt sluka lagringsutrymme och till och med tvinga dig att uppgradera din värd.

Dessutom saknar WordPress mediebibliotek avancerade funktioner för filhantering, som behörighetskontroll. Det innebär att det alltid finns en risk för oavsiktlig radering utan enkel återställningsmöjlighet.

Genom att ansluta dina WordPress-formulär till Dropbox löser du alla dessa problem. Uppladdade filer lagras säkert i molnet, snyggt organiserade och kommer inte att sakta ner din webbplats eller ta upp lagringsutrymme på servern.

Denna konfiguration fungerar särskilt bra för formulär som samlar in stora, viktiga filer, såsom:

• Jobbportaler för att hantera CV:n, personliga brev och portföljer
• Projektförslagsformulär för att hantera förslag, budgetar och stödjande dokument
• Anmälningsformulär för evenemang för ID-skanningar, friskrivningar och samtyckesformulär
• Formulär för skol- eller kursregistrering för att skicka in uppgifter, betyg och projekt
• Och många fler…

I den här artikeln kommer jag att visa dig den exakta metoden vi använder för att ansluta våra WordPress-formulär till Dropbox. Här är en snabb översikt över alla steg vi kommer att täcka i den här guiden:

1. Installera och aktivera WPForms
2. Anslut WPForms till ditt Dropbox-konto
3. Skapa ditt formulär för filuppladdning till Dropbox
4. Konfigurera formulärmeddelanden och bekräftelse
5. Configure Dropbox Storage Settings
6. Testa och publicera ditt formulär
7. Bonustips: Spåra dina WordPress-formulärinlämningar
8. Vanliga frågor: Dropbox filuppladdningsformulär i WordPress
9. Andra hjälpsamma guider för att använda formulär i WordPress

Redo? Låt oss börja.

Steg 1: Installera och aktivera WPForms

Det enklaste sättet att skapa ett Dropbox-formulär i WordPress är att använda WPForms. Det är den bästa kontaktformulärplugin för WordPress och erbjuder förbyggda mallar, en dra-och-släpp-formulärbyggare och premiumintegrationer.

Vi använder WPForms för att skapa formulär för att ta emot jobbansökningar och erbjuda teknisk support som hanterar stora mediefiler. Oavsett om det är ett kontaktformulär eller våra årliga användarundersökningar, gör WPForms processen enkel. Se vår fullständiga WPForms-recension för att se vad det kan göra.

Först installerar och aktiverar vi pluginet WPForms. För mer detaljer kan du läsa vår artikel om hur man installerar ett WordPress-plugin.

Efter aktivering måste du gå till WPForms » Inställningar från din WordPress-instrumentpanel och ange din licensnyckel. Du hittar enkelt licensnyckeln i ditt WPForms kontoområde.

Steg 2: Anslut WPForms till ditt Dropbox-konto

Innan du kan börja skicka filer till Dropbox måste du installera Dropbox-tillägget och ansluta dina konton.

För att börja kan du gå till WPForms » Tillägg från din WordPress-instrumentpanel. På nästa skärm, scrolla ner tills du hittar tillägget 'Dropbox' i listan och klicka på knappen 'Installera tillägg'.

Tillägget laddas ner, installeras och aktiveras automatiskt.

Efter aktivering kan du ansluta ditt Dropbox-konto.

För att göra detta, navigera till WPForms » Inställningar från din WordPress-instrumentpanel. Klicka sedan på fliken ‘Integrationer’ högst upp på inställningssidan.

Klicka på Dropbox-sektionen för att expandera den.

Därefter kan du klicka på knappen 'Lägg till nytt konto' för att starta integrationen.

Detta öppnar ett nytt fönster eller en ny flik som tar dig till Dropboxes auktorisationssida. Om du inte redan är inloggad på Dropbox måste du ange dina Dropbox-uppgifter.

Sedan kommer Dropbox att be om tillstånd att tillåta WPForms att komma åt ditt konto. Du kan granska behörigheterna noggrant. Men generellt sett kommer WPForms att behöva åtkomst för att skapa mappar och ladda upp filer till ditt Dropbox-konto.

Därefter kan du klicka på 'Tillåt' för att ge dessa behörigheter.

Efter auktorisering kommer du att omdirigeras tillbaka till din WordPress-webbplats.

Du bör se ett bekräftelsemeddelande om att ditt Dropbox-konto har anslutits framgångsrikt till WPForms.

Steg 3: Skapa ditt Dropbox filuppladdningsformulär

Nu kan du börja bygga ditt Dropbox-uppladdningsformulär.

Navigera helt enkelt till WPForms » Lägg till ny från ditt WordPress adminområde.

Detta tar dig till sidan Inställningar.

Här är det första du vill göra att namnge ditt formulär. Jag rekommenderar att använda ett tydligt, beskrivande namn, så att det är lätt att känna igen senare, särskilt om du skapar flera formulär.

Till exempel namngav jag vårt formulär "Dropbox Upload Form".

Därefter väljer du hur du vill bygga ditt formulär: börja med ett tomt formulär, använd AI Form Builder, eller välj bland färdiga mallar.

Om du vill använda den AI-drivna formulärbyggaren kan du bara skriva en enkel prompt som beskriver ditt formulär och vänta på att verktyget genererar det åt dig. Det tar bara några sekunder.

För den här handledningen kommer jag dock att visa dig stegen med hjälp av den färdiga mallen Filuppladdningsformulär.

Eftersom WPForms har över 2 000 mallar att välja mellan är det enkelt att välja en som matchar dina behov och sedan anpassa den för att passa ditt projekt perfekt.

Du kan skriva 'Uppladdningsformulär' i sökfältet för att begränsa dina alternativ. Dessa mallar innehåller redan den grundläggande strukturen för att samla in filer tillsammans med användarinformation.

När du har hittat den bästa för ditt formulär, hovra bara över den och klicka på 'Använd mall'.

Detta öppnar dra-och-släpp-formulärbyggaren.

Här kan du se att mallen inkluderar standardfält som Namn, E-post, ett fält för filuppladdning och mer.

Därefter klickar vi på fältet 'Filuppladdning' för att anpassa det.

För att undvika att gräva igenom en röra av filer som "document(1).pdf" eller "image.jpeg", rekommenderar jag att lägga till en kort notering nära fältet för filuppladdning med riktlinjer för namngivning.

Här är några exempel för olika användningsfall:

• ✅ "John-Doe-Resume.pdf" för jobbansökningsformulär
• ✅ “Projekt-XYZ-Förslag.pdf” för inlämningsformulär
• ✅ "Event-Photos-July2024.zip" för medieuppladdningar

Lägg till en anteckning, som "Namnge din fil i detta format: Förnamn-Efternamn-ProjektNamn.pdf", i fältet 'Beskrivning'.

Under 'Beskrivning' hittar du fler anpassningsalternativ för fältet för filuppladdning. Här kan du:

• Begränsa filtyper, som .pdf, .jpg, .svg, eller .docx. Ange bara de format du vill ha, separerade med kommatecken
• Ange maximal filstorlek i megabyte för att förhindra överstora uppladdningar
• Begränsa antalet filer en användare kan ladda upp

Till exempel tillät jag .pdf-, .jpg- och .docx-filer upp till 10 MB vardera, med högst 5 uppladdningar.

Om din webbplats betjänar användare i EU (eller andra regioner med integritetslagar som CCPA), måste du inhämta uttryckligt samtycke innan du samlar in personuppgifter eller filer – särskilt om dessa filer lagras i tredjepartstjänster som Dropbox.

För att acceptera användares samtycke kan du dra fältet 'Kryssrutor' från den vänstra panelen och släppa det i formulärets förhandsgranskningsområde.

Sedan kan du anpassa dess beskrivning genom att klicka på fältet.

Du kan skriva något i stil med "Jag godkänner att min uppladdade fil lagras säkert i Dropbox" och göra det obligatoriskt. Detta säkerställer att användarna förstår vart deras filer går och ger dig korrekt tillstånd att lagra dem.

Glöm inte att ta bort de återstående valen med hjälp av '-'-ikonen, eftersom du inte behöver dem.

Därefter kanske du vill dölja fältetiketten för att hålla ditt Dropbox-uppladdningsformulär rent och minimalistiskt.

Byt bara till fliken 'Avancerat' och slå på alternativet 'Dölj etikett'.

Det här är allt du behöver för att skapa ett Dropbox-uppladdningsformulär. Om du vill gå längre, dra och släpp bara nya fält i formuläret och redigera deras detaljer.

Steg 4: Konfigurera formulärmeddelanden och bekräftelse

När du är nöjd med hur ditt formulär ser ut, gå till fliken 'Inställningar' för att konfigurera aviseringar och bekräftelser.

Under avsnittet ‘Aviseringar’ kommer du att märka att WPForms är inställt för att automatiskt skicka en e-postavisering till webbplatsadministratören när någon skickar in formuläret.

Om du vill skicka aviseringar till flera mottagare kan du göra det också. Lägg bara till deras e-postadresser i fältet 'Skicka till', separerade med kommatecken.

I avsnittet 'Bekräftelse' kan du välja vad användarna ser efter att ha skickat in formuläret. Det bästa är att du kan anpassa dem också:

• Meddelande – Visar ett enkelt bekräftelsemeddelande. Varje mall kommer med ett standardmeddelande, men du kan enkelt redigera det för att matcha ditt varumärkes ton.
• Visa sida – Bestäm vart du vill skicka användare inom din webbplats, som en tack-sida, efter att de har skickat in formuläret.
• Gå till URL (Omdirigera) – Omdirigera användare till vilken länk du vill, inklusive en extern webbplats, en anpassad landningssida eller ett specialerbjudande.

Steg 5: Konfigurera Dropbox-lagringsinställningar

I det här steget väljer du exakt vilken Dropbox-mapp de uppladdade filerna ska sparas till.

Det bästa? WPForms gör det enkelt – du kan ställa in Dropbox-destinationen direkt i formulärbyggaren, utan att behöva lämna din WordPress-instrumentpanel.

Tilldela en Dropbox-mapp i WPForms

Från WPForms-byggaren, gå till panelen Inställningar » Dropbox. Klicka sedan på 'Lägg till ny anslutning'.

I popup-fönstret som visas kan du ge din anslutning ett beskrivande namn som "Klientfiluppladdningar" eller "Ansökningsinlämningar".

Du kan också bara använda samma namn som ditt filuppladdningsformulär.

Nu, för Dropbox-kontot, kommer WPForms automatiskt att upptäcka den tillgängliga integrationen.

I fältet ‘Mappnamn’ kan du helt enkelt ange vilket namn du vill. WPForms kommer då att skapa en ny Dropbox-mapp inuti Apps/WPForms/[Mappnamn].

Därefter, under 'Lagringsplats', kan du välja var de uppladdade filerna ska lagras.

Standardinställningen är: “Alla fält för filuppladdning” går till mappen “Rot”. Detta innebär att alla fält för filuppladdning sparas i mappen du just skapade.

Mappa fält för filuppladdning till olika undermappar (valfritt)

Vill du hålla saker mer organiserade? Detta valfria steg låter dig automatiskt sortera filer från olika uppladdningsfält i separata undermappar i Dropbox.

Till exempel kan du ha CV:n sparade i en mapp och personliga brev i en annan, vilket gör det mycket enklare att hantera inlämningar.

Om du är okej med att alla filer hamnar i en mapp kan du hoppa vidare till avsnittet ‘Ställ in villkorlig logik’ nedan.

För att ställa in mappning av filuppladdningar måste du först manuellt skapa undermappar i ditt Dropbox-konto.

Låt oss öppna en ny flik, gå till Dropbox-webbplatsen och logga in på ditt konto. I din Dropbox-instrumentpanel kan du navigera till Alla filer » Appar och klicka på mappen 'WPForms'.

På nästa skärm ser du mappen för nedladdningsbar filuppladdning som du just skapade.

Låt oss klicka på den för att skapa undermappar.

Detta öppnar Dropbox Upload Form, där alla dina filer kommer att lagras.

Klicka bara på 'Skapa en mapp' för att ställa in din första undermapp.

I popup-fönstret som visas kan du skriva in ett namn för din undermapp.

Klicka sedan på knappen ‘Skapa’.

Härifrån kan du lägga till så många undermappar som du behöver.

Och du kommer att se alla dina undermappar listade i mappen Dropbox Upload Form, så här:

När du är klar kan du återgå till WPForms formulärbyggare-fliken för att skapa din filuppladdningsmappning.

Använd bara knapparna ‘+’ och ‘-‘ för att lägga till eller ta bort inställningar.

I rullgardinsmenyn 'Filuppladdningsfält' ser du alla filuppladdningsfält i ditt formulär.

Välj ett fält för filuppladdning att lägga till.

Sedan kan du välja vilken undermapp de ska lagras i under 'Mapp för att lagra data'.

Klicka bara på rullgardinsmenyn för att expandera och välj undermappen.

Du kan upprepa processen för alla filuppladdningsfält du har.

Konfigurera villkorlig logik för filuppladdningar

Låt oss sedan se till att dina filer endast lagras i Dropbox när användarna ger sitt uttryckliga medgivande. WPForms gör detta enkelt med sin smarta villkorliga logikfunktion.

Du kan klicka på 'Aktivera villkorlig logik' för att börja.

Detta öppnar konfigurationsavsnittet där du kan ställa in villkorsstyrd logik för att endast bearbeta uppladdningar när samtyckesrutan är markerad.

Sedan kan du konfigurera det så här:

1. I den första rullgardinsmenyn, välj alternativet 'Bearbeta'. Detta ställer in en regel som talar om för WPForms: 'Skicka endast filen till Dropbox' om följande villkor är uppfyllt.
2. I nästa fält, välj ditt kryssrutor-fält. Detta bör vara det fält där användare ger tillstånd för molnlagring.
3. Ställ in villkoret till ‘är’.
4. Från den sista rullgardinsmenyn, välj alternativet 'Jag godkänner att mina uppladdningar lagras i Dropbox' (eller vilken formulering du nu använde).

Med den här inställningen kommer WPForms bara att skicka filer till Dropbox när användare aktivt markerar tillståndsrutan.

Aktivera rensningsalternativet (valfritt)

Slutligen finns det ett städalternativ för att automatiskt ta bort filer från din WordPress-webbplats efter att de har lagrats säkert i Dropbox.

Genom att aktivera detta blir WordPress mediebibliotek inte rörigt med uppladdningar som du redan har lagrat i Dropbox.

För att aktivera detta måste du först expandera sektionen 'Avancerade alternativ'. Därefter kan du växla alternativet 'Ta bort lokala filer efter uppladdning'.

Härifrån kan du klicka på 'Spara' för att lagra dina Dropbox-konfigurationsinställningar.

Steg 6: Testa och publicera ditt formulär

Innan du gör ditt formulär live måste du absolut testa allt.

Börja med att förhandsgranska ditt formulär i WPForms-byggaren. Klicka sedan bara på knappen 'Förhandsgranska' högst upp i formulärredigeraren för att se exakt hur ditt formulär kommer att se ut för besökare.

På förhandsgranskningsfliken vill du kontrollera att alla dina fält visas korrekt och att ytterligare anteckningar är lätta att förstå.

För det verkliga testet kan du fylla i formuläret helt med testinformation.

Detta låter dig kontrollera om formulärvalideringen fungerar. Till exempel, om ett obligatoriskt fält hoppades över eller om ett värde angavs i fel format.

Du kan också ladda upp en exempel fil från din dator.

Du kan sedan klicka på knappen ‘Skicka’ och se om ditt anpassade bekräftelsemeddelande visas.

Här är min, till exempel:

Nu kan du kontrollera om du har mottagit din testinlämning.

På den här fliken kan du öppna ditt WordPress-adminområde, navigera till WPForms » Inlägg och klicka på formuläret för filuppladdning från listan.

I listan över formulärposter kan du se länkar till höger.

Klicka på 'Visa' för att öppna postdetaljerna.

På nästa skärm bör du kunna se all information du skickade in i formuläret.

För att kontrollera om din uppladdade fil har skickats till Dropbox, för muspekaren över länken och se om den visar en Dropbox-URL längst ner till vänster.

Om du inte aktiverade rensningsalternativet i steg 5, kommer du istället att se länken 'Visa i Dropbox' tillsammans med de uppladdade filerna.

Detta beror på att filerna lagras på både WordPress och Dropbox.

När du har verifierat att allt fungerar korrekt kan du återgå till din formulärbyggare och bädda in ditt formulär på din WordPress-webbplats.

Härifrån klickar vi på knappen 'Bädda in'.

På popup-fönstret som visas kommer WPForms att fråga var du vill lägga till ditt formulär: en befintlig sida eller en ny sida.

För den här handledningen väljer jag 'Välj befintlig sida', men processen är ganska liknande för båda.

Därefter kan du välja en sida med hjälp av rullgardinsmenyn. Du kommer att se en uppmaning att namnge din nya sida istället om du väljer den vägen.

Klicka på ‘Låt oss köra!’

Detta tar dig till WordPress blockredigerare.

Härifrån kan du klicka på '+' -knappen och lägga till WPForms-blocket.

Nu bör du se WPForms-nedrullningsmenyn i din innehållsredigerare.

Expandera helt enkelt rullgardinsmenyn och välj Dropbox-uppladdningsformuläret du just skapade.

WordPress kommer sedan att ladda formuläret i innehållsredigeraren.

För att göra saker tydligare kan du aktivera alternativet 'Visa titel' i panelen till höger. Detta kommer att visa formulärets titel för användarna.

Om allt ser bra ut redan kan du sedan fortsätta och klicka på 'Spara' eller 'Publicera'.

Nu, om du besöker din sida, kommer du att se ditt Dropbox-uppladdningsformulär i aktion:

Bonustips: Spåra dina WordPress-formulärinlämningar

När ditt Dropbox-uppladdningsformulär är live är det en bra idé att spåra hur användarna interagerar med det. På så sätt kan du se hur många som börjar fylla i det, hur många som slutför sina uppladdningar och var du kan tappa inlämningar.

För att spåra dina formulär på detta sätt behöver du först ett Google Analytics-konto.

Det enklaste sättet att ansluta din webbplats till Google Analytics är att använda MonsterInsights, den främsta Google Analytics-pluginen. Den kan hjälpa dig att automatiskt spåra formulärinlämningar, inklusive formulär för filuppladdning, tack vare dess Forms-tillägg.

På WPBeginner använder vi faktiskt MonsterInsights själva för många spårningsuppgifter. För mer insikter om pluginet, se vår fullständiga recension av MonsterInsights.

När du har installerat tillägget och data börjar komma in kan du se visningar, konverteringar och konverteringsgrader för alla dina WordPress-formulär.

Detta hjälper dig att identifiera om användare slutför uppladdningar eller överger formuläret halvvägs, så att du kan optimera för bättre resultat.

För mer information kan du se vår guide om hur du spårar och minskar formulärabstinens i WordPress.

Vanliga frågor: Dropbox filuppladdningsformulär i WordPress

Här är svar på några av de vanligaste frågorna om inställning av filuppladdningar

Kan jag begränsa filtyper och storlek för uppladdningar?

Ja, absolut. WPForms ger dig full kontroll över fältet för filuppladdning, vilket är något jag tycker är otroligt användbart för att hantera inlämningar på min egen webbplats.

När du klickar på fältet 'Filuppladdning' i formulärbyggaren kan du ange tillåtna filändelser (som .pdf, .jpg, .docx) och ställa in en maximal filstorlek i megabyte. Detta förhindrar användare från att ladda upp otillåtna eller för stora filer.

Är denna process säker?

Ja, hela processen är säker. WPForms hanterar formulärinlämningen säkert på din WordPress-webbplats, och överföringen till Dropbox är också krypterad.

Vad händer om mitt Dropbox-konto är fullt?

Om ditt Dropbox-konto får slut på lagringsutrymme kommer filuppladdningen från ditt formulär att misslyckas. WPForms kommer fortfarande att spara användarens inskickade information i din WordPress-instrumentpanel, men själva filen kommer inte att skickas till Dropbox.

Andra hjälpsamma guider för att använda formulär i WordPress

Jag hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett Dropbox-uppladdningsformulär i WordPress. Därefter kanske du också vill se våra guider om:

• Hur man anpassar och stylar dina WordPress-formulär
• Hur du visar ett flytande kontaktformulär i WordPress
• Hur man skapar flerspråkiga formulär i WordPress
• Hur jag blockerade 18 000 skräppost-leadattacker i mitt WordPress-formulär
• Hur man automatiskt exporterar WordPress-formulärinlägg
• Hur man skapar ett anpassat Airtable-formulär i WordPress
• Hur du ansluter Salesforce till dina WordPress-formulär
• WordPress-formulär fungerar inte: Felsökningstips

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.