Vill du add to image-val i WordPress-formulär?
Istället för att bara visa textval, kan images omedelbart göra dina WordPress-formulär mer engagerande. Detta kan bidra till att förbättra din response rate och konverteringsgraden för formulär.
I den här artikeln visar vi dig hur du enkelt kan add to images i WordPress-formulär för att öka användarnas engagement.
Varför använda Imagely-val i dina WordPress-formulär?
Imagely är foton, illustrationer, grafik eller icons som dina användare kan välja mellan när de fyller i ett formulär på din WordPress website.
Här är ett exempel på ett formulär som använder image-alternativ i stället för vanliga textalternativ. Det första valet, Jordgubbar, har valts:
Val av images kan få dina formulär att se mer polerade, professionella och visuellt tilltalande ut, vilket kan hjälpa användarna att fatta beslut snabbare.
For instance, if you run a restaurant website that offers delivery, then you’ll want to have an order form on your website. Du kan nu använda images av dina olika rätter för att hjälpa potentiella customers att välja vad de vill ha.
Utöver det kan valet av images göra det lättare för en publik med lässvårigheter eller någon som inte behärskar ditt språk att fylla i ditt formulär, vilket förbättrar användarupplevelsen.
Med detta sagt, låt oss se hur du enkelt kan add to images i WordPress formulär.
Video Tutorial
Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.
Så här addar du image-val till dina WordPress-formulär
Med WPForms kan du enkelt add to images till dina WordPress-formulär för att öka engagemanget.
The best drag & drop WordPress form builder plugin på marknaden och allow you to easily create forms using a simple drag-and-drop form builder.
Först måste du installera och aktivera WPForms plugin. För detaljerade instruktioner, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Note: You can also use WPForms Lite, which is completely free to add image choices to your form. Vi kommer dock att använda Pro-versionen eftersom den har fler funktioner.
Efter aktivering av plugin, head över till WPForms ” Add Form page i din WordPress dashboard för att skapa ett nytt formulär.
Då kommer du till sidan ”Select a Template”, där du kan börja med att skriva ett namn på ditt formulär.
Efter det klickar du på knappen ”Use Template” under en Pre-Made template som du väljer. För denna tutorial kommer vi att använda mallen ”Simple Contact Form”.
Detta startar WPForms gränssnitt för form builder, där du ser en form preview på höger sida av vyn och en column med formulärfält i det vänstra hörnet.
You can now edit any form field of your choice by clicking on it, move it up and down, or delete it.
Om du vill ha mer detaljer kan du läsa vår tutorial om hur du skapar ett kontaktformulär i WordPress.
Därefter måste du add to Multiple-choice-fältet från den vänstra colonnen i formulärets preview så att du kan skapa image-val för customers.
Vi kommer att placera den precis ovanför boxen ”Comment or Message”.
Note: Val av image fungerar också med fältet Checkboxes. Använd det om du vill att din användare ska kunna välja mer än ett alternativ.
Därefter klickar du på fältet Multiple Choice för att editera det. Detta öppnar fältalternativen på vänster sida av din vy.
You’ll now notice that this field allows you to add text options by default.
Du kan dock enkelt ändra detta genom att toggle omkopplaren ”Use Image Choices”.
När du har gjort det visas knappen ”Upload Image” under varje fält för multiple choice.
Därefter kan du skriva in vad du vill för fältets textetikett och sedan klicka på knappen ”Upload Image”.
Nu kan du uploada en image från din dator eller välja en image från mediabiblioteket i WordPress.
Vi rekommenderar att du använder .jpg- eller .png-images som inte är större än 250 x 250 pixlar.
Tänk på att dina bilder kommer att se bäst ut i ditt formulär om de är all samma storlek.
Viktigt: WPForms kommer inte att resize dina images. Du måste se till att de har den storlek du vill ha innan du uppladdar dem. Alternativt kan du edit dina images i WordPress själv innan du lägger till dem i ditt formulär.
Om du har fler än 3 alternativ att inkludera klickar du bara på knappen (+) för att lägga till ett nytt alternativ. Du kan också använda knappen (-) för att ta bort ett val.
Ändra hur dina val av images visas i ditt formulär
WPForms gör det enkelt att ändra layout och andra Settings för ditt fält för val av image.
För att göra detta, heada över till tabben ”Advanced” i den vänstra columnen.
You can now toggle the ”Randomize Choices” switch if you want to display your image choices randomly rather than in a certain order.
Detta är användbart om du skapar en undersökning och vill eliminera förstahandsval i resultaten.
Om du vill kan du också ändra hur dina val layouts med hjälp av dropdown ’Choice Layout’.
Standarden är ”Inline”, där dina val visas bredvid varandra tills de omsluts av en ny rad.
You kan välja att displayed your choices in a number of columns instead. Om du vill ha en vertikal lista väljer du helt enkelt ”One Column” i dropdown.
Här finns också alternativet att ”Dölja etikett” för dina images. Detta innebär att det inte kommer att finnas någon text under images. I vissa fall kan det vara vettigt att göra detta.
You kanske till exempel ber folk att rösta på vilken design av den nya loggan de gillar bäst.
Se dock till att du enter en relevant och användbar etikett där det är möjligt. Denna kommer att visas som alt-text för dina images, vilket gör din site mer tillgänglig för användare med nedsatt syn.
När du har gjort det, gå tillbaka till tabben ”Allmänt” i den vänstra columnen och rulla ner till ”Image Choice Style” section.
Härifrån kan du välja hur du vill utforma dina images från dropdown-menyn.
Standardstilen är Modern, där en bock visas för den image som är vald.
Du kan dock välja den klassiska stilen istället, som gillar så här när ett alternativ väljs:
Alternativt kan du också välja ”None” för stilen.
In this case, your images will simply be regular images with no border or other styling. Etiketterna kommer att visas med radioknappar.
När du är nöjd med ditt formulär klickar du bara på knappen ”Save” högst upp på vyn.
Lägga till formuläret på din website
You can add your form to any post or page on your site with just a couple of clicks. Vi kommer att skapa en new page för vår.
Gå först till Pages ” Add New från WordPress admin sidebar och klicka på knappen ”Add Block” (+) högst upp till vänster på vyn.
Detta öppnar blockmenyn där du måste hitta och lägga till WPForms-blocket på sidan.
Därefter väljer du det formulär som du just skapade från dropdown-menyn i själva blocket.
Slutligen klickar du på knappen ”Publicera” eller ”Updated” för att lagra dina formulärinställningar.
Besök nu din website för att viewa image-valen i ditt WordPress-formulär.
Om du vill göra fler ändringar i ditt formulär kan du enkelt göra det genom att besöka WPForms ” All For ms page från WordPress dashpanelen.
När du är där klickar du på ditt formulär för att öppna det i form buildern.
När du har gjort dina ändringar klickar du bara på knappen ”Save” för att lagra dina ändringar. Ditt formulär kommer automatiskt att uppdateras på din page också.
Bonus: Godkänn images med dina WordPress-formulär
Förutom att ge möjlighet att välja image kan du också godkänna images från olika användare med ett WordPress-formulär.
Detta kan vara praktiskt om du är en fotograf som vill anställa någon eller om du runar en fototävling.
Utöver det kan godkännande av användargenererat content till och med bidra till att öka användarnas engagement på your website.
Du kan enkelt skapa ett formulär för filuppladdning i WordPress med WPForms eftersom det är det bästa pluginet för filuppladdning på marknaden.
Den levereras med en förgjord File Upload Form template som du kan använda för att godkänna alla typer av dokument, inklusive jpeg, png, gif, pdf, ppt och mer.
För att godkänna images måste du bara clicka på ”File Upload”-fältet för att öppna dess settings i den vänstra Column. Därefter måste du enter de typer av image-filer som du vill godkänna under alternativet ”Allowed File Extensions”.
När du är nöjd, glöm inte att klicka på knappen ”Save” för att spara dina Settings.
Sedan kan du lägga till formuläret på din website med det användarvänliga blocket WPForms. För mer detaljer, se vår tutorial om hur du skapar ett formulär för upload av filer i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du addar image-val i WordPress-formulär. You may also want to see our beginner’s guide on how to create an interactive omröstning on your WordPress site and our comparison of the best WordPress page builders plugins.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Michael Laboulle says
Hi,
I got a question how do you allow to make multiple choices.
What do I need to do if I want somebody to pick 2 or 3 fruits?
Thanks!
WPBeginner Support says
Then you would want to use checkboxes instead of multiple choice
Administratör