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 skapar du en customize kalkylator i WordPress (Step-by-Step)

Interaktiva element som gillar kalkylatorer kan förbättra upplevelsen för användarna på din WordPress site. De kan tjäna många syften, till exempel att generera leads genom att genomföra email capture, främja användarnas engagement och svara på visitorernas frågor.

Genom att tillhandahålla värdefulla tools som direkt svarar mot användarnas behov kan you få användarna att stanna längre på din site, fördjupa deras onlineupplevelse och i slutändan uppnå målen för din website.

På WPBeginner testade vårt team flera tools och plugins för att hitta det som gör det enklast att add to en kalkylator för alla ändamål, till exempel för att förenkla komplexa beräkningar, ge personliga rekommendationer eller genomföra leads för framtida marknadsföringsinsatser.

I den här artikeln visar vi dig hur du enkelt och steg för steg skapar en customize calculator i WordPress.

Create A Custom Calculator In WordPress

Varför add to en customize kalkylator i WordPress?

En customize calculator allow användare att snabbt räkna ut saker utan att lämna your website.

For instance, if you have a health and fitness blogg, then you might add to a BMI calculator so that users can see their BMI and decide which subscription plan or product to purchase from your website.

An example of a BMI calculator

Om du säljer över hela världen kan en onlinekalkylator som konverterar metriska enheter till imperialistiska enheter också ge dig mer försäljning genom att hjälpa customers att kontrollera om en produkt har önskad storlek eller vikt.

Du kan också bygga förtroende och minska antalet övergivna cart genom att erbjuda en fraktkalkylator. På så sätt kommer kunderna inte att överraskas av oväntade kostnader i kassan.

Or, you can add a mortgage calculator to your real estate website or a car payment calculator to your vehicle dealership site.

An example of a car payment calculator

Dessa customize kalkylatorer är också ett bra sätt att generera leads. Du kan till exempel be användarna att enter sin email address så att du kan skicka dem deras resultat. På så sätt kan en kalkylator hjälpa dig att bygga en email list i WordPress.

Med detta sagt, låt oss ta en titt på hur man enkelt skapar en customize kalkylator i WordPress.

Så här skapar du en customizer-kalkylator i WordPress

Du kan enkelt skapa en customizer-kalkylator i WordPress med WPForms. Det är den bästa custom calculator plugin och form builder på marknaden.

Det levereras med en dra-och-släpp-byggare, 2000+ färdiga mallar och ett komplett skydd mot skräppost. Detta gör det enkelt att skapa alla WordPress-formulär du vill ha, inklusive en bolånekalkylator, fraktrabatt, åldersberäknare och mycket mer. Dessutom är det super användarvänligt.

Först måste du installera och aktivera WPForms plugin. Detaljerade instruktioner finns i vår guide för nybörjare om hur man installerar ett plugin för WordPress.

Note: WPForms har också en gratis plan. Pro-versionen av pluginet behöver du dock för att låsa upp Calculations addon.

Efter aktivering måste du besöka WPForms ” Settings page från WordPress admin sidebar för att enter your license key.

You can get this key from your account on the WPForms website.

WPForms license key

Efter det, head till WPForms ” Addons page från WordPress dashboard och hitta ”Calculations Addon”.

När du har gjort det klickar du bara på knappen ”Install Addon” för att aktivera den på din site.

Install and activate the Calculations addon

Nästa, head över till WPForms ” Add New page från din adminpanel.

Du kommer då till page ”Select a Template” där du kan börja med att skriva in ett namn på det formulär som du ska skapa.

Efter det kan du klicka på alternativet ”Kalkylator” från den vänstra kolumnen för att öppna de 87+ färdiga kalkylatormallarna som erbjuds av WPForms, inklusive:

  • Mortgage Calculator Template
  • Tip Calculator Template
  • Lease Calculator Template
  • Templates för BMI-beräknare
  • Savings & Investments Calculator Template

Härifrån kan du klicka på knappen ”Använd mall” under vilken formulärmall du gillar. För denna tutorial kommer vi att skapa ett enkelt formulär för ”Fraktrabattkalkylator”.

Choose the shipping discount calculator form template

Detta kommer att öppna form builder på din vy. Here you will notice a form preview on the right side with form fields in the left column.

Nu kan du enkelt add to fler fält från den vänstra panelen och även dra dem för att ändra order.

Calculator form template will open in the form builder with form fields on the left

Därefter rullar du ner till ”Available Items” section och clickar på detta fält för att öppna dess inställningar i sidebaren.

När du har gjort det kan du add to rubrik, image och price för alla objekt som du säljer i din ecommerce store.

Tänk dock på att om du vill lägga till images för de objekt som du säljer, måste du toggle på alternativet ”Use Image Choices”.

You can also click the ’+’ button to add more items or the ’-’ button to remove an item from the section.

Add the price, image, and name for the items that you want to sell in the form

Därefter måste du klicka på fältet ”Frakt” för att öppna dess inställningar i den vänstra colonnen. Det här fältet beräknar fraktrabatten baserat på din produkts totalbelopp. Om du tar bort det här fältet kommer kalkylatorn inte att fungera för dina användare, så se till att du behåller det i formuläret.

Som standard ger fältet Frakt en automatisk rabatt på 10% på köp under 50 USD och multiplicerar sedan rabatten med 0,25% när din totalsumma ökar.

