Vill du lägga till en bild i ett WordPress-formulär? Att lägga till grafik i ett formulär kan hjälpa till att lägga till ditt varumärke och få formuläret att se mer intressant ut.
I den här handledningen kommer vi att titta på processen att lägga till en bild i ett formulär. Mot slutet kommer vi också att förklara hur du använder bilder istället för frågor i ditt formulär.
Hur man lägger till en bild i ett formulär
WPForms är den enklaste formbyggaren för WordPress. Det låter dig enkelt lägga till bilder var som helst på dina formulär.
Du kan till exempel:
Det finns några olika sätt att lägga till bilder i formulär i WordPress. Låt oss först titta på den enklaste metoden: att lägga till en bild i ett formulär med HTML.
Hur man lägger till en bild i dina WordPress-formulär
Här är skrivna instruktioner om du föredrar det:
Låt oss titta på processen att lägga till en bild i ett formulär med lite grundläggande HTML. Detta är verkligen enkelt och snabbt med WPForms dra och släpp-byggare.
Det här är stegen vi kommer att följa:
- Installera WPForms Plugin
- Ladda upp din bild till WordPress
- Lägg till din bild i ditt WordPress-formulär
- Publicera ditt formulär
Om du vill lägga till bilder till flervalsfrågor hjälper vi dig i slutet av artikeln.
Steg 1: Installera WPForms Plugin
Först måste du installera och aktivera WPForms plugin. Här är en steg-för-steg-guide om hur du installerar ett WordPress-plugin om du behöver hjälp.
Nu har du 2 alternativ:
- Om du redan har ett formulär som du vill lägga till en bild på kan du fortsätta och gå vidare till nästa steg.
- Om du inte har några formulär i WPForms än är det nu den perfekta tiden att skapa ett. Du kan skapa ett enkelt kontaktformulär på mindre än 5 minuter.
När du är klar med att skapa ditt formulär, kom tillbaka till denna handledning.
Steg 2: Ladda upp din bild till WordPress
Det enklaste sättet att lägga till en bild i WordPress är att ladda upp den till mediebiblioteket. På så sätt blir det väldigt enkelt att hitta den när du behöver kopiera länken.
För att komma igång, öppna din WordPress-instrumentpanel. Klicka sedan Media På vänstra sidan.
Gå nu vidare och klicka på Lägg till ny knapp.
Dra din bildfil till rutan eller klicka Välj filer om du föredrar att placera bilden på din dator.
När din bild har laddats upp, gå vidare och klicka på den för att se detaljerna. Klicka på knappen märkt Kopiera URL för att kopiera bildens URL till ditt urklipp.
Du har nu bildens URL på ditt urklipp redo att klistra in i ditt formulär.
Stanna kvar i WordPress-instrumentpanelen för nästa del.
Steg 3 – Lägg till din bild i ditt WordPress-formulär
Därefter kommer vi att öppna formuläret som vi vill lägga till bilden i.
Klicka på i det vänstra navigeringsfältet på instrumentpanelen WPForms. Klicka sedan Redigera under formuläret du skapade i steg 1.
När formulärbyggaren öppnas drar du ett HTML-fält från den vänstra panelen till den högra panelen och släpper det där du vill att bilden ska visas:
Klicka nu en gång på fältet för att öppna inställningarna på vänster sida.
Lade du märke till Koda vänstra fältet? Skriv bara HTML-koden för att bädda in din bild här.
Du kan kopiera detta exempel. Men kom ihåg: efter src= vill du klistra in webbadressen till bilden du laddade upp i det sista steget:
Klicka nu Spara högst upp i formuläret.
Färdiga! Allt vi behöver göra är att publicera formuläret.
Steg 4: Publicera ditt formulär
WPForms låter dig snabbt lägga till dina formulär var som helst på din webbplats, inklusive:
I det här exemplet kommer vi att göra det på det enklaste sättet. Låt oss använda Bädda in för att automatiskt skapa en sida för formuläret.
Gå vidare och klicka Bädda in nu.
Nästa, låt oss klicka Skapa ny sida.
Och slutligen, skriv ett namn för din sida och klicka Kom igen.
WPForms skapar automatiskt en ny sida och bäddar in ditt formulär i den. Du kommer att se bilden i förhandsvisningen här också.
Klicka bara Posta så att formuläret är aktivt på din webbplats.
Och det är! Ditt formulär är live.
Så här ser vår bild ut i vår färdiga form.
Du kan redigera formuläret och ändra HTML-koden om du behöver ändra bildstorleken. Du kan också lägga till CSS-klasser för att styla din bild om du vill.
Hur man lägger till bilder i formulärfält
Innan vi går, låt oss snabbt titta på en annan cool funktion i WPForms. Du kan lägga till bilder som svar på flervalsfrågor så att dina besökare kan klicka på dem för att fatta ett beslut.
Att använda bilder i frågor är perfekt för enkla beställningsformulär, så låt oss snabbt se hur det går till.
På det här beställningsformuläret för t-shirt har vi ett flervalsfält med 3 alternativ. Låt oss kolla Använd bildalternativ kryssrutan nedan.
Nu kan vi lägga till en bild för varje alternativ i vårt flervalsfält. Du måste klicka på Ladda upp bild text för att ladda upp varje bild.
Och så här ser formuläret ut i formulärbyggaren när detta är gjort:
Excellent! Klicka på den blå när du är klar Posta och ta en titt på ditt formulär. När du klickar på en bild för att välja den ser du en grön bock i mitten:
Att använda bildalternativ är ett bra sätt att göra undersökningar och omröstningar mer intressanta, eller visa dina besökare olika layouter eller färger på ett beställningsformulär.
Nästa steg: Style dina WordPress-formulär
Excellent! Nu vet du det enkla sättet att lägga till en bild i ett WordPress-formulär. WPForms gör det också enkelt för dina besökare att ladda upp sina egna bilder till WordPress, så se till att kolla in det nedan.
Letar du efter fler sätt att designa och styla dina formulär? Kolla in den här artikeln om vackra kontaktformulärdesigner du kan stjäla. Artikeln innehåller många CSS-exempel som du kan kopiera och klistra in i WordPress Customizer för att utforma dina formulär.
Redo att bygga din form? Kom igång idag med det enklaste WordPress-formulärbyggarpluginet. WPForms Pro innehåller över 100 gratisformulärmallar och erbjuder en 14-dagars pengarna-tillbaka-garanti.
Om den här artikeln hjälpte dig, följ oss på Facebook och Twitter för fler gratis WordPress-guider och handledningar.
