Tworzenie posta i dodawanie do niego bloku

Czy chcesz dodać kalkulator BMI do swojej witryny WordPress?

Jeśli oferujesz treści, produkty lub usługi związane ze zdrowiem i kondycją, kalkulator BMI może być naprawdę przydatny dla Twoich odbiorców.

W tym artykule pokażemy, jak łatwo dodać kalkulator BMI w WordPress. Nie jest wymagana matematyka ani kod!

Adding a BMI calculator to your WordPress website

Co to jest BMI i dlaczego jest to ważne?

BMI oznacza wskaźnik masy ciała. Jest to przybliżona miara tkanki tłuszczowej na podstawie wzrostu i wagi. Obliczenie BMI pozwala szybko określić, czy masz niedowagę, nadwagę lub wagę odpowiednią do swojego wzrostu.

Jeśli założyłeś bloga o kondycji lub zdrowiu, to może mieć sens zaoferowanie odwiedzającym kalkulatora BMI.

Dodanie kalkulatora BMI do witryny może sprawić, że ludzie będą spędzać więcej czasu w witrynie. Mogą nawet kupić coś od Ciebie lub jednej z Twoich ofert partnerskich.

Preview of a BMI calculator form on a website

To także dobry sposób na zachęcenie do ponownego ruchu. Jeśli ktoś próbuje schudnąć, może wrócić do Twojej witryny, aby sprawdzić, czy poprawił się jego wskaźnik BMI.

Jak obliczyć BMI?

Możesz obliczyć BMI za pomocą następującego obliczenia:

BMI = kg / m 2

kg to waga osoby w kilogramach im 2 to jej wzrost w metrach do kwadratu.

Jeśli wolisz obliczyć BMI przy użyciu jednostek imperialnych, możesz użyć następującego wzoru:

BMI = [waga funty / wysokość cale 2 ] x 703

Zdrowy BMI mieści się w zakresie 18,5 – 25. BMI poniżej 18,5 wskazuje, że dana osoba ma niedowagę, a BMI powyżej 25 wskazuje, że ma nadwagę.

Oczywiście proszenie czytelników o wyciągnięcie kalkulatora nie jest zbyt pomocne.

Możesz dodać prosty kalkulator na swojej stronie internetowej, w którym użytkownicy będą mogli wprowadzić swój wzrost i wagę, aby kalkulator mógł wyświetlać im ich BMI. W ten sposób użytkownicy pozostają zaangażowani w Twojej witrynie i są bardziej skłonni do przekształcenia się w klienta.

Tworzenie kalkulatora BMI w WordPress

W tym samouczku będziemy używać wtyczki Formidable Forms . Jest to jedna z najlepszych wtyczek do tworzenia formularzy WordPress na rynku i umożliwia tworzenie zaawansowanych formularzy przy użyciu prostych narzędzi typu „przeciągnij i upuść”.

Zawiera mnóstwo szablonów formularzy, kalkulatorów, zaawansowanych pól repeaterów i innych narzędzi. Pozwala to na tworzenie wysoce interaktywnych zaawansowanych formularzy dla Twojej witryny.

Najpierw musisz założyć konto Formidable Forms , a następnie zainstalować i aktywować wtyczkę. Aby uzyskać więcej informacji, zapoznaj się z naszymi instrukcjami , jak zainstalować wtyczkę WordPress .

Po aktywacji musisz odwiedzić stronę Formidable »Forms , a następnie kliknąć przycisk„ Dodaj nowy ”u góry, aby utworzyć kalkulator BMI.

Create new BMI calculator form

Gdy to zrobisz, zobaczysz różne szablony, których możesz użyć do utworzenia formularza.

Przewiń w dół, aby znaleźć kalkulator BMI lub po prostu wpisz „BMI” w pasku wyszukiwania, aby go zlokalizować.

Load BMI Calculator form template

Teraz, gdy masz już szablon kalkulatora BMI na ekranie, najedź na niego kursorem myszy i kliknij przycisk Utwórz formularz.

