Hur man lägger till en bolånekalkylator i WordPress (steg för steg)

En bolånekalkylator kan verkligen öka din webbplats effektivitet. Och sanningen är att utan en bolånekalkylator på din webbplats, förlorar du förmodligen potentiella kunder till andra webbplatser.

Vi har sett det hända om och om igen: besökare kommer till din webbplats, blir intresserade, lämnar sedan för att beräkna betalningar någon annanstans – ofta för att aldrig återvända.

Det är därför det är så viktigt att ha en egen kalkylator. Den hjälper till att hålla besökarna engagerade och förvandlar dem till leads. 🙌

I den här steg-för-steg-guiden visar vi dig exakt hur du lägger till en mallåningskalkylator på din WordPress-webbplats. Vi har hittat de mest pålitliga och användarvänliga metoderna som fungerar för alla, oavsett din tekniska erfarenhet.

Varför lägga till en bolånekalkylator i WordPress?

En bolånekalkylator låter användare få uppskattningar för sina bolånebetalningar, med räntan och amorteringstiden.

Besökare kan helt enkelt lägga till information som deras bostadsvärde, kontantinsats, räntor och så vidare. Därefter kommer kalkylatorn att räkna ut hur mycket de behöver betala per månad.

Om du skapar en fastighetswebbplats med IDX-fastighetslistningar, kommer en bolånekalkylator också att hjälpa till med att generera leads. Besökare kan använda kalkylatorn, men de måste ange sin e-postadress för att kunna spara sina resultat.

Detta kan också minska din avvisningsfrekvens eftersom besökare inte behöver besöka en annan webbplats för att få en bolåneberäkning.

Finansiella rådgivare, bolånemäklare, banker och personliga finansutbildare kan också ha nytta av att lägga till en bolånekalkylator på sin webbplats.

Med det sagt, låt oss titta på hur man enkelt skapar en bolånekalkylator i WordPress. Den här handledningen visar två nybörjarvänliga metoder med två olika plugins för bolånekalkylatorer: WPForms och Formidable Forms.

Du kan använda dessa snabblänkar för att hoppa till ett specifikt plugin:

• Metod 1: Lägg till en enkel WordPress-bolånekalkylator med WPForms
• Metod 2: Lägg till en avancerad WordPress-bolånekalkylator med Formidable Forms
• Bonusresurser 🔗: Utveckla din WordPress-webbplats för fastigheter

Låt oss börja!

Metod 1: Lägg till en enkel WordPress-bolånekalkylator med WPForms

Den första metoden är att använda WPForms. Med sina AI-verktyg och över 2 000 formulärmallar, låter detta dra-och-släpp-formulärplugin dig skapa olika formulär, inklusive en bolånekalkylator.

Denna metod rekommenderas för personer som bara vill skapa en enkel men ändå responsiv bolånekalkylator utan ytterligare beräkningar för skatter eller försäkringar.

På WPBeginner använder vi WPForms för att skapa alla typer av formulär – från vårt kontaktformulär till våra årliga enkäter till läsarna. Det är vårt favoritverktyg, och vi rekommenderar det starkt. Se vår fullständiga WPForms-recension för att lära dig mer om det.

Först och främst, fortsätt och installera pluginet i WordPress.

När det är gjort, gå till WPForms » Inställningar och infoga din Pro-plans licensnyckel från din WPForms-kontosida. Klicka sedan helt enkelt på ‘Verifiera nyckel.’

Välj och anpassa en mall för mallåningskalkylator

När licensnyckeln är aktiv måste du navigera till WPForms » Lägg till ny.

På nästa skärm kan du ge ditt nya formulär ett namn. Det kan vara något så enkelt som 'Bolånekalkylatorformulär'.

Därefter väljer du hur du bygger formuläret. Med WPForms kan du:

• använd en tom duk för att skapa formulär från grunden
• dra nytta av AI-formulärbyggaren för att omedelbart skapa formulär med en enkel prompt
• välj en färdig mall.

För den här handledningen kommer vi att visa dig hur du använder en mall och anpassar den efter dina behov med hjälp av dra-och-släpp-redigeraren.

Så låt oss scrolla ner på ‘Inställningar’-sidan och använda sökfältet för att hitta en mall för bolånekalkylator.

WPForms har två mallar: Bolånekalkylatorformulär och Enkel bolånekalkylatorformulär. Båda mallarna ger liknande funktionalitet men har något olika fält.

