Hur man lägger till anpassade valideringsregler i Elementor-form (nybörjarguide)

Vill du att dina elementor-användares input ska matcha dina krav? Behöver du begränsa vissa format eller uttryck? Eller kanske du funderar på att lägga till lite anpassning? Att tillämpa anpassad validering på ditt webbplatsformulär kan göra detta.

Men trots dess effektivitet är det inte en lätt fångst för alla webbplatsägare. Mest för dem utan någon kodningskunskap och använder sidbyggare som Elementor. Hur vet vi det? Eftersom vi har ett dra-och-släpp-formulärbyggarverktyg dedikerat till Elemntor-användare – MetForm. Du kan ställa in anpassad validering i dess byggargränssnitt.

Du kan läsa mer om dess implementering i denna handledning "hur man lägger till anpassade valideringsregler i Elementor-form".

Vad är anpassad validering i Elementor-form

Elementors anpassade valideringar är skräddarsydda lösningar som låter dig tillämpa personliga regler och kriterier för att bilda fält utöver Elementors standardvalideringsmöjligheter. På så sätt kan du tvinga insändare att endast ange korrekt information eller data. Du kan till exempel kräva att användare anger data i ett specifikt format eller förhindrar dem från att använda vissa tecken i formulärfält.

Anpassad validering förbättrar också användarupplevelsen. Det hjälper dig att visa omedelbara feedbackmeddelanden om fel inlämning. 

Begränsningar för standardvalidering i Elementor-form

Konfigurering av anpassade valideringsprocesser i Elementor-formulärwidgets kräver arbete med actionhooks. Du kan använda actionkrokar för en specifik fälttyp eller alla fälttyper. Här är den största nackdelen att hookimplementering kräver viss teknisk kunskap. Detta kan visa sig vara utmanande för icke-tekniska Elementor-användare, eftersom det inte stämmer överens med no-code-filosofin hos en WordPress-byggare

Vidare kommer du att begränsas till endast några grundläggande saker när du använder standardvalideringen i Elementor. Du kan inte ställa krav för vissa specifika uttryck. Även om du kodar kommer hinder alltid att finnas där.

Hur man lägger till anpassade valideringsregler i Elementor-form

Som vi redan har diskuterat komplexiteten i att använda kod för Elementor-användare. Det bästa sättet att lägga till anpassade valideringsregler i en Elementor-form är att använda ett plugin som resonerar med samma miljö som en dra-och-släpp WordPress-sidbyggare.

En dedikerad formulärplugin för Elementor är MetForm. Med detta plugin behöver du inte använda någon kodkunskap eller gå igenom någon lång inlärningskurva. Kolla den installation och aktivering guide.

Använd sedan MetForm plugin skapa ett formulär för din webbplats kan du skapa ditt WordPress-formulär från början eller använda färdiga mallar. I båda fallen kan du använda anpassad validering.

Så låt oss veta hur man lägger till anpassad validering till Elementor-formuläret med MetForm.

Att tillämpa anpassade valideringar på ett formulär är som att anpassa formuläret. Vi kan inte identifiera allas krav. Men vad vi kan göra är att visa en anpassad valideringsprocess för alla önskade fälttyper i ditt formulär.

Låt oss tillämpa anpassad validering för Elementor-formulärfälten:

Lägg till anpassad validering till textfält

Du kan ställa in de flesta formulärfält i Metform efter behov eller måste skickas. Från fältwidgetinställningarna, gå till Innehåll fliken, under inställningar alternativ, växla knappen bredvid "Nödvändig". Om du gör detta kommer en ny ruta för varningsmeddelanden att visas, skriv ditt varningsmeddelande här.

Du kan sedan välja valideringstyp från rullgardinsmenyn för att skicka texttypfältet:

• Efter teckenlängd: Ställ in minsta och maximala teckenlängd för den inskickade texten.
• Efter ordlängd: Definiera det högsta och lägsta antalet ord.
• Baserat på uttryck: Ange regler för uttryck för validering. 

Du kan också visa ett varningsmeddelande för felaktig inmatning för din anpassade validering.

Lägg till anpassad validering i e-postfält

Du kan ställa in anpassad validering för unika e-postadresser genom att bara växla på knappen. Sedan från rullgardinsmenyn för validering:

• Efter teckenlängd: Definiera minsta och maximala teckenlängd för den inskickade texten.
• Baserat på uttryck: Ställ in uttrycksbaserad validering.

Lägg till anpassad validering till nummerfält

För nummerkrav kan du ställa in följande valideringstyper:

• Efter intervall: Bestäm minimi- och maximiintervallet för nummerfältet.
• Baserat på uttryck: Definiera validering baserat på uttryck.

Lägg till anpassad validering i telefonfält

Här är de tillgängliga valideringarna för ditt telefonfält i ElementsKit.

• Efter teckenlängd: Tilldela minsta och högsta antal siffror för telefonen.
• Baserat på uttryck: Ställ in teckensekvensen för att validera formatet för användarinmatning.

Lägg till anpassad validering till textområdesfält  

Använd validering för att vägleda användare i att fylla i textområdet enligt ditt angivna format.

• Efter teckenlängd: Ställ in minsta och högsta teckenlängd för textinlämningar.
• Efter ordlängd: Definiera det högsta och lägsta antalet ord.
• Baserat på uttryck: Validerar text med hjälp av uttryck för att kontrollera om formateringen är korrekt.

Lägg till anpassad validering i fälten för förnamn och efternamn 

Valideringstyperna för fältelementen för förnamn och efternamn är desamma. Du kan ställa in följande:

• Efter teckenlängd: Ställ in minsta och maximala teckenlängd för insändarens förnamn och efternamn.
• Efter ordlängd: Ställ in det högsta och lägsta antalet ord.
• Baserat på uttryck: Validerar text med hjälp av uttryck för att kontrollera om formateringen är korrekt.

Lägg till anpassad validering till lösenordsfält

Be användarna att ställa in sitt lösenord med följande villkor:

• Efter teckenlängd: Definiera maximala och lägsta teckenlängden för lösenordet.
• Efter ordlängd: Validera lösenordet genom att ställa in det högsta och lägsta antalet ord. 
• Baserat på uttryck: Uttrycksbaserad metod för att validera formatet på avsändarens lösenord.

Kontrollera Elementor Form Validering på användargränssnittet

Efter att ha konfigurerat anpassad validering i ditt Elementor-formulär är nästa viktiga steg att noggrant testa formuläret på användargränssnittet. Här kan du göra mer än att bara förhandsgranska ditt formulär. Det bör ta några steg till innan ditt formulär släpps.

Ange först formulärdata som en unik e-post och ett giltigt telefonnummer som följer dina anpassade valideringsregler. Skicka sedan in formuläret. Om den accepteras utan några fel fungerar din anpassade validering korrekt.

Därefter infogar du ogiltig inmatning som strider mot de anpassade valideringsreglerna, såsom felaktigt format eller extra tecken, och klickar på knappen Skicka. Om ditt formulär skickas fungerar inte din anpassade validering. Men om formuläret inte skickas, indikerar det att den anpassade valideringen fungerar korrekt.

Här är en viktig sak du måste lägga märke till felmeddelandet. Det bör visas för felaktig inmatning för att vägleda användarna att göra rätt inlämning. I vissa fall kan du använda villkorlig logik, så du måste testa formuläret i den miljön. Kontrollera också ditt formulär på olika enheter och webbläsare.

Identifiera dina anpassade valideringsbehov

Vi har visat hur man lägger till anpassade valideringsregler i en Elementor-form. Nu är det din tur att tillämpa validering på dina formulärfält. Men först, se till att identifiera dina specifika behov. Bestäm vilken data som kräver ett visst format för korrekt validering.

Dessutom finns det risk för spam eller skadliga inlämningar. Identifiera vilka fält som kan vara inriktade på av hackare och tillämpa validering på dessa områden för att förhindra potentiella attacker.

Att anpassa ditt Elementors webbplatsformulär är ett effektivt sätt att säkerställa att användarna tillhandahåller korrekt information. När du lägger till anpassad validering är det lika viktigt att fokusera på tydlig feedback eller varningsmeddelanden.

En annan viktig punkt är behovet av ett plugin för att enkelt implementera anpassade fält i Elementor-form. Vi rekommenderar att du använder ett plugin som MetForm, eftersom det eliminerar tekniska utmaningar och ger ett modernt, användarvänligt bygggränssnitt.