Så här addar du en bolånekalkylator i WordPress (Step-by-Step)

Föreställ dig detta: en potentiell köpare besöker din website för fastighetsmäklare. De är förväntansfulla, men kanske lite överväldigade. Vilken typ av fastigheter har de råd med? Vore det inte fantastiskt om de kunde få svar på den frågan direkt på din site?

Om du är i fastighetsbranschen kan det ge dig en stor fördel jämfört med konkurrenterna att lägga till en bolånekalkylator på din website. Det tillåter potentiella bostadsköpare att uppskatta sina månatliga betalningar och positionerar dig som en kunnig och hjälpsam resurs.

I den här artikeln visar vi dig hur du enkelt kan add to en bolånekalkylator i WordPress.

Varför add to en bolånekalkylator i WordPress?

En bolånekalkylator allow användare att få uppskattningar för sina mortgage payments, med räntesats och amorteringsperiod.

Besökare kan helt enkelt lägga till information som deras hemvärde, handpenning, räntor och så vidare. Därefter räknar räknaren ut hur mycket de behöver betala per månad.

Om du gör en fastighetswebbplats med IDX-fastighetslistor, kommer en inteckningskalkylator också att hjälpa till med lead-generering. Besökare kan använda kalkylatorn, men de måste enter sin email address i order att save sina resultat.

Detta kan också minska din studsfrekvens eftersom besökarna inte behöver besöka en annan site för att få en bolånekalkyl.

Finansiella rådgivare, bolånemäklare eller banker och utbildare i privatekonomi kan också ha nytta av att lägga till en bolånekalkylator på sin site.

Med detta sagt, låt oss ta en titt på hur man enkelt skapar en bolånekalkylator i WordPress. Denna tutorial kommer att visa dig två nybörjarvänliga metoder med två olika tillägg för bolånekalkylatorer: WPForms och Formidable Forms.

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

Metod 1: Add to en enkel kalkylator för bolån i WordPress med WPForms

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

Den här metoden rekommenderas för personer som bara vill skapa en enkel men responsiv bolånekalkylator utan add to beräkningar för skatter eller försäkringar.

Först och främst, gå vidare och installera pluginet i WordPress.

När det är gjort, gå till WPForms ” Settings och insert din Pro plans license key från din WPForms Pro page. Klicka sedan helt enkelt på ”Verify Key.

Välj och customize en formulärmall för bolånekalkylator

När license key är aktiv måste du navigera till WPForms ” Add New.

På nästa vy kan du ge ditt nya formulär ett namn. Det kan vara något så enkelt som ”Formulär för bolånekalkylator”.

Rulla ner och använd sökfältet för att hitta en blankettmall för bolånekalkylator.

WPForms har två templates: Formulär för bolånekalkylator och formulär för enkel bolånekalkylator. Båda templates ger liknande funktionalitet men har något olika fält.

Simple Mortgage Calculator Form Template är bäst för webbplatser som vill hjälpa potentiella köpare att snabbt beräkna sin månatliga Payment.

Å andra sidan ger formulärmallen för bolånekalkylator en omfattande uppdelning av detaljerna för bolånet, inklusive totalt betald ränta, total bolånebetalning och årligt betalningsbelopp. Denna nivå av detaljer kan vara användbar för customers som vill förstå sina ekonomiska skyldigheter fullt ut.

Du kan klicka på ”View Demo” för att se varje formulär i action. You can choose either template, but for the purposes of this tutorial we’ll be using the Mortgage Calculator Form Template.

När du har gjort ditt val klickar du bara på ”Use Template”.

I detta skede kommer en popup att visas som säger att du behöver Calculations addon.

Klicka bara på ”Yes, install and activate” för att fortsätta.

Du kommer nu fram till drag-and-drop form builder. Som du kan se kommer templaten med kalkylatorfälten built-in.

Denna vissa template har fält där användare kan enter deras home value (husets totala kostnad) och deras down payment amount (hur mycket köparen betalar i förskott vid köp av en fastighet).

Användare kan också använda sliders för att enter information om deras bolåneränta och bolånets term.