Formulärmall för enkel bolånekalkylator är bäst för fastighetssajter som vill hjälpa potentiella köpare att snabbt uppskatta sin månatliga bolånebetalning.

Å andra sidan ger mall för bolånekalkylatorformulär en omfattande uppdelning av bolånedetaljerna, inklusive totalt betald ränta, total bolånebetalning och årlig betalningsbelopp.

Denna detaljnivå kan vara användbar för kunder som vill förstå sina finansiella åtaganden fullt ut.

Du kan klicka på ‘Visa demo’ för att se varje formulär i aktion. Du kan välja vilken mall som helst, men för den här handledningen kommer vi att använda mallen för bolånekalkylatorformulär.

När du har gjort ditt val, hovra bara över rutan och klicka på ‘Använd mall’.

I det här skedet kommer en popup att visas som säger att du behöver Calculations-tillägget.

Klicka bara på ‘Ja, installera och aktivera’ för att fortsätta.

Du kommer nu till dra-och-släpp-formulärbyggaren. Som du kan se kommer mallen med kalkylatorfälten inbyggda.

Denna specifika mall har fält där användare kan ange sitt husvärde (total kostnad för huset) och sitt kontantinsatsbelopp (hur mycket köparen betalar i förskott vid köp av en fastighet).

Användare kan också använda reglagen för att ange information om räntan på sitt bostadslån och löptiden för bolånet.

Efter att ha angett denna information kommer den nedre sektionen automatiskt att beräkna användarens månatliga och årliga bolånebetalning, total ränta som betalas och total bolånebetalning.

Du hittar denna beräkningsformel genom att gå till ‘Fältalternativ’ och navigera till fliken ‘Avancerat’ i panelen till vänster. Längst ner hittar du rutan ‘Formel’.

Vi rekommenderar att du inte gör några ändringar i det här avsnittet om du inte är säker på hur du gör det. Med det sagt har WPForms ett formelsammanfattning för beräkningar som du kan använda om du behöver hjälp.

Om du kämpar med formeln kan du använda funktionen AI-beräkningar för att göra det enklare.

Klicka helt enkelt på knappen ‘Generera formel’ bredvid fältet Formel.

Detta öppnar ett chattfönster där du kan beskriva vilken typ av beräkning du behöver på klartext, och AI:n kommer omedelbart att generera rätt formel åt dig.

Nu ska vi gå vidare och anpassa formuläret. För att lägga till ett nytt fält, gå till sektionen ‘Lägg till fält’ i panelen till vänster. Dra och släpp sedan vilket fält som helst till formulärbyggaren.

Här har vi lagt till ett fält för ‘Namn’ i formuläret för att fånga användarens namn.

För att anpassa ett fält, klicka bara på det, så visas fliken 'Fältalternativ' i panelen till vänster. Här hittar du tre flikar: Allmänt, Avancerat och Smart logik.

Om du vill ändra fältetiketten, infoga beskrivande text eller göra fältet obligatoriskt, måste du välja ‘Allmänt’.

I följande bild har vi ändrat etiketten för fältet ‘Husvärde’ till ‘Fastighetspris’ och lagt till ytterligare instruktioner. Vi har också gjort fältet obligatoriskt, så användare måste fylla i detta avsnitt för att få sin bolånebetalningsberäkning.

Fliken ‘Avancerat’ är där du kan lägga till platshållartext, ange eventuella CSS-klasser du vill använda, dölja fältetiketten och aktivera en beräkningsfunktion vid behov.

Som standard visar formuläret ett ‘$’-tecken så att användarna vet att de ska ange sina värden i amerikanska dollar.

Alternativt kan du infoga ett exempel i fältetiketten, som ‘t.ex. 500 000’, så att användaren vet hur man anger priset korrekt.

Fliken ‘Smart Logic’ låter dig aktivera villkorlig logik i fältet. Det är valfritt, men det är en bra funktion för att göra ditt formulär för bolånekalkylator mer engagerande.

För att använda den, aktivera bara knappen ‘Aktivera villkorlig logik’.

Sedan kan du välja att visa eller dölja fältet baserat på vissa kriterier. I exemplet nedan har vi valt att visa fältet ‘Fastighetspris’ om användaren anger sin e-postadress.