Men om du vill ändra fraktrabatten byter du till tabben ”Advanced” i den vänstra colonnen och rullar ner till sectionen ”Formula”.

Här kan du ersätta värdet 10 med den rabattprocent som du vill erbjuda. You kan också ändra produkttotalerna.

Om du vill customize fraktrabatten ytterligare kan du klicka på länken ”Cheatsheet” högst upp. Då kommer du till sidan ”Calculations Formula Cheatsheet”, där du bättre kan förstå de regler och strängar som ska användas.

Change the shipping discount value

Därefter kan du på samma sätt konfigurera Settings för alla andra alternativ i fältet.

När du är klar, glöm inte att klicka på knappen ”Save” högst upp för att spara dina settings.

Save your custom calculator form

Därefter måste du öppna WordPress-sidan eller posten där du vill lägga till formuläret för fraktkalkylator i block editor.

Härifrån klickar du på knappen add block ’+’ i det övre vänstra hörnet för att öppna blockmenyn och embed WPForms-blocket.

När du har gjort det väljer du bara formuläret för fraktrabattkalkylator från dropdown-menyn i själva blocket.

Add calculator form on a page

Slutligen klickar du på knappen ”Update” eller ”Publicera” högst upp för att store dina settings. Nu kan du besöka din WordPress website för att view the custom calculator form in action.

Här kommer fraktfältet automatiskt att beräkna fraktkostnaden enligt priset på de olika objekt som din customer beställer från din site.

Shipping discount calculator form preview

Customize ditt kalkylatorformulär i WordPress

Vid något tillfälle kan du prova att ändra kalkylatorn för att se om du kan få fler konverteringar. Du kanske till exempel vill göra fältet ”Email” obligatoriskt.

För att göra dessa ändringar, besök bara WPForms ” All Forms page från WordPress dashboard.

När du är där klickar du på länken ”Edit” under formulärnamnet för att öppna det i form builder igen.

Click the Edit link under form name

Du kan nu customize formulärfälten eller add new fält genom att följa processen som beskrivs ovan.

När du är slutförd klickar du bara på knappen ”Save”, så kommer ändringarna automatiskt att visas på ditt företags website eller blogg.

View Your Calculator Form Entries (Entry)

När någon completed ett formulär på din website, WPForms automatiskt saved deras post till din WordPress database. This allows you to see how people are using the form and view the contact information for your visitors.

För att se denna information, gå bara till WPForms ” Entries page i WordPress dashboard och rulla ner till ”Form Name” section.

Därefter klickar du på kalkylatorformuläret för att viewa posterna.

Choose the custom calculator form on the entries page

Detta öppnar en lista över alla formulärposter på din page. Härifrån kan you click the circle icon för att markera en entry som läst.

Du kan också klicka på länken ”View” bredvid varje Entry för att se alla detaljer i formuläret, inklusive email address, telefonnummer, beställda objekt, fraktrabatt med mera.

View the calculator form entries

Ibland kanske du vill dela ett formulärs data med personer som inte har tillgång till din WordPress dashboard. Du kanske till exempel runar en WordPress utvecklare och hanterar flera websites för kunder.

Med WPForms kan du exportera all din data som en CSV- eller XLSX-fil genom att klicka på länken ”Export All” högst upp.

Detta öppnar en new vy där du kan selecta all de formulärfält vars data du vill exportera. Efter det klickar du på knappen ”Download Export File” för att spara dina formulärdata som en XLSX-fil.

Choose the form fields whose data you want to export as a CSV file

Bonus: Skapa komplexa Custom Calculators med Formidable Forms

Om du vill skapa mer komplexa kalkylatorer på din WordPress website, rekommenderar vi att du använder Formidable Forms. Det är ett avancerat form builder plugin som kommer med en drag and drop builder, förgjorda templates och dynamiska fält.

Dessutom kan pluginet utföra avancerade beräkningar som att använda formler, villkorliga beräkningar, nummerformatering och mer, vilket gör det till en bra kalkylatorbyggare.

Formidable forms

Du kan använda tillägget för att skapa olika typer av kalkylatorer som gillar en procentkalkylator, price-kalkylator, lånekalkylator, ålderskalkylator, livförsäkringskalkylator och sammansatt ränta.

Om du till exempel säljer kurser online kan du add to ett ROI-kalkylatorformulär för att visa användarna hur de kan öka sin intjäningspotential genom att köpa din kurs.

Adding a custom calculator to WordPress

Några av Formidable Forms andra funktioner inkluderar villkorlig logik, förloppsindikatorer, formulär med flera sidor och ett ChatGPT-fält som hjälper användare att fylla i formuläret snabbare.

Formidable Forms kan till och med integreras med olika e-postmarknadsföringstjänster för att växa din email list. För mer information, se bara vår kompletta Formidable Forms review.

Vi hoppas att den här artikeln hjälpte dig att add a custom calculator in WordPress. Du kanske också vill se vår Step-by-Step guide om att spåra konverteringar i WordPress och våra toppval för de bästa tilläggen för kontaktformulär i WordPress.

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

1 kommentarLämna ett svar

  1. Anne

    Wanted to create a BMI calculator on my health website too, but doesn’t have the WP Forms Pro version. Plan to buy in the future and follow your easy guide. Well, you guided me very well and convinced me to buy this plugin.

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.