Następnie zostaniesz poproszony o podanie nazwy formularza i opisu. Możesz użyć domyślnej nazwy i pominąć opis, jeśli chcesz. Gdy będziesz gotowy, kliknij przycisk „Utwórz”.

Type in a name for your BMI calculator form

Gdy już to zrobisz, Formidable Forms automatycznie utworzy dla Ciebie formularz kalkulatora BMI.

Nastąpi bezpośrednie przekierowanie do widoku „Kompilacja” swojego formularza. Jak widać, sam formularz znajduje się po prawej stronie ekranu. Po lewej stronie znajduje się obszar, w którym możesz dodawać lub edytować pola formularza.

The default Build view in Formidable Forms

Kalkulator BMI będzie działał doskonale z domyślnymi ustawieniami. Jeśli chcesz dodać dodatkowe pola, możesz to zrobić, klikając pole po lewej stronie, a zostanie ono automatycznie dodane do formularza.

Jeśli chcesz, aby formularz był prosty, możesz usunąć pudełko BMI Prime. Nie jest to wymagane, aby formularz działał.

Aby usunąć pole, kliknij je, a następnie kliknij ikonę kosza.

Deleting the BMI Prime field from the form

Jeśli chcesz, aby użytkownik przesłał formularz w celu wyświetlenia wyników BMI, możesz również usunąć pola Niedowaga, Zdrowa waga, Nadwaga i Otyłość.

Dostosowywanie ustawień kalkulatora BMI

Gdy jesteś zadowolony z kalkulatora BMI, kliknij kartę „Ustawienia” u góry ekranu.

The Settings tab for the BMI Calculator form

Możesz tutaj wprowadzić zmiany. Na przykład możesz zmienić domyślne komunikaty wyświetlane użytkownikom po przesłaniu przez nich formularza. Jeśli przewiniesz do dołu strony, zobaczysz je wymienione w polu Przy przesyłaniu.

The Formidable Forms messages

Gdy ktoś używa kalkulatora, jego wynik będzie wyglądał następująco:

The default BMI calculator result

Możesz dostosować sformułowanie, aby było odpowiednie dla odbiorców.

Inną opcją jest dodanie linków do dalszych wskazówek. Na przykład możesz mieć treści zawierające wskazówki dotyczące diety lub ćwiczeń.

Możesz wpisać kod HTML w polu. Aby zmienić rozmiar czcionki i kolor tła ramki, możesz skorzystać z funkcji Style w Formidable Forms. Omówimy to w dalszej części tego samouczka.

Oto przykład wiadomości wynikowej z odpowiednim linkiem:

A customized results message in Formidable Forms

Wskazówka: Pole, w którym można edytować komunikat wyników, jest dość małe. Możesz skopiować wiadomość z pudełka i wkleić ją do edytora kodu , aby ułatwić edycję. Po zakończeniu skopiuj go z powrotem do okna wiadomości.

Zmiana tekstu przycisku kalkulatora BMI

Jeśli chcesz zmienić tekst przycisku formularza, możesz to zrobić w Ustawienia »Styl i przyciski .

Po prostu wpisz tekst, którego chcesz użyć. Zamierzamy użyć tekstu „Pokaż mój zakres BMI” zamiast „Zobacz mój zakres!” dla tekstu przycisku.

Zmieniliśmy również „Aktualizuj wyniki” zamiast „Aktualizuj” dla tekstu na przycisku, który pojawia się po przesłaniu formularza po raz pierwszy.

Changing the Submit and Update button messages in Formidable Forms

Zmiana stylu kalkulatora BMI

Domyślnie kalkulator BMI wygląda dość prosto. Tekst jest również dość mały, na przykład:

The default styling for the BMI form

Możesz zmienić styl swojego formularza, używając różnych kolorów, rozmiarów czcionek i nie tylko. Aby to zrobić, najpierw musisz przejść do Formidable »Styles na pulpicie nawigacyjnym WordPress.

The Styles tab of Formidable Forms

Następnie możesz kliknąć przycisk „+ Nowy styl”, aby rozpocząć tworzenie nowego stylu. Alternatywnie możesz edytować istniejący styl domyślny, jeśli chcesz używać tego samego stylu we wszystkich swoich formularzach.