När du är klar med att anpassa formuläret, klicka bara på ‘Spara’ i det övre högra hörnet.

Konfigurera formulärets inställningar

Nu går vi vidare och växlar till fliken ‘Inställningar’ på vänster sida.

Under fliken ‘Allmänt’ kan du ändra formulärets namn och lägga till en beskrivning högst upp i formuläret. Du kan till och med skriva in instruktioner och lägga till en call-to-action för att uppmuntra användare att fylla i formuläret.

Dessutom kan du anpassa etiketten och bearbetningstexten för skicka-knappen.

Du vill också växla till fliken ‘Spamskydd och säkerhet’.

WPForms levereras redan med anti-spam-skydd som är aktiverat som standard. Du kan dock aktivera Akismet för ytterligare skyddsåtgärder.

Dessutom kan du gärna ställa in ett minimiantal sekunder som en användare måste vänta innan formuläret skickas in. Detta ger äkta användare tillräckligt med tid att fylla i formuläret, men inte tillräckligt med tid för en spam-bot att skicka in formuläret snabbt.

Genom att skrolla ner kan du också aktivera ett landsfilter, som begränsar formuläret till användare från specifika länder. Vi rekommenderar denna inställning om din fastighetswebbplats bara säljer i ett visst land.

När du har aktiverat knappen ‘Aktivera landfilter’ klickar du bara på ‘Tillåt’ under Landfilter och väljer det land du säljer till.

Du kan också anpassa meddelandet för landfilter om det behövs.

Om du skrollar ner på sidan kan du också förhindra spam-formulärinlämningar med hjälp av en CAPTCHA.

WPForms stöder anpassad CAPTCHA, reCAPTCHA och hCAPTCHA.

Låt oss gå vidare till fliken ‘Aviseringar’.

WPForms kan skicka dig ett e-postmeddelande varje gång någon fyller i formuläret. För att aktivera denna funktion, klicka helt enkelt på ‘Aktivera aviseringar’.

Du kan redigera e-postmeddelandets innehåll efter behov. Dessutom kan du skicka bekräftelsemejl efter inlämning av WordPress-formulär.

När du är nöjd med dessa inställningar, glöm inte att klicka på ‘Spara’ för att lagra dina ändringar.

Bädda in bolånekalkylatorn på din WordPress-webbplats

Du är nu redo att visa bolånekalkylatorn på din WordPress-blogg eller webbplats. För att göra detta, klicka på knappen ‘Bädda in’ i toppmenyn.

Nu kan du antingen lägga till formuläret på en befintlig sida eller skapa en helt ny sida.

Alternativt kan du använda en kortkod.

Processen för att lägga till formuläret på en befintlig eller ny sida är ganska likartad.

Om du klickar på ‘Välj befintlig sida’ kan du sedan välja den sida du vill använda. Klicka sedan på ‘Låt oss köra igång!’

Om du väljer att skapa en ny sida måste du skriva in en sidtitel.

Liknande den tidigare metoden, klicka på 'Låt oss gå!' för att fortsätta.

Båda alternativen tar dig till den vanliga WordPress blockredigerare.

Klicka här på knappen ‘+’ block och välj WPForms-blocket.

I det nya blocket, öppna rullgardinsmenyn ‘Välj ett formulär’.

Därefter väljer du helt enkelt det formulär du skapade tidigare.

Du kommer nu att se ditt nyskapade formulär.

I sidofältet för blockinställningar kan du anpassa formulärets design ytterligare.

Till exempel kan du ändra bakgrundsfärgen och fältkanten. Du kan också återgå till WPForms-byggaren genom att välja ‘Redigera formulär.’

När du är nöjd med hur formuläret ser ut, klicka bara på ‘Uppdatera’ eller ‘Publicera’ för att göra ändringarna live.

Här är hur vår bolånekalkylator ser ut:

Om du använder ett klassiskt, icke-block WordPress-tema, kan du även visa formuläret i ett widget-redo område.

Gå bara till Utseende » Widgetar och klicka på knappen ‘+’ för att lägga till block i valfritt widget-redo område. Du kan nu lägga till WPForms-blocket och välja formuläret du just skapade.

I widgetredigeraren kan du även redigera blockinställningarna för bolånekalkylator-widgeten.

När du är nöjd med hur formuläret ser ut, klicka bara på ‘Uppdatera’.

