Pålitliga WordPress-handledningar, när du behöver dem som mest.
Nybörjarguide till WordPress
WPB-cupen
30 miljoner+
Webbplatser som använder våra plugins
20+
År av WordPress-erfarenhet
3000+
WordPress-handledningar
av experter

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

En bolånekalkylator besvarar frågan som dina besökare faktiskt kom med: vad skulle detta hem kosta varje månad? Utan en lämnar de din sida för att göra uträkningen på en banks webbplats.

Det är också en naturlig lead magnet för fastighetsmäklare, mäklare och långivare. Be om namn och e-postadress tillsammans med lånedetaljerna, och varje beräkning blir en kontakt du kan följa upp.

I den här artikeln visar vi dig tre sätt att lägga till en bolånekalkylator i WordPress: en gratis inbäddning utan plugin, ett gratis plugin som körs direkt i WordPress och en formulärbyggare som samlar in leads med varje beräkning.

Hur man lägger till en bolånekalkylator i WordPress

Vilken metod ska du använda?

VäljBäst förPrissättning
inbäddning av mortgagecalculator.orgEn snabb kalkylator utan pluginGratis
Responsiv bolånekalkylatorEn kalkylator som fungerar direkt i WordPress och stöder din egen valutaGratis
WPFormsSamla in leads med varje beräkningPro-plan och uppåt

Metod 1: Bädda in en kostnadsfri bolånekalkylator (inget plugin)

Det enklaste sättet att skapa en bolånekalkylator är med den kostnadsfria inbäddningsbara kalkylatorn från mortgagecalculator.org. På sidan kan du ställa in standardvärden för huspriset, räntan, låneperioden, fastighetsskatten, PMI och hemförsäkringen.

Ställa in standardvärden för den inbäddningsbara kalkylatorn från mortgagecalculator.org

Verktyget uppdaterar inbäddningskoden när du ändrar dessa inställningar. Om du betjänar besökare utanför USA kan du också lägga till en språkparameter i koden. Till exempel använder &lang=en-GB brittiska inställningar, medan &lang=de-DE använder tyska inställningar.

När du är nöjd med inställningarna, kopiera den genererade koden.

Kopiera den genererade HTML-koden

Öppna sedan ett inlägg eller en sida i WordPress och lägg till ett anpassat HTML-block. Klicka på 'Redigera HTML' för att lägga till den genererade koden.

Lägga till ett anpassat HTML-block

I popup-fönstret som visas, klistra in inbäddningskoden för bolånekalkylatorn. Du kommer då att se en förhandsgranskning till höger. Om allt ser bra ut, klicka på 'Uppdatera' för att spara dina ändringar.

Klistra in inbäddningskoden för bolånekalkylatorn i ett anpassat HTML-block

Slutligen, klicka på knappen 'Spara' eller 'Uppdatera' för att publicera dina ändringar.

Här är hur kalkylatorn ser ut på framsidan:

Bolånekalkylatorn från mortgagecalculator.org visas på en WordPress-sida

Tänk på att kalkylatorn är värd på en tredjepartsserver, så du kan inte ändra stilen för att matcha din webbplats. Den stöder inte heller insamling av leads.

Om du vill visa kalkylatorn på hela webbplatsen, till exempel i en sidopanel eller sidfot, kan du använda WPCode för att infoga den.

Metod 2: Lägg till en enkel, responsiv bolånekalkylator

Om du vill att kalkylatorn ska leva inbyggt i WordPress snarare än i en iframe, är Responsive Mortgage Calculator ett bra gratisalternativ. Den har över 7 000 aktiva installationer och underhålls aktivt.

Först, låt oss installera och aktivera pluginet. Gå till Plugins » Lägg till Plugin i din WordPress-admin och klicka på 'Installera nu' i plugin-rutan för Responsive Mortgage Calculator.

Installera pluginet Responsive Mortgage Calculator

Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Efter att du har installerat pluginet, gå till Inställningar » Resp Mortgage Calculator för att ställa in din valuta, sammansättningsperiod (hur ofta ränta läggs till lånebeloppet) och standardränta.

Konfigurera inställningarna för Responsive Mortgage Calculator med en icke-dollarvaluta

Klicka på 'Spara ändringar' för att behålla dina inställningar.

Därefter kan du lägga till kalkylatorn på vilken sida eller inlägg som helst med kortkoden [mortgagecalculator], eller dra den till ett widgetområde.

Lägga till kortkoden för Responsive Mortgage Calculator

Oroa dig inte om du inte ser en förhandsgranskning. Kortkoden kommer fortfarande att fungera, så du kan fortsätta och klicka på 'Spara' eller 'Uppdatera' för att göra den live.

Nu kan du besöka din webbplats för att se den i aktion:

Den responsiva bolånekalkylatorn visas med en annan valuta än dollar

Dessutom finns det några begränsningar att tänka på. Du kan bara ha en kalkylator per sida, stilalternativen är grundläggande och det finns inga fält för fastighetsskatt eller försäkring. Den samlar inte heller in leads.

