Jak dodać kalkulator hipoteczny w WordPress (krok po kroku)

Wyobraź sobie taką sytuację: potencjalny nabywca przechodzi na Twoją witrynę internetową. Są podekscytowani, ale być może nieco przytłoczeni. Na jakie nieruchomości mogą sobie pozwolić? Czy nie byłoby wspaniale, gdyby mogli odpowiedzieć na to pytanie właśnie na twojej witrynie?

Jeśli działasz w branży nieruchomości, dodanie kalkulatora kredytu hipotecznego do twojej witryny internetowej może dać ci dużą przewagę nad konkurencją. Pozwala potencjalnym nabywcom domów oszacować miesięczne płatności i pozycjonuje cię jako kompetentnego i pomocnego zasób.

W tym artykule pokażemy, jak łatwo dodać kalkulator kredytu hipotecznego w WordPress.

Dlaczego warto dodać kalkulator hipoteczny w WordPress?

Kalkulator kredytu hipotecznego pozwala użytkownikom uzyskać ocenę ich płatności hipotecznych, wraz ze stopą procentową i okresem amortyzacji.

Odwiedzający mogą po prostu dodać informacje, takie jak wartość domu, zaliczka, oprocentowanie itp. Następnie kalkulator obliczy, ile muszą płacić miesięcznie.

Jeśli tworzysz witrynę internetową z ofertami nieruchomości IDX, kalkulator hipoteczny pomoże również w generowaniu leadów. Odwiedzający mogą skorzystać z kalkulatora, ale będą musieli wpisz swój adres e-mail, aby zapisać wyniki.

Może to również zmniejszyć twój współczynnik odrzuceń, ponieważ odwiedzający nie muszą przechodzić na inną witrynę, aby uzyskać kalkulację kredytu hipotecznego.

Doradcy finansowi, brokerzy kredytów hipotecznych lub banki, a także edukatorzy w zakresie finansów osobistych mogą również skorzystać z dodania kalkulatora kredytu hipotecznego do swojej witryny.

Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo stworzyć kalkulator kredytu hipotecznego w WordPress. Ten poradnik pokaże ci dwie przyjazne dla początkujących metody z dwoma różnymi wtyczkami kalkulatorów hipotecznych: WPForms i Formidable Forms.

Możesz użyć tych szybkich odnośników, aby przejść do konkretnej wtyczki:

Metoda 1: Dodanie prostego kalkulatora hipotecznego WordPress za pomocą WPForms

Pierwszą metodą jest użycie WPForms. Dzięki ponad 1800 szablonom formularzy ta wtyczka typu „przeciągnij i upuść” umożliwia tworzenie różnych formularzy, w tym kalkulatora kredytu hipotecznego.

Ta metoda jest zalecana dla osób, które chcą po prostu stworzyć prosty, ale responsywny kalkulator kredytu hipotecznego bez dodatkowych obliczeń dotyczących podatków lub ubezpieczenia.

Po pierwsze, zainstaluj wtyczkę w WordPressie.

Po wykonaniu tej czynności przejdź do WPForms ” Ustawienia i wstaw klucz licencyjny twojego planu Pro ze strony konta WPForms. Następnie wystarczy kliknąć „Zweryfikuj klucz”.

Wybierz i dostosuj szablon formularza kalkulatora hipotecznego

Po włączeniu klucza licencyjnego należy przejść do WPForms ” Add New.

Na następnym ekranie możesz nadać twojemu nowemu formularzowi nazwę. Może to być coś tak prostego jak „Formularz kalkulatora hipotecznego”.

Przewijając w dół, użyj paska wyszukiwania, aby znaleźć szablon formularza kalkulatora kredytu hipotecznego.

WPForms posiada dwa szablony: Formularz kalkulatora hipotecznego i Prosty formularz kalkulatora hipotecznego. Oba szablony zapewniają podobną funkcjonalność, ale mają nieco inne pole.

Szablon prostego kalkulatora hipotecznego jest najlepszy dla witryn z branży nieruchomości, które chcą pomóc potencjalnym nabywcom szybko oszacować miesięczną ratę kredytu hipotecznego.

Z drugiej strony, szablon formularza kalkulatora hipotecznego zapewnia kompleksowe zestawienie szczegółów kredytu hipotecznego, w tym całkowitą kwotę zapłaconych odsetek, całkowitą spłatę kredytu hipotecznego i roczną kwotę płatności. Taki poziom szczegółowości może być przydatny dla klientów, którzy chcą w pełni zrozumieć swoje zobowiązania finansowe.