Alternativt, om dessa metoder inte fungerar, kan du använda kortkodmetoden för att infoga formulären på sidor, inlägg och andra mallkomponenter.

Gå helt enkelt tillbaka till WPForms-redigeraren och klicka på ‘använd en kortkod’ i popup-fönstret för inbäddning.

Du kan sedan kopiera kortkoden och lägga till den på vilken sida, inlägg eller widget-redo område som helst.

För mer information, se vår guide om hur man lägger till en kortkod i WordPress.

Metod 2: Lägg till en avancerad WordPress-bolånekalkylator med Formidable Forms

Den här nästa metoden är utmärkt om du vill skapa en avancerad WordPress-bolånekalkylator som tar hänsyn till dina årliga fastighetsskatter, försäkringar och PMI (privat bolåneförsäkring).

När formuläret har den datan, tillsammans med användarens huspris, lånebelopp, låneperiod och ränta, kan det visa användarens betalningsuppdelning, som också kallas amorteringsplanen.

För den här metoden kommer vi att använda Formidable Forms-pluginet. Detta användarvänliga WordPress-kontaktformulärplugin levereras med en avancerad mall för bolånekalkylator som du kan lägga till på din webbplats.

Vi har gjort en djupdykning i detta plugin och testat det. Du kan hitta allt om det i vår detaljerade Formidable Forms-recension!

Det första du behöver göra är att installera och aktivera både Formidable Forms Lite och Formidable Forms Premium (Business plan) plugins.

Gratispluginet har begränsade funktioner, men Formidable Forms Pro använder det som bas för sina mer avancerade funktioner.

För detaljerade instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När du har aktiverat, gå till Formidable » Globala inställningar i WordPress-instrumentpanelen. Här kan du klicka på ‘Anslut ett konto.’

På nästa skärm, logga helt enkelt in på ditt Formidable Forms-konto.

Formidable Forms kommer nu att be om tillåtelse att installera Pro-pluginet. Klicka helt enkelt på ‘Anslut och installera Formidable Forms Pro’ för att aktivera din licensnyckel.

Nu när du har konfigurerat Formidable Forms framgångsrikt är du redo att lägga till ett mallåningsformulär till WordPress.

Använd mallen för avancerad bolånekalkylator

För att börja, gå till Formidable » Forms och klicka sedan på ‘Lägg till ny.’

En popup visas nu och visar alla färdiga mallar som du kan använda på din WordPress-webbplats.

För att hitta mallen för bolånekalkylator, skriv bara ‘Avancerad bolånekalkylator’ i sökfältet. Håll sedan muspekaren över mallen och klicka på ‘Använd mall.’

Du kommer nu till Formidable Forms-byggaren.

Vid det här laget kan du anpassa formuläret för att passa dina behov.

För att börja, klicka på fältet du vill anpassa och välj sedan fliken ‘Fältalternativ’.

Därifrån kan du ändra fältetiketten, välja om fältet är obligatoriskt eller valfritt, lägga till platshållartext och många andra saker.

Med Formidable Forms kan du även infoga ett standardvärde i kalkylatorn. Detta gör att användarna kan se hur deras beräkning kan se ut.

Om du klickar på något av fälten i sektionen ‘Finansiell analys’, försök sedan att undvika att ändra ‘Avancerade alternativ.’

Detta område innehåller beräkningsformlerna, så att ändra dem kan helt förstöra bolånekalkylatorn.

När du är nöjd med hur formuläret ser ut, klicka bara på ‘Spara’ i det övre högra hörnet för att spara dina ändringar.

Skriv sedan in ett namn för ditt formulär så att du enkelt kan identifiera det senare. Klicka sedan på ‘Spara.’

Anpassa stilen på formuläret för bolånekalkylatorn

Låt oss nu växla till fliken ‘Stil’ i toppmenyn. Det är här du kan välja en design för formuläret.

Om du inte gillar någon av stilarna, klicka bara på knappen ‘+ Ny stil’.

Därefter visas ett popup-fönster. Skriv helt enkelt in ett namn för denna nya stil och klicka på 'Skapa ny stil'.

Du kommer nu att dirigeras till en sida där du kan anpassa formulärstilen.

Ändra gärna typografi, färgschema, knappstilar, kryssrutor och så vidare.

När du är nöjd med designen klickar du bara på knappen 'Uppdatera' i det övre högra hörnet.

Konfigurera Formidable Forms-inställningarna