Zamierzamy stworzyć nowy styl tylko dla naszego formularza kalkulatora BMI.

Adding a new style in Formidable Forms

Jeśli klikniesz menu rozwijane obok karty Etykiety pól, możesz zmienić rozmiar etykiet w polach formularza. Zwiększymy to z oryginalnych 14 do 18 pikseli.

Changing the size of the field labels

Po prawej stronie ekranu zobaczysz podgląd stylu formularza. Gdy wprowadzisz zmiany, zostanie to automatycznie zaktualizowane.

Prawdopodobnie będziesz chciał zwiększyć rozmiar czcionki i wysokość samych pól w sekcji „Ustawienia pola”. Możesz zmienić rozmiar przycisków opcji (imperialne vs metryczne) na karcie „Pole wyboru i pola radiowe”.

Możesz także zwiększyć rozmiar czcionki przycisku na karcie Przyciski. Możesz także wybrać kolor przycisku.

Jeśli chcesz powiększyć wiadomość wynikową lub zmienić kolor tła, możesz to zrobić na karcie Form Messages.

Po wprowadzeniu wszystkich żądanych zmian kliknij „Aktualizuj” w prawym górnym rogu, aby zapisać zmiany w stylu.

Updating the new style that you've created

Następnie możesz zastosować styl do swojego formularza. Najpierw przejdź Formidable »Forms , a następnie znajdź swój formularz. Kliknij tytuł formularza, aby go edytować, lub najedź kursorem na formularz i kliknij link „Edytuj” znajdujący się pod nim.

Editing the BMI calculator form that you created

Następnie możesz przejść do karty Ustawienia i kliknąć Styl i przyciski , aby ustawić style formularza.

Tutaj możesz użyć menu rozwijanego Szablon stylu, aby wybrać nowy szablon stylu. Po prostu kliknij listę rozwijaną, a następnie kliknij styl, którego chcesz użyć.

Choosing the style for your BMI calculator from the dropdown list

Teraz twój formularz będzie stylizowany zgodnie z szablonem. Oto jak wygląda nasz:

The BMI calculator form with the new styles applied

Dodawanie formularza kalkulatora BMI do swojej witryny internetowej

Gdy będziesz gotowy, możesz opublikować formularz w swojej witrynie. Najpierw kliknij przycisk „Aktualizuj” w prawym górnym rogu, aby zapisać zmiany:

Updating your BMI calculator

Następnie musisz edytować istniejący post lub stronę albo utworzyć nowy.

Gdy już to zrobisz, możesz kliknąć przycisk (+), aby dodać nowy blok. Przejdź do sekcji Widżety i kliknij blok Formidable Forms. Lub, jeśli wolisz, możesz użyć paska wyszukiwania, aby go znaleźć.

Selecting the Formidable Forms block to add to your post or page

Teraz możesz po prostu wybrać swój formularz BMI. Kliknij menu „Wybierz formularz” i wybierz kalkulator BMI, na przykład:

Selecting the correct form from the Formidable Forms dropdown

Możesz wyświetlić podgląd swojej strony, aby zobaczyć, jak gotowy kalkulator BMI wygląda na żywo w Twojej witrynie. Oto nasze:

Viewing the BMI calculator on the website

Jeśli jest coś, co chcesz zmienić lub poprawić, po prostu wróć do swojego formularza w panelu WordPress. Możesz go znaleźć pod Formidable »Forms .

Za każdym razem, gdy wprowadzisz zmiany w formularzu, zostanie on automatycznie zaktualizowany w całej witrynie. Nie musisz zmieniać skrótu ani robić nic więcej.

Mamy nadzieję, że ten samouczek pomógł Ci nauczyć się, jak dodać kalkulator BMI w WordPress za pomocą Formidable Forms . Możesz również polubić nasze artykuły na temat najbardziej przydatnych widżetów WordPress i , które muszą mieć wtyczki WordPress dla witryn biznesowych.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube z samouczkami wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku .

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…