Możesz kliknąć „Zobacz demo”, aby zobaczyć każdy formularz w działaniu. Możesz wybrać dowolny szablon, ale na potrzeby tego poradnika użyjemy szablonu formularza kalkulatora hipotecznego.

Po dokonaniu twojego wyboru, po prostu kliknij „Użyj szablonu”.

Na tym etapie pojawi się wyskakujące okienko z informacją, że potrzebny jest dodatek Calculations.

Wystarczy kliknąć „Tak, zainstaluj i włącz”, aby kontynuować.

Przejdziesz teraz do kreatora formularzy typu „przeciągnij i upuść”. Jak widać, szablon zawiera wbudowane pola kalkulatora.

Ten konkretny szablon ma pola, w których użytkownicy mogą wpisz wartość domu (całkowity koszt domu) i kwotę zaliczki (ile kupujący płaci z góry przy zakupie nieruchomości).

Użytkownicy mogą również korzystać z pokazów slajdów, aby wpisz informacje o oprocentowaniu kredytu mieszkaniowego i okresie spłaty kredytu hipotecznego.

Po wpiszeniu tych informacji dolna sekcja automatycznie obliczy miesięczną i roczną kwotę spłaty kredytu hipotecznego użytkownika, łączną kwotę zapłaconych odsetek i łączną kwotę spłaty kredytu hipotecznego.

Tę formułę obliczeniową można znaleźć, przechodząc do „Opcji pola” i przechodząc do karty „Zaawansowane” w panelu po lewej stronie. Na dole znajduje się pole „Formuła”.

Zalecamy, aby nie wprowadzać zmian w tej sekcji, chyba że jesteś tego pewien. Jeśli potrzebujesz pomocy, WPForms ma ściągawkę z obliczeń, z której możesz skorzystać.

Przejdźmy dalej i dostosujmy formularz do własnych potrzeb. Aby utworzyć nowe pole, przejdź do sekcji „Dodaj pola” w panelu po lewej stronie. Następnie przeciągnij i upuść dowolne pole do kreatora formularzy.

Tutaj dodaliśmy pole „Nazwa” do formularza, aby przechwycić nazwę użytkownika.

Aby dostosować pole, wystarczy na nie kliknąć, a w panelu po lewej stronie pojawi się karta „Opcje pola”. Znajdują się tam trzy karty: Ogólne, Zaawansowane i Inteligentna logika.

Jeśli chcesz zmienić etykietę pola, wstawić tekst opisowy lub uczynić pole obowiązkowym, musisz wybrać opcję „Ogólne”.

Na poniższym obrazku zmieniliśmy etykietę pola „Wartość domu” na „Cena nieruchomości” i dodaliśmy kilka dodatkowych instrukcji. Uczyniliśmy również to pole wymaganym, aby użytkownicy musieli wypełnić tę sekcję w celu obliczenia spłaty kredytu hipotecznego.

Karta „Zaawansowane” to miejsce, w którym można dodać tekst zastępczy, określić dowolne klasy CSS, których chcesz użyć, ukryć etykietę pola i w razie potrzeby włączyć funkcję obliczania.

Domyślnie formularz wyświetla znak „$”, aby użytkownicy wiedzieli, że powinni wpisz swoje wartości w dolarach amerykańskich.

Alternatywnie można wstawić przykład w etykiecie pola, taki jak „np. 500 000”, aby użytkownik wiedział, jak prawidłowo wstawić cenę.

Karta „Inteligentna logika” umożliwia włączanie logiki warunkowej w polu. Jest to opcjonalne, ale jest to dobra funkcja, dzięki której twój formularz kalkulatora kredytu hipotecznego będzie bardziej angażujący.

Aby z niej skorzystać, wystarczy włączyć przycisk „Włącz logikę warunkową”.

Następnie możesz pokazać lub ukryć pole na podstawie określonych kryteriów. W poniższym przykładzie zdecydowaliśmy się pokazać pole „Cena nieruchomości”, jeśli użytkownik wpisze swój adres e-mail.

Po zakończeniu konfigurowania formularza wystarczy kliknąć przycisk „Zapisz” w prawym górnym rogu.

Konfiguracja ustawień formularza

Teraz przejdźmy do karty „Ustawienia” po lewej stronie.

W karcie „Ogólne” można zmienić nazwę formularza i dodać opis w górnej części formularza. Możesz nawet wpisać rodzaj instrukcji i dodać wezwanie do działania, aby zachęcić użytkowników do wypełnienia formularza.

Dodatkowo można dostosować etykietę przycisku przesyłania i tekst przetwarzania.

