Jak dodać niestandardowe reguły walidacji w formularzu Elementor (przewodnik dla początkujących)

Czy chcesz, aby dane wejściowe użytkowników formularza Elementor odpowiadały Twoim wymaganiom? Musisz ograniczyć określone formaty lub wyrażenia? A może chcesz dodać trochę personalizacji? Zastosowanie niestandardowej walidacji do formularza witryny może to zrobić.

Ale pomimo swojej skuteczności, nie jest to łatwe do złapania dla wszystkich właścicieli stron internetowych. Przede wszystkim dla tych, którzy nie mają żadnej wiedzy z zakresu kodowania i używają kreatorów stron, takich jak Elementor. Skąd wiemy? Ponieważ mamy narzędzie do tworzenia formularzy metodą „przeciągnij i upuść” dedykowane użytkownikom Elementora – MetForm. Możesz ustawić niestandardową walidację w interfejsie konstruktora.

Więcej informacji na temat implementacji tej funkcji można znaleźć w tym samouczku „jak dodać niestandardowe reguły walidacji w formularzu Elementor”.

Czym jest niestandardowa walidacja w formularzu Elementor

Niestandardowe walidacje Elementora to dostosowane rozwiązania, które umożliwiają stosowanie spersonalizowanych reguł i kryteriów do pól formularza wykraczających poza domyślne możliwości walidacji Elementora. W ten sposób możesz zmusić nadawców do wstawiania tylko poprawnych informacji lub danych. Na przykład możesz wymagać od użytkowników wprowadzania danych w określonym formacie lub uniemożliwić im używanie określonych znaków w polach formularza.

Niestandardowa walidacja również poprawia doświadczenie użytkownika. Pomaga wyświetlać natychmiastowe wiadomości zwrotne na temat każdego błędnego przesłania. 

Ograniczenia domyślnej walidacji w formularzu Elementor

Konfigurowanie niestandardowych procesów walidacji w widżetach formularza Elementor wymaga pracy z hakami akcji. Możesz używać haków akcji dla określonego typu pola formularza Elementor lub wszystkich typów pól. Tutaj największą wadą jest to, że implementacja haka wymaga pewnej wiedzy technicznej. Może to okazać się trudne dla nietechnicznych użytkowników Elementora, ponieważ nie jest zgodne z filozofią no-code kreatora WordPress.

Ponadto, będziesz ograniczony tylko do kilku podstawowych rzeczy, gdy używasz domyślnej walidacji w Elementorze. Nie możesz ustawić wymagań dla niektórych konkretnych wyrażeń. Nawet jeśli kodujesz, przeszkody zawsze będą.

Jak dodać niestandardowe reguły walidacji w formularzu Elementor

Jak już omówiliśmy złożoność korzystania z kodu dla użytkowników Elementora. Najlepszym sposobem na dodanie niestandardowych reguł walidacji w formularzu Elementora jest użycie wtyczki, która rezonuje z tym samym środowiskiem, co kreator stron WordPress typu „przeciągnij i upuść”.

Dedykowaną wtyczką formularza dla Elementora jest MetForm. Dzięki tej wtyczce nie musisz używać żadnej wiedzy na temat kodowania ani przechodzić przez długą krzywą uczenia się. Sprawdź jej instalacja i aktywacja przewodnik.

Następnie za pomocą Wtyczka MetForm tworzy formularz dla swojej witryny możesz utworzyć formularz WordPress od podstaw lub użyć gotowych szablonów. W obu przypadkach możesz zastosować niestandardową walidację.

Dowiedzmy się zatem, jak dodać niestandardową walidację do formularza Elementor za pomocą MetForm.

Stosowanie niestandardowych walidacji w formularzu jest jak personalizowanie formularza. Nie możemy zidentyfikować wymagań wszystkich. Ale to, co możemy zrobić, to pokazać niestandardowy proces walidacji dla wszystkich pożądanych typów pól w formularzu.

Zastosujmy niestandardową walidację dla pól formularza Elementora:

Dodaj niestandardową walidację do pola tekstowego

Możesz ustawić większość pól formularza w Metform jako wymagane lub muszą zostać przesłane. Z ustawień widżetu pola przejdź do Treść zakładka pod Ustawienia opcja, przełącz przycisk obok „Wymagany"Spowoduje to wyświetlenie nowego pola na komunikaty ostrzegawcze, wpisz tutaj swój komunikat ostrzegawczy.

Następnie możesz wybrać typ walidacji z listy rozwijanej, aby przesłać pole typu tekstu:

• Według długości znaku: Ustaw minimalną i maksymalną liczbę znaków w przesłanym tekście.
• Według długości słowa: Określ maksymalną i minimalną liczbę słów.
• Na podstawie wyrażenia: Wprowadź reguły formularza dla wyrażenia w celu walidacji. 

Możesz także wyświetlić komunikat ostrzegawczy w przypadku wprowadzenia błędnych danych podczas walidacji niestandardowej.

Dodaj niestandardową walidację do pól wiadomości e-mail formularza Elementor

Możesz ustawić niestandardową walidację dla unikalne adresy e-mail po prostu przełączając przycisk. Następnie z menu rozwijanego walidacji wykonaj następujące kroki, aby ustawić walidację długości wiadomości e-mail:

• Według długości znaku: Zdefiniuj minimalną i maksymalną liczbę znaków przesyłanego tekstu, aby skonfigurować reguły weryfikacji adresu e-mail.
• Na podstawie wyrażenia: Skonfiguruj walidację opartą na wyrażeniach.