I det här skedet kan du navigera till menyn ‘Inställningar’ högst upp.

Först kan du anpassa formulärrubriken och beskrivningen under fliken ‘Allmänt’. Detta kan vara en bra plats att infoga instruktioner om hur formuläret används.

Du kan också formatera texten med HTML.

Skrolla ner, du hittar en inställning som aktiverar Honeypot och JavaScript.

Vi rekommenderar att aktivera båda inställningarna eftersom de kan förhindra falska och skadliga spam-inlägg.

Fliken ‘Åtgärder & Aviseringar’ är där du kan anpassa bekräftelsemejlet som Formidable Forms skickar till användaren.

Du kan antingen visa ett anpassat tackmeddelande, omdirigera användare till en specifik URL, eller skicka dem till en annan sida.

En annan flik vi rekommenderar att titta på är ‘Knappar.’

Här kan du anpassa etiketten och positionen för skicka-knappen. Du kan till och med lägga till en knapp för ‘Börja om’ om användaren vill starta om sin formulärinlämning.

När du har konfigurerat formulärinställningarna, klicka bara på knappen ‘Uppdatera’ för att spara dina ändringar.

Bädda in formuläret för avancerad bolånekalkylator på din webbplats

Nu när ditt avancerade formulär för bolånekalkylator är klart kan du lägga till det i vilket inlägg, sida eller widget-redo område som helst.

För att börja, klicka på knappen ‘Bädda in’ i det övre högra hörnet.

Du kommer nu att se en popup som säger att du kan lägga till formuläret på tre sätt.

Du kan lägga till formuläret på en befintlig sida, skapa en ny sida eller använda en kortkod.

Om du väljer alternativet befintlig sida, väljer du en sida på nästa skärm.

Klicka sedan på ‘Infoga formulär’.

Om du å andra sidan väljer alternativet för ny sida, kan du sedan skriva in ett namn för den nya sidan.

När det är gjort, fortsätt och klicka på ‘Skapa sida’.

Med båda alternativen kommer Formidable Forms automatiskt att infoga formulärblocket i sidans blockredigerare.

Om du behöver redigera formuläret direkt från innehållsredigeraren, öppna bara blockets inställningssidofält och klicka på 'Gå till formulär'.

När du är redo, klicka antingen på ‘Publicera’ eller ‘Uppdatera’.

Här är hur vårt Formidable Forms mallåningsformulär ser ut:

Alternativt kan du lägga till bolånekalkylatorn med en kortkod eller PHP-kod.

I popup-fönstret för inbäddning tidigare, klicka på 'Infoga manuellt'.

Sedan kan du kopiera antingen kortkoden eller PHP-koden. Återigen, för det första alternativet kan du läsa vår artikel om hur man lägger till en kortkod i WordPress.

När det gäller PHP-koden rekommenderar vi denna metod endast om du är bekväm med att arbeta med kodavsnitt. Vi rekommenderar att du använder WPCode för detta, eftersom detta plugin gör det säkert och enkelt att infoga kod i WordPress.

För mer information kan du läsa vår guide om hur man infogar kodavsnitt i WordPress.

Och för att lära dig mer om pluginet, se vår kompletta WPCode-recension. Några av våra affärspartners använder det för att infoga och hantera anpassade kodavsnitt, och det har fungerat exceptionellt bra!

Bonusresurser 🔗: Utveckla din WordPress-webbplats för fastigheter

Vill du göra din fastighetswebbplats ännu bättre? Från att attrahera fler leads till att snabba upp dina sidor, kan dessa handplockade resurser hjälpa dig att växa och optimera din WordPress-webbplats:

• Bästa WordPress Fastighetsplugins
• Bästa WordPress-teman för fastighetsmäklare
• Hur man bäddar in en Google-karta med en kartnål i WordPress-formulär
• Hur man korrekt lägger till en framträdande innehållsskyjutare i WordPress
• Hur man skapar en webbkatalog i WordPress
• Tips för att växa din verksamhet online
• Den ultimata WordPress Local SEO för att öka rankingen
• Den ultimata guiden för att öka WordPress-hastighet & prestanda

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en bolånekalkylator i WordPress. Du kanske också vill se vår artikel om hur man skapar en kalkylator för billån eller bilbetalningar i WordPress och våra experttips om bästa sätten att skapa mer interaktiva formulär.

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.