# Használat

> Színválasztós űrlap építése, a színválasztó a frontenden, és a választott szín mentése felhasználói meta mezőbe.

## Űrlap építése színválasztóval

1. Hozz létre egy űrlapot (**JetFormBuilder → Add New Form**).
2. Add hozzá a **Color Picker Field** blokkot, és töltsd ki a címkét (például „Kedvenc színed”), a mezőnevet (például `szin`) és szükség esetén a leírást.
3. A **Field** szakaszban kapcsold be a **Use advanced Color Picker** beállítást, válaszd ki a **Value Format** értékét, és döntsd el, kell-e az átlátszóság (**Show Alpha (opacity)**).
4. Mentsd az űrlapot.
5. Jelenítsd meg az oldalon az űrlap blokkal (a JetFormBuilder form blokkját válaszd ki, és jelöld meg benne az űrlapot).

## A színválasztó a frontenden

A mezőre kattintva megnyílik a színválasztó ablak. Két részből áll:

- **Paletta:** kész színminták. A **Kevesebb** gombbal a paletta kisebb változatára válthatsz.
- **Színválasztó felület:** a színárnyalat kiválasztására, mellette a színtónus csúszkája. Ha az átlátszóság be van kapcsolva, alatta az átlátszóság sávja is megjelenik.

A **Mentés** gomb elfogadja a kiválasztott színt, a **Mégsem** bezárja az ablakot változtatás nélkül.

![A megnyitott színválasztó a paletta és a színválasztó felülettel](./kepek/valaszto-nyitva.webp)

*A megnyitott színválasztó a paletta és a színválasztó felülettel* (https://minta-bolt.hu/szinvalaszto/)

A bal oldalon a kész színminták, jobb oldalon a színválasztó felület látszik, alul a **Mégsem** és a **Mentés** gombbal.

## Szín mentése felhasználói meta mezőbe

Ha például regisztrációkor a választott színt a felhasználó adatai közé szeretnéd menteni (hogy később a bejegyzéseit vagy a profilját ezzel színezd), szükséged lesz a JetEngine-re.

1. A JetEngine-ben hozz létre egy felhasználói meta dobozt (Meta Box a felhasználókhoz), és vegyél fel benne színválasztó meta mezőket.
2. Az űrlap utólagos művelet (post-submit action) szerkesztőjében a **User Meta** szakaszban kapcsold össze ezeket a meta mezőket az űrlap színválasztó mezőivel.
3. Ha a JetEngine meta mezőhöz kötöd a mezőt, a **Value Format** értéke legyen **HEX**.