Metod 3: Bygg en lead-fångande bolånekalkylator

Om du vill samla in potentiella kunder medan besökare använder din kalkylator, är WPForms det bästa valet. Det låter dig samla in ett namn och en e-postadress tillsammans med deras beräkning. Du behöver Pro-planen eller högre, som inkluderar Calculations-tillägget som dessa mallar använder.

På WPBeginner använder vi WPForms för våra egna formulär och rekommenderar det. Du kan läsa mer i vår fullständiga WPForms-recension.

Skapa formuläret från en mall

Först, låt oss installera och aktivera WPForms och ange din licensnyckel. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

Installera WPForms i WordPress

Gå sedan till WPForms » Lägg till nytt formulär och namnge din bolånekalkylator. WPForms har några mallar för bolånekalkylatorer:

  • Enkel bolånekalkylator, som är bäst om du bara vill ha en snabb uppskattning av månadsbetalningen.
  • Bolånekalkylator, som också visar den totala räntan som betalas och det årliga betalningsbeloppet.
  • Bolåneleadgenerator, som levereras med fält för namn och e-post redan på plats. Om du väljer den kan du hoppa över steget för att samla in potentiella kunder nedan.

Om du hellre vill använda en annan mall, klicka på en mall och sedan på 'Använd mall'.

Hitta mallen för bolånekalkylatorn i WPForms

En popup kommer att uppmana dig att installera och aktivera Calculations-tillägget. Klicka på 'Installera och aktivera'.

Installera och aktivera tillägget Calculations

WPForms tar dig sedan till dra-och-släpp-redigeraren. Du kan se alla anpassningsalternativ i den vänstra panelen och en förhandsgranskning till höger.

Bolånekalkylator i WPForms-redigeraren

Den här mallen levereras med kalkylatorfälten och formeln redan inställda. Du hittar formeln genom att klicka på fältet 'Månadsbetalning' och kontrollera under Fältalternativ » Avancerat » Formel.

Du kan lämna den som den är om du bara vill ha en uppskattning av månadsbetalningen.

Formeln i WPForms mall för bolånekalkylator

Ingen av mallarna inkluderar dock fält för fastighetsskatt eller PMI (privat bolåneförsäkring). Om du vill lägga till dem måste du först lägga till fält för dessa värden i ditt formulär.

Om du hellre inte vill bygga dessa själv, levereras mallen Formidable Forms’ Advanced Mortgage Calculator med inbyggda fält för skatt och försäkring.

Du kan använda fältet Siffror, som endast accepterar numerisk inmatning, så att formeln inte går sönder om någon skriver text. Dra och släpp det helt enkelt från panelen Lägg till fält till förhandsgranskningspanelen. Ändra sedan Etiketten i fliken 'Fältalternativ'.

Lägga till ett skattefält

Upprepa detta steg för alla ytterligare fält du behöver.

När du har lagt till fälten, klicka på fältet 'Månadsbetalning' för att ställa in den nya formeln. Klicka sedan på 'Generera formel' bredvid Formel-rutan och beskriv hur du vill att de ska inkluderas i beräkningen.

Till exempel: "Lägg till årlig fastighetsskatt och PMI till den månatliga bolånebetalningen. Dividera den årliga fastighetsskatten med 12. Beräkna månatlig PMI genom att multiplicera lånebeloppet med PMI-räntan och dividera med 12."

Generera formel för att inkludera skatt och PMI

När AI:n har genererat formeln åt dig, klicka på 'Infoga formel'.

Klicka sedan på länken 'Validera formel' i redigeraren för att säkerställa att allt fungerar bra.

Validera AI-genererad formel
Lägg till lead-fångst och aviseringar

Båda mallarna inkluderar redan ett E-postfält. För att samla in potentiella kunder, dra och släpp även ett 'Namn'-fält på formuläret.

Lägga till ett Namnfält för att samla in leads i WPForms

Välj därefter fliken ‘Aviseringar’ och se till att aviseringar är aktiverade så att du får ett e-postmeddelande varje gång någon fyller i formuläret.

Aktivera WPForms e-postmeddelanden

WPForms har antipiratsskydd som standard. Och eftersom dessa aviseringar är viktiga, rekommenderar vi en SMTP-tjänst så att de inte hamnar i skräpposten. Se vår guide om WordPress inte skickar e-post.

Bädda in kalkylatorn

Nu är det dags att bädda in din bolånekalkylator som samlar in leads.

Klicka på ‘Bädda in’ i toppmenyn. Du kan sedan lägga till formuläret på en befintlig eller ny sida, eller kopiera kortkoden. Om du väljer ‘Befintlig sida’, välj sidan där du vill bädda in din kalkylator i nästa popup. Detta tar dig till sidredigeraren.

WPForms popup för inbäddning

I redigeraren, klicka på ‘+’-knappen för att lägga till WPForms-blocket. Därefter kan du välja din bolånekalkylator som samlar in leads från rullgardinsmenyn.

Lägga till WPForms-blocket och välja formuläret Bolånekalkylator

