Jag brukade be folk att mejla mig sina foton till min webbplats. Profilbilder för medlemswebbplatser, porträttbilder för teamsidor, till och med enkla ID-verifieringsbilder – och varje gång blev det ett krångligt fram och tillbaka.
Folk glömde att bifoga filen. Eller så skickade de en bild som var alldeles för stor. Ibland tog de en skärmdump av ett foto istället för att skicka den faktiska bilden, och kvaliteten blev hemsk.
Sedan insåg jag att jag kunde låta folk ta foton och spela in videor via mina WordPress-formulär. De behöver bara klicka på en knapp, ta ett foto (eller spela in en snabb video), och det är allt.
I den här guiden visar jag dig hur du lägger till den här kamerafunktioner till dina WordPress-formulär så att du kan slippa allt besvär jag gick igenom.
Varför lägga till live kamerainspelning i WordPress-formulär?
Live kamerainspelning i dina WordPress-formulär gör det mycket snabbare och enklare för folk att skicka in foton eller videor. Detta kan leda till att fler användare faktiskt slutför ditt formulär.
Tänk på vad som händer när du ber någon att ladda upp ett foto till ditt kontaktformulär. De måste sluta med det de gör, öppna sin kameraapp, ta fotot, stänga kameran, hitta fotot i sitt galleri och sedan komma tillbaka för att ladda upp det.
Det är många steg. Och varje extra steg är ytterligare en chans för någon att ge upp och överge ditt formulär.
Med ett fält för live kamerainspelning kan personer ta foton eller spela in videor utan att någonsin lämna formuläret. De klickar på en knapp, kameran öppnas direkt i deras webbläsare, och de är klara på sekunder.
Detta är viktigare än du kanske tror. Jag har sett andelen ifyllda formulär öka markant bara genom att ta bort friktionen från traditionella filuppladdningar.
Här är några verkliga situationer där kamerainspelning gör en enorm skillnad:
| Webbplatstyper | Användningsfall |
|---|---|
| Kundsupportteam | Låt folk visa sitt problem istället för att försöka beskriva det med ord. |
| Fastighets-/ fastighetssajter | Få hyresgäster att dokumentera underhållsproblem på plats istället för att skicka foton fram och tillbaka via sms. |
| Skolor/e-lärandeplattformar | Samla in elevfoton under onlineantagningar utan att be föräldrar att mejla separata filer. |
| Försäkringsbolag | Snabba upp skadeanmälningar genom att låta kunder fotografera skador omedelbart. |
Det bästa med att använda ett plugin för detta ändamål är att allt organiseras automatiskt.
När någon skickar in ditt formulär, bifogas deras foto eller video till deras inlägg tillsammans med all deras annan information. Ingen mer jakt i din inkorg för att försöka matcha foton med rätt person. ✨
Med det sagt, jag kommer att visa dig alla steg för att lägga till en kamerainspelningsfunktion till dina WordPress-formulär. Här är allt jag kommer att täcka i den här guiden:
- Steg 1: Installera och aktivera WPForms Pro
- Steg 2: Lägg till kamerfältet i ditt formulär
- Steg 3: Konfigurera formulärets kamerfält
- Step 4: Set Up Button Style, Storage, and Access Settings
- Steg 5: Ställ in formulärmeddelanden och bekräftelser
- Steg 6: Testa och bädda in ditt formulär
- Vanliga frågor om att ta live kamerabilder eller videor i WordPress-formulär
- Fler guider för att använda WordPress-formulär
Steg 1: Installera och aktivera WPForms Pro
I den här guiden kommer jag att använda WPForms, som är den bästa kontaktformulärplugin för WordPress. Jag valde detta plugin eftersom det har ett fält för kamerafångst, som du enkelt kan lägga till med en enkel dra-och-släpp-funktion.
Du kan också använda WPForms för att skapa massor av olika formulär, inklusive kontaktformulär, onlinebeställningsformulär med betalningar, omröstningar och undersökningar, och nyhetsbrevsregistreringar.
På WPBeginner använder vi WPForms för alla våra formulär – kontaktformulär, förfrågningar om webbplatsmigrering, den årliga läsarundersökningen och mer. Vi är stora fans av detta verktyg, och du kan läsa mer om det i vår kompletta WPForms-recension.
Gå först till WPForms webbplats för att skapa ett konto. Klicka på knappen 'Get WPForms Now', välj en plan som passar dina behov och slutför registreringen.
💡 Notera: Du behöver WPForms Pro för att få tillgång till kamerafångstfunktionen, plus extrafunktioner som villkorlig logik och formulärmallar. Med det sagt kan du fortfarande komma igång med den kostnadsfria WPForms-versionen om du vill prova pluginet först.
Efter registrering bör du kunna hitta pluginets zip-fil och licensnyckel i ditt WPForms-kontos instrumentpanel. Du kan ha den här fliken öppen eller förvara din fil och nyckel någonstans säkert, som en lösenordshanterare.
Låt oss nu gå till din WordPress-instrumentpanel och navigera till Plugins » Lägg till nytt plugin.
På nästa skärm kan du använda sökfältet för att leta efter WPForms-pluginet.
Klicka på 'Installera nu' i sökresultatet och 'Aktivera' när det visas.
Om du behöver hjälp, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering, gå till WPForms » Inställningar från ditt adminområde för att aktivera din WPForms Pro-licens.
Kopiera helt enkelt din licensnyckel och klistra in den i rutan. Klicka sedan på knappen 'Verifiera nyckel'.
WPForms kommer att bekräfta att din licens är aktiv. Du är nu redo att börja bygga formulär med kamerafångst.
Steg 2: Lägg till kamerfältet i ditt formulär
I det här steget skapar du ett formulär med kamerafångstfunktionen.
För att börja kan du navigera till WPForms » Lägg till nytt i din WordPress admininstrumentpanel.
Detta tar dig till installationssidan, där du kan namnge ditt formulär.
Detta är endast för din referens, men jag rekommenderar att du använder ett tydligt, beskrivande namn för enklare organisation när du skapar fler WordPress-formulär.
Därefter väljer du hur du ska bygga ditt formulär.
WPForms låter dig skapa formulär med en tom duk, en AI-driven formulärbyggare eller en färdig mall.
Med WPForms AI behöver du bara skriva en enkel prompt. AI-formulärbyggaren genererar den åt dig på några sekunder.
För den här handledningen kommer jag dock att använda mallen Enkelt kontaktformulär.
WPForms levereras med över 2 000 färdiga formulärmallar, så det är lätt att hitta en som passar dina behov.
Om du vill ha steg-för-steg-instruktioner, se vår guide om hur man skapar ett kontaktformulär i WordPress.
När ditt formulär öppnas i byggaren, titta på sidofältet till vänster där alla formulärfält listas. Bläddra ner tills du hittar sektionen märkt 'Fancy Fields'.
Precis där, bredvid fältet för filuppladdning, ser du fältet ‘Kamera’. Du kan dra och släppa det var du vill att det ska visas i ditt formulär.
💡 Notera: Fältet Filuppladdning är bäst för att samla in filer som användare redan har på sin enhet, som sparade foton eller PDF-filer. För den här handledningen fungerar Kamera-fältet bättre eftersom det låter användare ta ett foto eller spela in en video på plats utan att lämna formuläret.
Du kommer att märka att en liten kameraikon visas i din formulärförhandsgranskning. Det är den som dina användare kommer att klicka på för att ta sitt foto eller sin video.
En sak jag fann intressant med den här funktionen är att när någon klickar på kameraknappen på en bärbar dator eller stationär dator, ser de en vänlig 3-sekunders nedräkning före fotograferingen. Detta ger dem precis tillräckligt med tid att le eller justera sin vinkel.
Här är hur det kan se ut i förhandsgranskningen:
Där har du det – jag sa ju att den här delen var snabb!
Steg 3: Konfigurera ditt formulärs kamerafält
Härifrån kan du konfigurera ditt kamerafält.
Klicka på fältet ‘Kamera’ som du just lade till för att öppna panelen ‘Fältalternativ’ på vänster sida. Det är här du anpassar hur kamerafångsten fungerar.
Det första du kommer att se är inställningen ‘Etikett’.
Som standard kallas fältet Kamera, men du kan byta namn på det för att matcha det du samlar in. Till exempel: Profilbild, Skärmdump av fel, eller Bild av skada, beroende på ditt användningsfall.
I ‘Beskrivning’ kan du lägga till en kort anteckning med ytterligare detaljer eller instruktioner, som vad som ska synas på bilden eller eventuella kvalitetskrav.
Till exempel:
- “Använd bra belysning för att hålla bilden tydlig,” för profilbilder.
- “Se till att all text är läsbar,” för skärmdumpar av fel.
- “Inkludera hela fastigheten i bilden”, för skaderapporter.
Detta gör etiketten kort och lättläst, och beskrivningen används endast för användbar vägledning.
Sedan finns inställningen 'Format', där du ser två val:
- Foto – fungerar bra för profilbilder, ID-kort eller alla situationer där du behöver en snabb ögonblicksbild.
- Video – perfekt när du vill att folk ska spela in korta introduktioner, rekommendationer eller förklara något som är lättare att visa än att beskriva.
Som standard ställer WPForms in det på 'Foto', men du kan växla mellan dem när som helst.
Nu kan du scrolla ner till inställningen 'Max filstorlek', där du kan styra hur stor den användarskickade filen kan vara.
Du kan ange valfritt antal megabyte (MB) du vill. Om du lämnar detta tomt använder WPForms din servers standardgräns, som vanligtvis är cirka 64 MB. Du kan också öka din maximala filuppladdningsstorlek om det behövs.
Jag rekommenderar att du ställer in en rimlig gräns baserat på vad du faktiskt behöver. Mindre filstorlekar hjälper dina formulär att laddas snabbare och sparar utrymme på din server.
Glöm inte att aktivera knappen 'Obligatoriskt' så att användare inte kan hoppa över detta fält.
Om du valde 'Video' som format ser du också ett alternativ för 'Tidsgräns'. Standard är 1 minut och 30 sekunder, vilket fungerar bra för de flesta situationer.
🧑💻 Proffstips: Videofiler kan bli stora och skada din WordPress-prestanda. Det här fältet fungerar bra för korta klipp (mindre än 30 sekunder). Men om du vill att användare ska skicka in långa videor (5+ minuter), är det bättre att de laddar upp dem till en molntjänst och delar länken.
Se vår guide om varför du aldrig ska ladda upp en video till WordPress för att lära dig mer.
Du kan experimentera med dessa inställningar för att passa dina behov.
Steg 4: Ställ in knappstil, lagring och åtkomstinställningar
Här går jag igenom de avancerade inställningarna för ditt Kamera-fält. Det är här du finjusterar hur kamerafunktionen ser ut och var dina inspelade filer lagras.
För att komma igång, växla till fliken ‘Avancerat’ högst upp i panelen Fältalternativ.
Låt oss bryta ner var och en av dessa konfigurationsalternativ.
Anpassa kameraknappens stil och text
Hitta först rullgardinsmenyn ‘Stil’. Du kan välja att visa en knappikon eller visa den som en enkel länk.
Jag brukar hålla mig till knappstilen eftersom den är tydligare och lättare att klicka på, men länkalternativet fungerar bra om du vill ha ett renare, mer minimalistiskt utseende.
Precis under det ser du fältet ‘Knapplänktext’. Detta är din chans att få kameraknappen att se mer personlig eller varumärkesanpassad ut.
Istället för standardtexten kan du skriva något som “Fota din bild” eller “Spela in en video”. Jag har till och med sett folk använda roliga fraser som “Säg ost!” för formulär för profilbilder.
Dessa små detaljer gör att ditt kontaktformulär känns mer välkomnande och mindre robotaktigt.
Styla ytterligare med CSS-klasser
Därefter ser du fältet CSS-klasser. Detta låter dig lägga till ett anpassat klassnamn så att du kan styla detta kamerafält annorlunda med CSS.
Till exempel kan du lägga till en klass som custom-camera-btn här. Detta stylar inte knappen automatiskt, men det låter dig (eller en utvecklare) lägga till anpassad CSS i dina temainställningar för att rikta in dig på den här specifika knappen senare.
Om du vill lägga till mer än en CSS-klass kan du separera dem med mellanslag, så här:camera-field large-button.
Jag kommer att lämna detta tomt för att hålla stylingen konsekvent med resten av mina formulärfält.
Välj var infångade filer ska lagras
Som standard sparar WPForms alla tagna foton och videor i din webbplats mapp ‘Uppladdningar’, specifikt i WPForms-katalogen.
Men om du föredrar att ha all din media på ett ställe, aktivera alternativet som säger ‘Lagra fil i WordPress mediebibliotek.’
Kom bara ihåg att filer i mediebiblioteket ofta är lättare för allmänheten att komma åt, så håll den här inställningen avstängd om du samlar in känsliga dokument.
🧑💻 Proffstips: Du kan också ansluta WPForms till Dropbox eller Google Drive om du vill lagra filer externt. Detta är användbart om du är orolig för att använda för mycket serverutrymme eller om du vill ha automatiska molnsäkerhetskopior.
Oavsett var du lagrar filerna kan du alltid se dem i din ‘Inskickade’ instrumentpanel, kopplade direkt till varje formulärsinlämning.
Begränsa åtkomst till uppladdade filer
Om ditt formulär samlar in känslig information, som ID-foton eller personliga dokument, vill du begränsa vem som kan se dessa filer. Bläddra ner och aktivera ‘Aktivera filåtkomstbegränsningar.’
När du aktiverar detta får du två säkerhetsalternativ. Det första är att du kan begränsa åtkomsten så att endast inloggade WordPress-användare kan se filerna.
Det andra alternativet är att lägga till lösenordsskydd till ditt formulär för ett extra säkerhetslager.
Detta är särskilt viktigt för formulär som används inom hälsovård, juridiska tjänster eller andra sammanhang där du hanterar privat information.
Utan dessa begränsningar kan vem som helst med filens URL potentiellt se det uppladdade mediet.
Du kan ta dig tid att konfigurera dessa avancerade alternativ innan du går vidare.
Steg 5: Ställ in formulärmeddelanden och bekräftelser
Nu när ditt kamerafält fungerar måste du se till att du faktiskt får aviseringar när någon skickar in ditt formulär.
För att göra detta kan du gå till Inställningar » Aviseringar i formulärbyggaren.
WPForms ställer automatiskt in en grundläggande e-postavisering som skickas till din WordPress-administratörs e-postadress. Varje gång någon skickar in ditt formulär med ett fångat foto eller video får du ett e-postmeddelande med alla detaljer.
Du kan anpassa vem som får dessa aviseringar genom att ändra fältet 'Skicka till e-postadress'. Om du vill att flera personer ska meddelas, ange bara alla e-postadresser och separera dem med kommatecken.
Du kan också använda en smart tagg för att skicka aviseringar dynamiskt, till exempel till den e-postadress som skickats in i formuläret.
Se vår guide om hur du skapar ett kontaktformulär med flera mottagare för detaljer.
Aviserings-e-postmeddelandet kommer att innehålla en direktlänk för att visa det tagna fotot eller videon. Detta gör att du kan förhandsgranska filen omedelbart från din inkorg utan att logga in på WordPress-instrumentpanelen först.
💡 Notera: WordPress skickar inte alltid e-postmeddelanden tillförlitligt, och ibland hamnar formuläraviseringar i skräppost eller skickas inte alls. För att åtgärda detta rekommenderar jag att du använder pluginet WP Mail SMTP. För detaljer, se hur du åtgärdar problemet med att WordPress inte skickar e-postmeddelanden.
Efter att någon har skickat in ditt formulär behöver de veta att det var framgångsrikt.
Låt oss gå till panelen 'Bekräftelser' för att bestämma vad som händer efter att någon har skickat in formuläret:
- Meddelandebekräftelsen – visar ett enkelt textmeddelande direkt på samma sida efter inlämning, som "Tack! Vi har tagit emot din inlämning."
- Sidvisningsbekräftelsen – omdirigerar personer till en annan sida på din webbplats. Detta fungerar bra om du vill skicka dem till en anpassad tack-sida med mer information.
- Bekräftelse för omdirigering – skickar personer till vilken URL som helst, även på en annan webbplats. Jag har använt detta för att skicka personer till en bokningssida eller ett specialerbjudande efter att de har skickat in.
Du kan välja det alternativ som passar din situation bäst.
Jag brukar hålla mig till 'Meddelande'-bekräftelsen eftersom den är enkel och folk vet omedelbart att deras inlämning fungerade.
Om du också vill använda den, rekommenderar jag att du skriver om standardmeddelandet så att det matchar ditt varumärkes röst:
Steg 6: Testa och bädda in ditt formulär
Innan du delar ditt formulär med världen måste du se till att kamerafångsten faktiskt fungerar.
Börja med att klicka på knappen 'Spara' längst upp till höger i formulärbyggaren för att spara alla dina ändringar.
Nu ska vi förhandsgranska detta formulär på en sida så att du kan testa det.
Klicka på knappen 'Förhandsgranska' för att öppna din formulärförhandsgranskning i en ny flik.
I förhandsgranskningen kan du fylla i dina formulärfält med dummydata.
För att säkerställa att valideringen fungerar, försök att ange en felskrivning eller lämna ett obligatoriskt fält tomt.
Klicka sedan på kameraikonen i ditt formulär.
Din webbläsare kommer då att be om tillstånd att komma åt din kamera. Klicka på 'Tillåt den här gången' eller 'Tillåt under besöket på webbplatsen' för att ge tillstånd.
Notera: Av säkerhetsskäl blockerar vissa webbläsare kameratillgång om din webbplats inte använder HTTPS. Se till att ett SSL-certifikat är installerat, annars kommer kameraikonen inte att fungera.
Du bör nu se dig själv på skärmen med en nedräkning på 3 sekunder. Le och låt den fånga ditt foto eller din video.
När du har fyllt i allt, klicka på 'Skicka' och se om ditt bekräftelsemeddelande visas precis som det ska. Du kan sedan klicka på länken 'Visa inlägg' för att se om formulärinlämningen gick igenom.
På nästa skärm bör du se ditt inlämningsprov.
I kolumnen Åtgärder, klicka på 'Visa' för att se inlägget.
Nu kan du skrolla ner för att se ditt tagna foto eller video bifogat precis där.
Så här ser det ut på min skärm:
När allt stämmer kan du lägga till detta formulär på din WordPress-webbplats.
Klicka på knappen 'Bädda in' för att starta guiden.
Detta öppnar ett popup-fönster där du antingen kan välja en befintlig sida eller skapa en ny för ditt formulär.
- Välj befintlig sida: En rullgardinsmeny visar alla sidor på din WordPress-webbplats.
- Skapa ny sida: Ett fält för ‘Namnge din sida’ visas där du kan ange en titel.
För den här guiden väljer jag ‘Skapa ny sida’.
Ange sedan ett namn för din nya sida, jag kallar min till exempel “Kontaktformulär”.
Klicka på ‘Låt oss köra!’
Du kommer sedan till sidans blockredigerare med ditt formulär redan laddat.
Härifrån kan du justera ‘Formulärinställningar’ i panelen till höger.
Som standard är formulärrubriken dold, så du kanske vill aktivera den för att ge besökarna mer kontext. Du kan också aktivera beskrivningen om du har lagt till en.
För att det ska se ännu bättre ut, styla formuläret så att det matchar din webbplats tema.
Välj ett tema från avsnittet Teman.
När du är nöjd med hur det ser ut, klicka på ‘Spara’.
När det är klart, publicera eller uppdatera din sida och klicka på ‘Visa sida’ för att se liveversionen på din WordPress-webbplats:
För detaljer, se vår guide om hur man bäddar in formulär i WordPress.
🧑💻 Proffstips: När du har bäddat in ditt formulär, se till att öppna sidan på din mobila enhet för att säkerställa att kameran öppnas smidigt och känns naturlig på en mindre skärm.
Vanliga frågor om att ta live kamerabilder eller videor i WordPress-formulär
Innan vi avslutar, här är svar på några vanliga frågor som folk har om att använda kamerauppladdningar och fält för filer i formulär.
Hur samlar jag in foton i Google Formulär?
Google Forms stöder filuppladdningar, men det saknar ett dedikerat fält för Smart Camera. Medan användare manuellt kan välja en fil, erbjuder WPForms en sömlös integration som utlöser kameran direkt, vilket gör det mycket snabbare för användare att ta och skicka in bilder.
Kan WordPress-formulär ha en kamera?
Ja. Vissa WordPress-formulärplugins, som WPForms, stöder ett kamerafält som låter användare ta foton eller spela in videor direkt från sin enhet och skicka in dem med formuläret.
Vad är ett fält för filuppladdning?
Ett fält för filuppladdning låter användare bifoga filer som bilder, PDF-filer eller videor när de skickar in ett formulär. Det är användbart för saker som foto-uppladdningar, CV:n eller dokument.
Hur tar jag ett foto i WordPress-formulär?
Du lägger till ett kamera- eller filuppladdningsfält i ditt formulär med hjälp av ett formulärplugin som stöder det, som WPForms. När användare öppnar formuläret på en enhet med en kamera kan de ta ett foto direkt istället för att ladda upp en befintlig fil.
Kan WordPress-formulär ta webbkamerabilder?
Ja. Om formulärpluginet stöder live kamerainmatning kan användare ta foton med sin webbkamera på en stationär dator eller kameran på sin telefon och skicka in dem direkt.
Fler guider för att använda WordPress-formulär
Jag hoppas att den här handledningen har hjälpt dig att lägga till ett kamerafält för att låta användare ta livefoton eller videor direkt i dina WordPress-formulär.
Därefter kanske du vill lära dig:
- Hur man lägger till bildval i WordPress-formulär
- Hur du visar ett flytande kontaktformulär i WordPress
- Hur du använder kontaktformulär för att utöka din e-postlista i WordPress
- Sätt att använda villkorlig logik i WordPress-formulär
- Ultimat guide till att använda WordPress-formulär (allt du behöver veta)
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.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.