Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här add to Imagely-val i WordPress-formulär (öka engagemanget)

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.

How to easily add image choices in a WordPress form

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:

An example of image choices in use in a form: shows colorful images for 6 fruit options

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

Subscribe to WPBeginner

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”.

A WPForms contact template

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.

The default form created using WPForms' Contact Form template

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.

Adding a multiple choice field to your form

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.

Editing the multiple choice field for your form

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.

Toggle Image Choice switch

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.

Uploading images for the different choices on your form

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.

Click the - button to remove a multiple choice field

Ä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.

Toggle the Randomize Choice switch

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.

Select choice layout

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.

Choose image choice style

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:

The image choices with the Classic style applied (thicker border, no shadow, no bold text, no checkmark)

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.

The image choices with no styling

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.

Select a form from the dropdown menu in the WPForms block

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.

Preview for add image choices in WordPress forms

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å.

Edit image choice form

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”.

Type file extension type

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

3 kommentarerLämna ett svar

  1. 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!

  2. 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!

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.