WordPress laddar sedan in din bolånekalkylator i redigeraren. Om du vill kan du anpassa och styla ditt formulär i panelen till höger. Klicka på ‘Spara’ eller ‘Uppdatera’ när du är klar.

Anpassa WPForms bolånekalkylator

Se vår guide om att lägga till en kortkod i WordPress om du föredrar att använda en kortkod.

Det var allt! Du har framgångsrikt byggt en bolånekalkylator som samlar in leads:

Innan du delar sidan, kör en testberäkning själv och kontrollera att inlägget visas under WPForms » Inlägg och att aviseringsmejlet kommer fram.

Exempel på en lead-samlande bolånekalkylator byggd med WPForms

Om du vill ha fastighetsskatt, försäkring och PMI förbyggt snarare än tillagt med Generate Formula, inkluderar Formidable Forms’ Advanced Mortgage Calculator-mall dessa. Se vår sida Formidable Forms Calculators för detaljer.

FAQ: Lägg till en bolånekalkylator i WordPress

Vilka element är nödvändiga för en bolånekalkylator?

En grundläggande bolånekalkylator behöver lånebeloppet (hempris eller bolånebelopp), räntan (årlig procentandel), låneperioden (till exempel 15 eller 30 år) och ett sätt att beräkna och visa månadsbetalningen. Vissa kalkylatorer inkluderar även fält för fastighetsskatt, försäkring eller årsavgifter, men de är valfria.

Kan jag ändra valutan från dollar?

Ja, alla tre metoder kan stödja andra valutor, men processen skiljer sig åt. Med den kostnadsfria inbäddningen, lägg till en språkkod som &lang=en-GB till inbäddningskoden. Med Responsive Mortgage Calculator kan du ställa in valutan under Inställningar » Resp Mortgage Calculator.

Med WPForms, gå till WPForms » Inställningar, öppna fliken ‘Betalningar’ och välj din valuta från rullgardinsmenyn. Beräknade fält använder den inställningen.

Fungerar detta med Elementor eller andra sidbyggare?

Ja. Du kan klistra in kortkoden eller inbäddningskoden i din sidbyggares kortkod- eller HTML-widget.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en bolånekalkylator i WordPress. Vill du göra din fastighetswebbplats ännu bättre? Dessa handplockade resurser kan hjälpa till:

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.

Avslöjande: Vårt innehåll stöds av läsarna. Det betyder 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 redaktionella process.

Det ultimata WordPress-verktyget

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som alla proffs bör ha!

Läsarnas interaktioner

12 kommentarerLämna ett svar

  1. Det är möjligt att ändra dollar till en annan valuta i kalkylatorn. T.ex. CZK (tjeckisk krona)?

    • WPForms tillåter dig att ändra valutor, du skulle behöva kontrollera med WPForms support för de aktuella tillgängliga valutorna :)

      Admin

      • Tack för rådet. Om möjligt kommer jag definitivt att kontakta supporten för att ta reda på hur man byter valuta. Tyvärr, i Tjeckien, skulle ingen vilja använda en kalkylator med dollar. Tack så mycket för ditt svar och din vägledning.

  2. Fin artikel för att lägga till en bolånekalkylator i WordPress. Att ha en bolånekalkylator är verkligen fördelaktigt för finansiella bloggar och andra relaterade webbplatser eftersom besökare inte behöver besöka en annan webbplats för att få en bolånekalkyl, det är en allt-i-ett-upplevelse för användare som gör att de stannar kvar längre.
    Men jag vill fråga om anpassad CSS-kod kan tillämpas på kalkylatorn och göra den mer tilltalande?

    • Det skulle bero på hur du vill att det ska se ut, men du kan applicera CSS på dessa plugins.

      Admin

    • Jag använder WP Forms och när jag skapar formulär kan du ställa in din egen CSS. Det finns en ganska bra guide om hur du gör detta direkt på WP Forms webbplats, där jag också hämtade råd. Se till att kolla in den så lär du dig mycket om hur du anpassar formulär för dig själv.

  3. Hej, jag vill veta om valutan i ett annat land kommer att påverka bolånekalkylatorn? Jag ser bara $ på skärmdumparna, men jag skulle vilja att det vore sydafrikansk rand (R), är det möjligt?

    • Att ändra valutan bör inte orsaka problem, om du kontaktar Formidable Forms support kan de hjälpa dig med alla frågor du kan ha om hur du ställer in den.

      Admin

  4. Hej. Eftersom vi arbetar med olika banker och var och en av dem har sina egna räntesatser, är det möjligt att ha ett alternativ för kunderna att välja sin föredragna bank baserat på deras räntesats, eller kan jag bara använda 1 specifik fördefinierad räntesats?

    • Du skulle vilja kontakta pluginets support för detaljerna och du kan troligen ställa in det som du vill.

      Admin

    • Beroende på temat kan det ha en viss effekt, men det bör inte vara en stor effekt

      Admin

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år kommentarpolicy, och din e-postadress kommer INTE att publiceras. Använd INTE nyckelord i namn fältet. Låt oss ha en personlig och meningsfull konversation.