Efter att ha enter denna information kommer den längst ner sektionen automatiskt att beräkna användarens bolån månatliga och årliga betalning Amount, total betald ränta och total bolånebetalning.

Du hittar denna beräkningsformel genom att gå till ”Field Options” och navigera till tabben ”Advanced” i den vänstra panelen. Längst ner hittar du boxen ”Formula”.

Vi rekommenderar att du inte gör ändringar i denna section om du inte är säker på att göra det. Med det sagt, WPForms har ett Kalkyleringsfuskblad som du kan använda om du behöver hjälp.

Låt oss gå vidare och customize formuläret. För att lägga till ett nytt fält, gå till ”Add Fields” section i den vänstra panelen. Sedan är det bara att drag and drop valfritt fält till form buildern.

Här har vi add to ett ”Name”-fält i formuläret för att genomföra användarens namn.

För att customize ett fält klickar du bara på det, och i den vänstra panelen visas tabben ”Field Options”. Här hittar du tre tabs: Allmänt, Avancerat och Smart logik.

Om du vill ändra fältetiketten, infoga beskrivande text eller göra fältet obligatoriskt måste du select ”Allmänt”.

I den följande bilden har vi ändrat fältetiketten ”Hemvärde” till ”Fastighetspris” och lagt till några ytterligare instruktioner. Vi har också gjort fältet obligatoriskt så att användarna måste fylla i denna section för att få beräkningen av deras mortgage payment.

På tabben ”Advanced” kan du add to placeholder text, ange vilka CSS-klasser du vill använda, dölja fältetiketten och aktivera en beräkningsfunktion om det behövs.

Som standard visas ett ”$”-tecken i formuläret så att användarna vet att de ska enter värdena i amerikanska dollar.

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

På tabben ”Smart Logic” kan du 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ånekalkylatorn mer engagerande.

För att använda den behöver du bara toggle på knappen ”Aktivera villkorlig logik”.

Sedan kan du välja att visa eller dölja fältet baserat på vissa kriterier. I exemplet under har vi valt att visa fältet ”Property Price” om användaren enter sin email address.

När du är klar med att customize formuläret klickar du bara på ”Save” högst upp i högra hörnet.

Konfigurera formulärets Settings

Låt oss nu gå vidare och byta till tabben ”Settings” på vänster sida.

På tabben ”Allmänt” kan du ändra formulärets namn och add to en description högst upp i formuläret. Du kan även skriva in några instruktioner och add to en call-to-action för att uppmuntra användare att fylla i formuläret.

Dessutom kan du customize etiketten och behandlingstexten för knappen Submit.

Du vill också byta till tabben ”Skydd mot skräppost och säkerhet”.

WPForms levereras redan med ett skydd mot skräppost som är aktiverat som standard. Du kan dock aktivera Akismet för ytterligare skyddsåtgärder.

Dessutom kan du gratis ställa in ett minsta antal sekunder som en användare måste vänta innan formuläret skickas in. Detta ger äkta användare tillräckligt med tid för att fylla i formuläret men ej tillräckligt med tid för en skräppost att snabbt submita formuläret.

Om du rullar ner kan du också aktivera ett landfilter som limitar formuläret till användare från specifika länder. Vi rekommenderar den här inställningen om your website för fastigheter bara säljer i ett visst land.

När du har togglat på knappen ”Aktivera landfilter” klickar du bara på ”Allow” under landfiltret och väljer det land du säljer till.

Du kan också customize Country Filter Message om det behövs.

Om du flyttar dig ner på sidan kan du också förhindra skräppostformulär med hjälp av en CAPTCHA.

WPForms stöder custom CAPTCHA, reCAPTCHA och hCAPTCHA.

Låt oss gå vidare och flytta till tabben ”Aviseringar”.

WPForms kan skicka ett email till you varje gång någon completed formuläret. För att aktivera denna funktion klickar du helt enkelt på ”Enable Notifications”.