Należy również przejść do karty „Ochrona przed spamem i zabezpieczenia”.

WPForms jest już wyposażony w ochronę antyspamową, która jest domyślnie włączona. Możesz jednak włączyć Akismet, aby uzyskać dodatkowe środki ochronne.

Dodatkowo można ustawić minimalną liczbę sekund, jaką użytkownik musi odczekać przed wysłaniem formularza. Daje to prawdziwym użytkownikom wystarczająco dużo czasu na wypełnienie formularza, ale nie daje wystarczająco dużo czasu botom spamowym na szybkie przesłanie formularza.

Przewijając w dół, można również włączyć filtr kraju, który ogranicza formularz do użytkowników z określonych krajów. Zalecamy to ustawienie, jeśli twoja witryna internetowa nieruchomości sprzedaje tylko w określonym kraju.

Po włączeniu przycisku „Włącz filtr krajów” wystarczy kliknąć „Zezwól” pod filtrem krajów i wybrać kraj, do którego prowadzisz sprzedaż.

W razie potrzeby można również dostosować wiadomość filtra kraju.

Jeśli przejdziesz na dół strony, możesz również zapobiec spamerskiemu przesyłaniu formularzy za pomocą CAPTCHA.

WPForms obsługuje własne CAPTCHA, reCAPTCHA i hCAPTCHA.

Przejdźmy dalej i przejdźmy do karty „Powiadomienia”.

WPForms może wysyłać e-mail za każdym razem, gdy ktoś wypełni formularz. Aby włączyć tę funkcję, wystarczy kliknąć „Włącz powiadomienia”.

Pro Tip : Aby od razu odpowiadać na nowe zgłoszenia formularzy, upewnij się, że wiadomości te docierają bezpiecznie do twojej skrzynki odbiorczej, a nie do katalogu spamu. Mając to na uwadze, zalecamy skorzystanie z dostawcy usług SMTP, aby poprawić wskaźniki dostarczalności e-maili i naprawić problem z nieprawidłowym wysyłaniem wiadomości e-mail przez WordPress.

Treść e-maila można dowolnie edytować. Ponadto można wysyłać e-maile z potwierdzeniem po przesłaniu formularza WordPress.

Kiedy będziesz zadowolony z tych ustawień, nie zapomnij kliknąć „Zapisz”, aby zapisać twoje zmiany.

Osadzanie kalkulatora kosztów kredytu hipotecznego na twojej witrynie WordPress

Teraz możesz wyświetlić kalkulator kredytu hipotecznego na swoim blogu lub witrynie internetowej WordPress. Aby to zrobić, kliknij przycisk „Osadzanie” w górnym menu.

Teraz możesz dodać formularz do istniejącej strony lub utworzyć zupełnie nową stronę.

Alternatywnie można użyć krótkiego kodu.

Proces dodawania formularza do istniejącej lub nowej strony jest dość podobny.

Jeśli klikniesz „Wybierz istniejącą stronę”, możesz wybrać stronę, której chcesz użyć. Następnie kliknij „Let’s Go!”.

Jeśli zdecydujesz się utworzyć nową stronę, będziesz musiał wpisać jej tytuł.

Podobnie jak w poprzedniej metodzie, kliknij „Let’s Go!”, aby kontynuować.

Obie opcje spowodują przejście do standardowego edytora bloków WordPress.

Tutaj kliknij przycisk bloku „+” i wybierz blok WPForms.

W nowym bloku otwórz menu rozwijane „Wybierz formularz”.

Następnie wystarczy wybrać utworzony wcześniej formularz.

Zobaczysz teraz swój nowo utworzony formularz.

Na panelu bocznym Block settings można dodatkowo dostosować wygląd formularza. Można na przykład zmienić kolor tła i obramowanie pola. Można również powrócić do kreatora WPForms, wybierając opcję „Edytuj formularz”.

Gdy będziesz zadowolony z wyglądu formularza, po prostu kliknij „Aktualizuj” lub „Opublikuj”, aby wprowadzić zmiany.

Oto jak wygląda nasz formularz kalkulatora kredytu hipotecznego:

Jeśli korzystasz z klasycznego, nieblokującego motywu WordPress, możesz również wyświetlić formularz w obszarze gotowym na widżet.

Wystarczy przejść do Wygląd ” Widżety i kliknąć przycisk dodawania bloku „+” w dowolnym obszarze gotowym na widżet. Możesz teraz dodać blok WPForms i wybrać właśnie utworzony formularz.