Dodaj niestandardową walidację do pól liczbowych

W przypadku wymagań liczbowych można ustawić następujące typy walidacji:

• Według zakresu: Określ minimalny i maksymalny zakres dla pola liczbowego.
• Na podstawie wyrażenia: Zdefiniuj walidację na podstawie wyrażeń.

Dodaj niestandardową walidację do pól telefonu

Oto dostępne walidacje dla pola Telefon w ElementsKit.

• Według długości znaku: Określ minimalną i maksymalną liczbę cyfr numeru telefonu.
• Na podstawie wyrażenia: Ustaw sekwencję znaków w celu sprawdzenia formatu danych wprowadzonych przez użytkownika.

Dodaj niestandardową walidację do pól obszaru tekstowego  

Użyj walidacji, aby pomóc użytkownikom wypełnić pole tekstowe zgodnie z określonym formatem.

• Według długości znaku: Ustaw minimalny i maksymalny limit znaków tekstu przesyłanego w formularzu Elementor.
• Według długości słowa: Określ maksymalną i minimalną liczbę słów.
• Na podstawie wyrażenia: Sprawdzanie poprawności formatowania tekstu za pomocą wyrażeń.

Dodaj niestandardową walidację do pól imienia i nazwiska 

Typy walidacji dla elementów pola imienia i nazwiska są takie same. Możesz ustawić następujące ustawienia:

• Według długości znaku: Ustaw minimalną i maksymalną liczbę znaków imienia i nazwiska osoby przesyłającej wiadomość.
• Według długości słowa: Ustaw maksymalną i minimalną liczbę słów.
• Na podstawie wyrażenia: Sprawdzanie poprawności formatowania tekstu za pomocą wyrażeń.

Dodaj niestandardową walidację do pól hasła

Poproś użytkowników o ustawienie hasła zgodnie z następującymi warunkami:

• Według długości znaku: Określ maksymalną i minimalną liczbę znaków hasła.
• Według długości słowa: Sprawdź poprawność hasła, ustawiając maksymalną i minimalną liczbę słów. 
• Na podstawie wyrażenia: Metoda oparta na wyrażeniach służąca do sprawdzania formatu hasła nadawcy.

Sprawdzanie poprawności formularza Elementor na froncie

Po skonfigurowaniu niestandardowej walidacji w formularzu Elementor, następnym ważnym krokiem jest dokładne przetestowanie formularza na froncie. Tutaj możesz zrobić więcej niż tylko wyświetlić podgląd formularza. Powinno być jeszcze kilka kroków, zanim formularz walidacji WordPress zostanie uruchomiony.

Najpierw wprowadź dane formularza, takie jak unikalny adres e-mail i prawidłowy numer telefonu, które są zgodne z Twoimi niestandardowymi zasadami walidacji. Następnie prześlij formularz walidacji WordPress. Jeśli zostanie zaakceptowany bez żadnych błędów formularza Elementor, Twoja niestandardowa walidacja działa prawidłowo.

Następnie wprowadź nieprawidłowe dane wejściowe, które są sprzeczne z niestandardowymi zasadami walidacji, aby sprawdzić dokładność akceptacji formularza Elementor, takie jak nieprawidłowy format lub dodatkowe znaki, i kliknij przycisk Prześlij. Jeśli Twój formularz WordPress został przesłany, Twoja niestandardowa walidacja nie działa. Jeśli jednak formularz nie został przesłany, oznacza to, że niestandardowa walidacja działa prawidłowo.

Tutaj jedną ważną rzeczą, na którą musisz zwrócić uwagę, jest komunikat o błędzie. Powinien się on pojawiać przy nieprawidłowym wprowadzeniu danych, aby pomóc użytkownikom w dokonaniu właściwego przesłania. W niektórych przypadkach możesz zastosować logikę warunkową, więc musisz przetestować formularz w tym środowisku. Sprawdź również swój formularz na różnych urządzeniach i przeglądarkach.

➡️ Przejdź przez bloga, aby się dowiedzieć 👉 jak stworzyć formularz leadów o wysokiej konwersji w Elementorze.

Określ swoje niestandardowe potrzeby w zakresie walidacji

Pokazaliśmy, jak dodawać niestandardowe reguły walidacji w formularzu Elementor. Teraz Twoja kolej, aby zastosować walidację do pól formularza. Ale najpierw upewnij się, że zidentyfikowałeś swoje konkretne potrzeby. Określ dane, które wymagają określonego formatu dla dokładnej walidacji.

Ponadto istnieje ryzyko spamu lub złośliwych zgłoszeń. Zidentyfikuj pola, które mogą być celem hakerów i zastosuj walidację w tych obszarach, aby zapobiec potencjalnym atakom.

Dostosowywanie formularza witryny Elementor to skuteczny sposób na zapewnienie, że użytkownicy podają dokładne informacje. Podczas dodawania niestandardowej walidacji równie ważne jest skupienie się na jasnych komunikatach zwrotnych lub ostrzegawczych.

Innym kluczowym punktem jest potrzeba wtyczki do łatwego wdrożenia pól niestandardowych w formularzu Elementor. Zalecamy użycie Wtyczka formularza Elementor podobnie jak MetForm, ponieważ eliminuje wyzwania techniczne i zapewnia nowoczesny, przyjazny użytkownikowi interfejs konstruktora. Ponadto upraszcza proces tworzenia dowolnego typu formularza, w tym Formularz ankiety WordPress, formularz darowizny, forma logiki warunkowej, Formularz kontaktowyitp.