Űrlap: ellenőrzés és spamvédelem

Ez a fejezet az Űrlap elem ellenőrzését, spamvédelmét és a dátumválasztó testreszabását írja le.

Saját ellenőrzés beküldéskor

A bricks/form/validate szűrővel minden beküldést ellenőrizhetsz, és hibaüzeneteket adhatsz vissza. Az első paraméter ($errors) a hibaüzenetek tömbje, a második ($form) a beküldött űrlap példánya. Ha az ellenőrzés hibát ad, a hiba megjelenik, és az űrlap műveletei nem futnak le.

A példa a 7e30aa azonosítójú mező e-mail-címét ellenőrzi: ha nincs ilyen című felhasználó a webhelyen, az ellenőrzés elbukik, hibaüzenet jelenik meg, és nem megy ki e-mail.

add_filter( 'bricks/form/validate', function( $errors, $form ) {
  $form_fields = $form->get_fields();
  $form_id     = $form_fields['formId'];

  // Kihagyás, ha nem a célűrlap
  if ( $form_id !== 'kfbqso' ) {
    return $errors;
  }

  $email_address = $form->get_field_value( '7e30aa' );

  if ( ! email_exists( $email_address ) ) {
    $errors[] = esc_html__( 'Ez az e-mail-cím nincs a rendszerünkben.', 'bricks' );
  }

  // Mindig a hibatömböt add vissza
  return $errors;
}, 10, 2 );

Azonnali ellenőrzés bevitelkor

A Bricks a hibaüzenetet rögtön megjeleníti, amint a mező elveszti a fókuszt. Használatához vegyél fel Hibaüzenet szöveget az adott mezőhöz. Fókuszvesztéskor az űrlap ezeket nézi meg:

• Kötelező: ki van-e töltve a kötelező mező.
• Legkisebb/legnagyobb szám: a megadott szám a tartományban van-e.
• E-mail: helyes-e az e-mail-cím formátuma.
• URL: helyes-e az URL szerkezete.

Az azonnali hibaüzenet kikapcsolható az Űrlapellenőrzés letiltása beállítással: kikapcsolhatod a bevitelre, a fókuszvesztésre vagy mindkettőre. Az űrlap beküldéskor ettől még ellenőrződik.

Minta (pattern) ellenőrzés

A pattern attribútummal a böngésző natívan ellenőrzi a bevitelt a beküldés előtt. A title attribútummal egyedi hibaüzenetet is megjeleníthetsz. A Böngésző általi érvényesítés mellőzése beállítás ne legyen bekapcsolva.

A pattern a text, tel, email, url és password típusú mezőkön működik.

Példa: egyszerű, ###-###-### formátumú telefonszám megkövetelése a ^\d{3}-\d{3}-\d{3}$ mintával. A title attribútumba írhatsz útmutatót, amelyet a böngésző akkor mutat, ha a bevitel nem felel meg a mintának.

Spamvédelem: Google reCaptcha V3

A Bricks űrlap a Google reCaptcha V3-at támogatja. Bekapcsolása:

1. Hozz létre webhely-kulcsot és titkos kulcsot a Google reCaptcha oldalán.
2. Add meg mindkettőt a Bricks → Beállítások → API-kulcsok résznél.
3. Az űrlap elemén, a Spamvédelem csoportban kapcsold be a reCaptcha beállítást.

Ha még mindig sok a spam, módosíthatod a pontszámküszöböt. Az alapérték 0,5. A Google reCaptcha V3 0,0 és 1,0 közötti értéket ad: a 0,0 szinte biztosan robot, az 1,0 szinte biztosan ember. A küszöb emelése:

0.5

add_filter( 'bricks/form/recaptcha_score_threshold', function( $score ) {
  $score = 0.8;
  return $score;
}, 10, 1 );

A 0,8-as küszöbnél a Bricks csak a magasabb pontszámú (valószínűbben emberi) beküldéseket fogadja el.

Spamvédelem: hCaptcha

Add meg a hCaptcha webhely-kulcsot (Sitekey) és titkos kulcsot a Bricks → Beállítások → API-kulcsok résznél, majd az űrlap Spamvédelem csoportjában kapcsold be. Választhatsz láthatatlan vagy látható hCaptchát. A láthatónál:

• Téma: dark (sötét) vagy light (világos).
• Méret: compact (kompakt) vagy normal (normál).

Automatizált űrlaptesztelés

Teszt- vagy előkészítő webhelyen a hCaptcha tesztkulcsait használd. A tesztkulcsok nem védenek a robotok ellen, éles űrlapon tilos használni őket. A működés ellenőrzését válaszd külön az élő nyilvános űrlaptól, például előkészítő webhelyen vagy egy külön védett figyelőűrlapon.

Spamvédelem: Cloudflare Turnstile

Add meg a Cloudflare Turnstile webhely-kulcsát és titkos kulcsát a Bricks → Beállítások → API-kulcsok résznél. Az űrlap Spamvédelem csoportjában kapcsold be a Cloudflare Turnstile beállítást. Ezután állítható:

• Téma: dark, light vagy az alapértelmezett auto.
• Méret: compact vagy normal.

Méhkasmező (honeypot)

Bármelyik mezőt méhkasmezővé teheted, kivéve a Fájl, a Jegyezz meg, az HTML és a Rejtett típust. A valódi látogatókat ez nem zavarja, a robotbeküldéseket viszont megakadályozza, mert ha egy robot kitölti a méhkasmezőket, a beküldés nem megy át.

A dátumválasztó testreszabása

A Dátumválasztó mező a Flatpickr JavaScript-könyvtárat használja, amely bővíthető, lokalizálható és testreszabható a saját beállításaival. A beállításokat a bricks/element/form/datepicker_options szűrővel módosíthatod:

add_filter( 'bricks/element/form/datepicker_options', function( $options, $element ) {
  $options['locale'] = [
    'firstDayOfWeek' => 1 // A hét első napja a hétfő
  ];

  return $options;
}, 10, 2 );

A szűrő két paramétert kap: $options (a Flatpickr beállításainak tömbje) és $element (a Bricks elemobjektuma).

A dátumválasztó szövegeinek lokalizálása

A Flatpickr sok nyelvhez ad nyelvi csomagot. A csomagot a Bricks → Beállítások → Egyéni kód → Törzs (lábléc) szkriptek mezőbe tett kóddal töltheted be:

<script src="https://npmcdn.com/flatpickr/dist/l10n/XX.js"></script>
<script>
  window.flatpickr.localize(window.flatpickr.l10ns.XX)
</script>

Az XX helyére a nyelv kódját írd (magyarhoz hu).

Ha csak egy adott űrlapon szeretnél más nyelvet, a nyelvi csomagot az előző kód első sora szerint töltsd be, majd a szűrővel add meg a nyelvet az adott űrlapelemre:

add_filter( 'bricks/element/form/datepicker_options', function( $options, $element ) {
  if ( $element->id === 'abcdef' ) {
    $options['locale'] = 'XX';
  }

  return $options;
}, 10, 2 );