W edytorze widżetów można również edytować ustawienia bloków widżetu kalkulatora kredytu hipotecznego.

Gdy będziesz zadowolony z wyglądu formularza, po prostu kliknij „Aktualizuj”.

Alternatywnie, jeśli te metody nie działają, możesz użyć metody krótkiego kodu, aby wstawić formularze do stron, wpisów i innych fragmentów szablonu. Wystarczy wrócić do edytora WPForms i kliknąć „użyj krótkiego kodu” w wyskakującym okienku osadzania.

Następnie można skopiować krótki kod i dodać go do dowolnej strony, wpisu lub obszaru gotowego na widżet.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania krótkiego kodu w WordPress.

Metoda 2: Dodaj zaawansowany kalkulator hipoteczny WordPress za pomocą Formidable Forms

Ta kolejna metoda jest doskonała, jeśli chcesz stworzyć zaawansowany kalkulator kredytu hipotecznego WordPress, który uwzględnia twoje roczne podatki od nieruchomości, ubezpieczenie i PMI (prywatne ubezpieczenie hipoteczne).

Gdy formularz ma już te dane, wraz z ceną domu użytkownika, kwotą pożyczki, okresem kredytowania i stopą procentową, może wyświetlić podział płatności użytkownika, który jest również nazywany harmonogramem amortyzacji.

W tej metodzie użyjemy wtyczki Formidable Forms. Ta przyjazna dla użytkownika wtyczka formularza kontaktowego WordPress zawiera zaawansowany szablon kalkulatora hipotecznego, który możesz dodać do swojej witryny.

Pierwszą rzeczą, którą należy zrobić, jest zainstalowanie i włączanie zarówno wtyczki Formidable Forms Lite, jak i Formidable Forms premium (plan biznesowy).

Darmowa wtyczka ma ograniczone funkcje, ale Formidable Forms Pro wykorzystuje ją jako bazę dla swoich bardziej zaawansowanych funkcji.

Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do Formidable ” Ustawienia globalne w kokpicie WordPress. Tutaj możesz kliknąć „Połącz konto”.

Na następnym ekranie wystarczy zalogować się na twoje konto Formidable Forms.

Formidable Forms poprosi teraz o pozwolenie na instalację wtyczki Pro. Wystarczy kliknąć „Połącz i zainstaluj Formidable Forms Pro”, aby włączyć twój klucz licencyjny.

Teraz, gdy pomyślnie skonfigurowałeś Formidable Forms, jesteś gotowy, aby dodać formularz kalkulatora kredytu hipotecznego do WordPress.

Skorzystaj z szablonu formularza zaawansowanego kalkulatora hipotecznego

Aby rozpocząć, przejdź do Formidable ” Forms, a następnie kliknij „Add New”.

Pojawi się teraz wyskakujące okienko pokazujące wszystkie gotowe szablony, których możesz użyć na swojej witrynie internetowej WordPress.

Aby znaleźć szablon formularza kalkulacji kredytu hipotecznego, wystarczy wpisać „Zaawansowany kalkulator kredytu hipotecznego” w pasku wyszukiwania. Następnie najedź kursorem na szablon i kliknij „Użyj szablonu”.

Przejdziesz teraz do kreatora Formidable Forms. W tym momencie możesz dostosować formularz do swoich potrzeb.

Aby rozpocząć, kliknij pole, które chcesz dostosować, a następnie wybierz kartę „Opcje pola”.

Stamtąd można zmienić etykietę pola, wybrać, czy pole jest obowiązkowe czy opcjonalne, dodać tekst zastępczy i wiele innych rzeczy.

W Formidable Forms można również wstawić domyślną wartość do kalkulatora. Pozwala to użytkownikom zobaczyć, jak mogą wyglądać ich obliczenia.

Jeśli klikniesz którekolwiek z pól w sekcji „Analiza finansowa”, staraj się unikać zmiany „Opcji zaawansowanych”.

Obszar ten zawiera formuły obliczeniowe, więc ich zmiana może całkowicie zepsuć kalkulator kredytu hipotecznego.

Kiedy będziesz zadowolony z wyglądu formularza, po prostu kliknij „Zapisz” w prawym górnym rogu, aby zapisać twoje zmiany.

Następnie wpisz rodzaj nazwy dla twojego formularza, abyś mógł go później łatwo zidentyfikować. Następnie kliknij „Zapisz”.

Dostosuj styl formularza kalkulatora hipotecznego do własnych potrzeb

Przejdźmy teraz do karty „Styl” w górnym menu. Tutaj można wybrać wygląd formularza.

