Interaktiva element som kalkylatorer kan förbättra användarupplevelsen på din webbplats. De kan tjäna flera syften, som att samla in leads, öka engagemanget eller hjälpa besökare att hitta snabba svar.
Genom att tillhandahålla värdefulla verktyg som direkt svarar på användarnas behov kan du behålla användarna på din webbplats längre, fördjupa deras onlineupplevelse och i slutändan uppnå din webbplats mål.
Vårt team testade flera verktyg och plugins för att hitta det som gör det enklast att lägga till en kalkylator för alla ändamål.
I den här artikeln visar vi dig hur du enkelt och steg för steg skapar en anpassad kalkylator i WordPress.
Varför lägga till en anpassad kalkylator i WordPress?
En anpassad kalkylator gör det möjligt för användare att snabbt beräkna saker utan att lämna din webbplats.
Till exempel, om du har en blogg om hälsa och träning, kan du lägga till en BMI-kalkylator så att användare kan se sitt BMI och bestämma vilken prenumerationsplan eller produkt de ska köpa från din webbplats.
Om du säljer över hela världen kan en onlinekalkylator som konverterar metriska enheter till imperiala enheter också ge dig mer försäljning genom att hjälpa kunder att kontrollera om en produkt har önskad storlek eller vikt.
Du kan också bygga förtroende och minska övergivna kundvagnar genom att erbjuda en fraktskalkylator. På så sätt kommer kunderna inte att överraskas av oväntade kostnader vid utcheckningen.
Eller så kan du lägga till en bolånekalkylator på din fastighetswebbplats eller en bilbetalningskalkylator på din bilhandlarwebbplats.
Dessa anpassade kalkylatorer är också ett utmärkt sätt att generera leads. Du kan till exempel be användare att ange sin e-postadress så att du kan skicka dem sina resultat. På så sätt kan en kalkylator hjälpa dig att bygga en e-postlista i WordPress.
Med det sagt, låt oss titta på hur du enkelt skapar en anpassad kalkylator i WordPress.
Hur man skapar en anpassad kalkylator i WordPress
Du kan enkelt skapa en anpassad kalkylator i WordPress med WPForms. Enligt vår mening är det bästa anpassade kalkylatorpluginet och formulärbyggaren på marknaden. Den levereras med en dra-och-släpp-byggare, över 2000 förgjorda mallar och komplett spamskydd.
Faktum är att vi älskar WPForms så mycket att vi använder det för alla kontaktformulär på vår webbplats, samt för vår årliga undersökning.
Under vår testning insåg vi att pluginet också har ett tillägg för beräkningar som gör det enkelt att skapa vilken kalkylator du vill, inklusive en bolånekalkylator, fraktrabatt, ålderskalkylator och mer. För att lära dig mer, se vår WPForms-recension.
Först måste du installera och aktivera WPForms-pluginet. För detaljerade instruktioner, se vår nybörjarguide om hur man installerar ett WordPress-plugin.
Notera: WPForms har också en gratisversion. Du behöver dock proversionen av pluginet för att låsa upp tillägget Calculations.
Besök sidan WPForms » Inställningar från WordPress admin sidofält efter aktivering för att ange din licensnyckel.
Du kan hämta denna nyckel från ditt konto på WPForms webbplats.
Därefter går du till sidan WPForms » Tillägg från WordPress-instrumentpanelen och hittar 'Calculations Addon'.
När du har gjort det, klickar du helt enkelt på knappen 'Installera tillägg' för att aktivera det på din webbplats.
Gå sedan till sidan WPForms » Lägg till ny från din administratörspanel.
Detta tar dig till sidan 'Välj en mall', där du kan börja med att skriva ett namn för formuläret du ska skapa.
Därefter kan du klicka på alternativet 'Kalkylator' i den vänstra kolumnen för att öppna de 87+ färdiga kalkylatormallarna som erbjuds av WPForms, inklusive:
- Mall för bolånekalkylator
- Mall för dricksräknare
- Mall för leasingkalkylator
- BMI-kalkylatormall
- Mall för kalkylator för sparande och investeringar
Härifrån kan du klicka på knappen 'Använd mall' under vilken formulärmall du vill. För den här handledningen kommer vi att skapa ett enkelt formulär för 'Fraktkostnadskalkylator'.
Detta öppnar formulärbyggaren på din skärm. Här ser du en förhandsgranskning av formuläret till höger med formulärfält i den vänstra kolumnen.
Du kan nu enkelt lägga till fler fält från den vänstra panelen och även dra dem för att ordna om deras ordning.
Rulla sedan ner till avsnittet 'Tillgängliga objekt' och klicka på detta fält för att öppna dess inställningar i sidofältet.
När du har gjort det kan du lägga till titel, bild och prissättning för alla varor du säljer i din webbutik.
Tänk dock på att om du vill lägga till bilder för de artiklar du säljer, måste du aktivera alternativet 'Använd bildval'.
Du kan också klicka på '+' -knappen för att lägga till fler objekt eller '-' -knappen för att ta bort ett objekt från sektionen.
Klicka sedan på fältet 'Frakt' för att öppna dess inställningar i den vänstra kolumnen. Detta fält kommer att beräkna fraktrabatten baserat på din produktkostnad. Om du tar bort detta fält kommer kalkylatorn inte att fungera för dina användare, så se till att du behåller det i formuläret.
Som standard erbjuder fraktfältet en automatisk rabatt på 10 % på köp under 50 USD och multiplicerar sedan rabatten med 0,25 % när din totalsumma ökar.
Om du däremot vill ändra fraktrabatten, byt till fliken 'Avancerat' i den vänstra kolumnen och skrolla ner till avsnittet 'Formel'.
Här kan du ersätta värdet 10 med den rabattprocent du vill erbjuda. Du kan också ändra produktens totalsummor.
Om du vill anpassa fraktrabatten ytterligare kan du klicka på länken 'Cheatsheet' högst upp. Detta tar dig till sidan 'Calculations Formula Cheatsheet', där du bättre kan förstå reglerna och strängarna att använda.
Därefter kan du konfigurera inställningarna för alla andra fältalternativ på samma sätt.
Nytt: Vill du ha ett enklare sätt att skapa dina beräkningsformler? WPForms erbjuder nu en kraftfull AI Calculations-funktion som gör det tunga arbetet åt dig.
Klicka helt enkelt på knappen 'Generera formel' bredvid formelfältet för att börja chatta med AI-assistenten.
Sedan kan du helt enkelt beskriva vad du vill beräkna på klar svenska.
Till exempel kan du skriva: "Applicera en fraktrabatt på 15% på beställningar över 100 USD och öka sedan rabatten med 0,25% för varje ytterligare 50 USD som spenderas."
Efter att ha tryckt på 'Enter'-knappen genererar AI:n automatiskt rätt formel, som du kan lägga till i ditt formulär med ett klick.
💡 Proffstips: Ju mer specifik du är när du beskriver dina beräkningsbehov för AI:n, desto mer exakt och anpassad blir din formel.
När du är klar, glöm inte att klicka på knappen 'Spara' högst upp för att spara dina inställningar.
Därefter måste du öppna WordPress-sidan eller -inlägget där du vill lägga till formuläret för fraktkalkylatorn i blockredigeraren.
Härifrån klickar du på knappen Lägg till block '+' längst upp till vänster för att öppna blockmenyn och bädda in WPForms-blocket.
När du har gjort det, väljer du bara formuläret för fraktrabattkalkylatorn från rullgardinsmenyn i själva blocket.
Slutligen, klicka på knappen 'Uppdatera' eller 'Publicera' högst upp för att spara dina inställningar. Nu kan du besöka din WordPress-webbplats för att se den anpassade kalkylatorformuläret i aktion.
Här kommer fraktfältet automatiskt att beräkna fraktkostnaden enligt prissättningen för de olika artiklar som din kund beställer från din webbplats.
Anpassa din kalkylatorformulär i WordPress
Vid någon tidpunkt kan du försöka ändra kalkylatorn för att se om du kan få fler konverteringar. Du kanske till exempel vill göra fältet 'E-post' obligatoriskt.
För att göra dessa ändringar, besök helt enkelt sidan WPForms » Alla formulär från WordPress-instrumentpanelen.
När du är där, klicka på länken 'Redigera' under formulärnamnet för att starta det i formulärbyggaren igen.
Du kan nu anpassa formulärfälten eller lägga till nya fält genom att följa processen som beskrivs ovan.
När du är klar, klicka helt enkelt på knappen 'Spara', så kommer dessa ändringar att visas på din företagswebbplats eller blogg automatiskt.
Visa dina kalkylatorformulärinlägg
När någon fyller i ett formulär på din webbplats sparar WPForms automatiskt deras inlägg i din WordPress-databas. Detta gör att du kan se hur folk använder formuläret och se kontaktinformationen för dina besökare.
För att se denna information, gå helt enkelt till sidan WPForms » Inlägg i WordPress-instrumentpanelen och rulla ner till avsnittet 'Formulärnamn'.
Klicka sedan på kalkylatorformuläret för att se inläggen.
Detta öppnar en lista över alla formulärinlägg på din sida. Härifrån kan du klicka på cirkelikonen för att markera ett inlägg som läst.
Du kan också klicka på länken 'Visa' bredvid varje inlägg för att se alla formulärdetaljer, inklusive e-postadress, telefonnummer, beställda artiklar, fraktrabatt och mer.
Ibland vill du kanske dela ett formulärs data med personer som inte har åtkomst till din WordPress-instrumentpanel. Du kanske till exempel driver en WordPress-utvecklingsbyrå och hanterar flera webbplatser för kunder.
Med WPForms kan du exportera all din data som en CSV- eller XLSX-fil genom att klicka på länken 'Exportera alla' högst upp.
Detta öppnar en ny skärm där du kan välja alla formulärfält vars data du vill exportera. Klicka sedan på knappen 'Ladda ner exportfil' för att spara dina formulärdata som en XLSX-fil.
Bonus: Skapa komplexa anpassade kalkylatorer med Formidable Forms
Om du vill skapa mer komplexa kalkylatorer på din WordPress-webbplats rekommenderar vi att du använder Formidable Forms. Det är ett avancerat formulärplugin som kommer med en dra-och-släpp-byggare, färdiga mallar 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 utmärkt kalkylatormakare.
Du kan använda pluginet för att skapa olika typer av kalkylatorer som en procentkalkylator, priskalkylator, lånekalkylator, ålderskalkylator, livförsäkringskalkylator och ränta-på-ränta-kalkylator.
Till exempel, om du säljer kurser online, kan du lägga till ett ROI-kalkylatorformulär för att visa användarna hur köp av din kurs kan öka deras intjäningspotential.
Några av Formidable Forms andra funktioner inkluderar villkorlig logik, framstegsindikatorer, 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 e-postlista. För mer information, se bara vår kompletta Formidable Forms-recension.
Vi hoppas att den här artikeln hjälpte dig att lägga till en anpassad kalkylator i WordPress. Du kanske också vill se vår steg-för-steg-guide om hur du genererar fler leads med gratis online-kalkylatorer och våra toppval för bästa WordPress-kontaktformulärplugins.
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.
kzain
Du har tagit något komplext och gjort det tillgängligt för alla. Jag älskar hur du har guidat oss genom att skapa en anpassad kalkylator steg för steg, vilket gör det känns uppnåeligt och roligt! Ditt fokus på att använda kalkylatorer för att lösa verkliga problem och förbättra användarupplevelsen är klockrent. Den här guiden är en game-changer för alla som vill ta sin webbplats till nästa nivå. Tack för att du delar med dig av din expertis.
WPBeginner Support
Varsågod!
Admin
Anne
Ville skapa en BMI-kalkylator på min hälsowebbplats också, men har inte WP Forms Pro-versionen. Planerar att köpa i framtiden och följa din enkla guide. Tja, du guidade mig mycket bra och övertygade mig att köpa detta plugin.