Pro tips: För att svara på new formulärinlämningar direkt, vill du se till att dessa meddelanden kommer säkert fram till din inbox och ej i skräppost-mappen. Med detta sagt rekommenderar vi att du använder en SMTP-tjänst provider för att förbättra din email deliverability och fixa problemet med att WordPress inte skickar e-post korrekt.

Du kan editera innehållet i emailet efter behov. Dessutom kan du skicka bekräftelsemail efter att WordPress-formuläret har skickats in.

När du är nöjd med settings, glöm inte att clicka ”Save” för att store dina ändringar.

Embed kalkylatorn för bolånekostnader på din site i WordPress

You are now ready to display the mortgage calculator on your WordPress blog or website. För att göra detta klickar du på knappen ”Embed” i menyn högst upp.

Nu kan du antingen add formuläret till en befintlig page eller skapa en helt new page.

Alternativt kan du använda en shortcode.

Processen för att lägga till formuläret på en befintlig eller new page är ganska lik.

Om du klickar på ”Select Existing Page” kan du välja den page som du vill använda. Efter det klickar du på ”Let’s Go!

Om du tackar ja till att skapa en new page måste du skriva in en titel på sidan.

På samma sätt som med föregående metod klickar du på ”Let’s Go!” för att fortsätta.

Båda alternativen tar dig till standard WordPress Block Editor.

Här klickar du på knappen ”+” block och väljer WPForms block.

I det nya blocket öppnar du dropdown-menyn ”Select a Form”.

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

You will now see your newly created form.

I sidebaren Block settings kan du customize formulärets design ytterligare. Du kan till exempel ändra bakgrundsfärg och fältkant. Du kan också återvända till WPForms builder genom att välja ”Edit Form”.

När du är nöjd med hur formuläret ser ut klickar du bara på ”Update” eller ”Publicera” för att göra ändringarna live.

Så här gillar du vårt formulär för bolånekalkylator:

Om du använder ett klassiskt, icke-block WordPress theme kan du också visa formuläret i ett widgetar-ready area.

Gå bara till Appearance ” Widgets och click the ’+’ add block button in any widget-ready area. Du kan nu add to WPForms block och selecta formuläret som du just skapat.

I widget editor kan du också edit block editor inställningar för bolånekalkylator widget.

När du är nöjd med hur formuläret ser ut klickar du bara på ”Update”.

Alternativt, om dessa metoder inte fungerar, kan du använda shortcode-metoden för att infoga formulären i pages, posts och andra template-delar. Gå bara tillbaka till WPForms editor och click ”use a shortcode” i embed popup.

You can then copy the shortcode and add it to any page, post, or widget-ready area.

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

Metod 2: Add to en avancerad kalkylator för bolån i WordPress med Formidable Forms

Nästa metod är utmärkt om du vill skapa en avancerad WordPress bolånekalkylator som tar hänsyn till din årliga fastighetsskatt, försäkring och PMI (privat hypoteksförsäkring).

När formuläret har dessa uppgifter, tillsammans med användarens bostadspris, lånebelopp, lånets term och ränta, kan det visa användarens betalningsuppdelning, som också kallas amorteringsschema.

För den här metoden kommer vi att använda Formidable Forms plugin. Detta användarvänliga plugin för Contact Form i WordPress kommer med en avancerad template för bolånekalkylator som du kan add to your site.

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.

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

För detaljerade instruktioner, vänligen se vår Step-by-Step guide om hur man installerar ett WordPress plugin.

Efter aktivering, gå till Formidable ” Global Settings i WordPress dashpanelen. Här kan du klicka på ”Anslut ett konto”.

På nästa vy loggar du bara in på ditt Formidable Forms account.

Formidable Forms kommer nu att be om behörighet att installera Pro plugin. Klicka bara på ”Connect and Install Formidable Forms Pro” för att aktivera din license key.

Nu när du utan problem har konfigurerat Formidable Forms är du redo att add to ett formulär för bolånekalkylator till WordPress.

Använd templates för avancerad kalkylator för bolån

För att börja, gå till Formidable ” Formulär och klicka sedan på ”Add New”.