Jeśli nie podoba ci się żaden ze stylów, po prostu kliknij przycisk „+ Nowy styl”.

Następnie pojawi się wyskakujące okienko. Wystarczy wpisać rodzaj nazwy dla nowego stylu i kliknąć „Utwórz nowy styl”.

Zostaniesz przekierowany na stronę, na której możesz dostosować styl formularza.

Możesz dowolnie modyfikować typografię, schemat kolorów, style przycisków, pola wyboru itp.

Gdy będziesz zadowolony z projektu, po prostu kliknij przycisk „Aktualizuj” w prawym górnym rogu.

Konfiguracja ustawień Formidable Forms

Na tym etapie możesz przejść do menu „Ustawienia” u góry.

Po pierwsze, możesz dostosować tytuł i opis formularza na karcie „Ogólne”. Może to być dobre miejsce na wstawienie instrukcji dotyczących korzystania z formularza.

Tekst można również stylizować za pomocą HTML.

Przewijając w dół, znajdziesz ustawienie włączające Honeypot i JavaScript.

Zalecamy włączanie obu ustawień, ponieważ mogą one zapobiegać fałszywym i złośliwym wpisom spamu.

Karta „Działania i powiadomienia” to miejsce, w którym można dostosować e-mail z potwierdzeniem, który Formidable Forms wysyła do użytkownika.

Możesz wyświetlić własną wiadomość z podziękowaniem, przekierować klientów na określony adres URL lub wysłać ich na inną stronę.

Kolejną kartą, którą zalecamy sprawdzić, są „Przyciski”.

W tym miejscu można dostosować etykietę i położenie przycisku przesyłania, a nawet dodać przycisk „Rozpocznij od nowa” na wypadek, gdyby użytkownik chciał ponownie rozpocząć przesyłanie formularza.

Po skonfigurowaniu ustawień formularza wystarczy kliknąć przycisk „Aktualizuj”, aby zapisać twoje zmiany.

Osadzanie formularza zaawansowanego kalkulatora hipotecznego na twojej witrynie internetowej

Teraz, gdy twój zaawansowany formularz kalkulatora kredytu hipotecznego jest gotowy, możesz dodać go do dowolnego wpisu, strony lub obszaru gotowego na widżet.

Aby rozpocząć, kliknij przycisk „Osadzanie” w prawym górnym rogu.

Zobaczysz teraz wyskakujące okienko z informacją, że możesz dodać formularz na trzy sposoby.

Formularz można dodać do istniejącej strony, utworzyć nową stronę lub użyć krótkiego kodu.

Jeśli wybierzesz opcję istniejącej strony, na następnym ekranie wybierzesz stronę.

Następnie kliknij „Wstaw formularz”.

Z drugiej strony, jeśli wybierzesz opcję nowej strony, możesz wpisać rodzaj nazwy dla nowej strony.

Gdy to zrobisz, kliknij przycisk „Utwórz stronę”.

W przypadku obu opcji Formidable Forms automatycznie wstawi blok formularza w edytorze bloków strony.

Jeśli chcesz edytować formularz bezpośrednio z poziomu edytora bloków, po prostu otwórz panel boczny ustawień bloku i kliknij „Przejdź do formularza”.

Gdy będziesz gotowy, kliknij „Publikuj” lub „Aktualizuj”.

Oto jak wygląda nasz formularz kalkulatora kredytu hipotecznego Formidable Forms:

Alternatywnie można dodać kalkulator kredytu hipotecznego za pomocą krótkiego kodu lub kodu PHP.

W wyskakującym okienku osadzania kliknij „Wstaw ręcznie”.

Następnie możesz skopiować krótki kod lub kod PHP. Ponownie, w przypadku pierwszej opcji, możesz przeczytać nasz artykuł o tym, jak dodać krótki kod w WordPress.

Jeśli chodzi o kod PHP, zalecamy tę metodę tylko wtedy, gdy czujesz się komfortowo pracując z fragmentami kodu. Zalecamy użycie WPCode do tego celu, ponieważ ta wtyczka umożliwia bezpieczne i łatwe wstawienie kodu do WordPressa.

Aby uzyskać więcej informacji, możesz przeczytać nasz przewodnik na temat wstawienia fragmentów kodu w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać kalkulator kredytu hipotecznego w WordPress. Możesz również zapoznać się z naszym artykułem na temat tworzenia kalkulatora kredytu samochodowego lub płatności za samochód w WordPress oraz naszymi poradami ekspertów na temat najlepszych sposobów tworzenia bardziej interaktywnych formularzy.

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.