Nu visas en popup med alla färdiga templates som du kan använda på din WordPress website.

För att hitta templaten för bolånekalkyl skriver du bara ”Advanced Mortgage Calculator” i sökfältet. Sedan hoverar du markören över templaten och clickar på ”Use Template”.

Du kommer nu till Formidable Forms builder. Vid denna punkt kan du customize formuläret för att matcha dina behov.

Börja med att clicka på det fält som du vill customize och select sedan tabben ”Field Options”.

Där kan du ändra fältetiketten, välja om fältet ska vara obligatoriskt eller valfritt, add to placeholder text och mycket annat.

Med Formidable Forms kan du också infoga ett standardvärde i kalkylatorn. Detta allow användare att se hur deras beräkning kan gilla att se ut.

Om du klickar på något av fälten i section ”Financial Analysis”, försök då att undvika att ändra ”Advanced Options”.

Detta area 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 klickar du på ”Save” högst upp i högra hörnet för att spara dina ändringar.

Därefter skriver du in ett namn på ditt formulär så att du enkelt kan identifiera det senare. Klicka sedan på ”Save”.

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

Låt oss nu byta till tabben ”Styling” högst upp i menyn. Det är här du kan välja en design för formuläret.

Om du inte gillar någon av stilarna klickar du bara på knappen ”+ New Style”.

Efter det kommer en popup att visas. Skriv bara in ett namn för den nya stilen och klicka på ”Create new style”.

Du kommer nu till en page där du kan customize formulärets stil.

Känn dig gratis att ändra typografi, färgschema, knappar, checkboxes och så vidare.

När du är nöjd med designen klickar du bara på knappen ”Update” högst upp i högra hörnet.

Konfigurera Settings för Formidable Forms

I det här skedet kan du navigera till menyn ”Settings” högst upp.

Först kan du customize formulärets rubrik och description under tabben ”Allmänt”. Detta kan vara ett bra ställe att inserta några instruktioner om hur man använder formuläret.

Du kan också formatera texten med hjälp av HTML.

Om du rullar nedåt hittar du en inställning som aktiverar Honeypot och JavaScript.

Vi rekommenderar att du aktiverar båda inställningarna eftersom de kan förhindra falska och skadliga skräppostposter.

På tabben ”Actions & Notifications” kan du customize det bekräftelsemail som Formidable Forms skickar till användaren.

Du kan antingen visa ett customize tack-meddelande, redirecta användare till en specifik URL eller skicka dem till en annan page.

En annan tabs som vi rekommenderar att du kontrollerar är ”Knappar”.

Det är här du kan customize Submit-knappens etikett och position och till och med add to en ”Start Over”-knapp om användaren vill starta om sin formulärinlämning.

När du har konfigurerat formulärinställningarna klickar du bara på knappen ”Update” för att save your changes.

Embed det avancerade formuläret för bolånekalkylator på din website

Nu när ditt avancerade formulär för bolånekalkylator är klart kan du add to det till valfritt post, page eller widget-ready area.

Börja med att clicka på knappen ”Embed” högst upp i högra hörnet.

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

Du kan add formuläret till en befintlig page, skapa en new page eller använda en shortcode.

Om du väljer alternativet befintlig sida kommer du att välja en page på nästa vy.

Klicka sedan på ”Infoga formulär”.

Om du däremot väljer alternativet Ny sida kan du skriva in ett namn för den nya page.

När du har gjort det går du vidare och klickar på ”Skapa page”.

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

Om du behöver editera formuläret direkt från block editor, öppnar du bara blockets settings sidebar och clickar på ”Go to form”.

När du är klar klickar du antingen på ”Publicera” eller ”Update”.

Så här gillar vi Formidable Forms formulär för bolånekalkylator:

Alternativt kan du add to bolånekalkylatorn med hjälp av en shortcode eller PHP-kod.

I popupen för embed från tidigare klickar du på ”Insert manually”.

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

När det gäller PHP-koden rekommenderar vi endast den här metoden om du är bekväm med att arbeta med code snippets. 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 du insertar code snippets i WordPress.

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

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.