# Felugró ablak és önálló céloldal

> Az űrlap megjelenítése felugró ablakban (modal) vagy saját, önálló céloldalon, megosztási lehetőségekkel.

Az űrlapot nem kell az oldal tartalmába építeni: megjelenhet felugró ablakban egy gomb megnyomására, vagy egy teljesen önálló oldalon is. Mindkét funkció a Fluent Forms Pro része.

## Felugró ablak (modal, lightbox)

A felugró ablakhoz egy külön rövidkód kell, nem a szokásos `[fluentform]`.

```text
[fluentform_modal form_id="228"]
```

1. Nézd meg az űrlap azonosítóját a **Fluent Forms → Űrlapok** listában.
2. Írd át a rövidkódban a `228`-at a saját űrlapod azonosítójára.
3. Illeszd be a rövidkódot az oldalra vagy bejegyzésbe, ahol a gombnak meg kell jelennie. A gombra kattintva ugrik fel az űrlap.

A rövidkód paraméterei:

| Paraméter | Mit csinál | Példa |
| --- | --- | --- |
| `form_id` | Az űrlap azonosítója. Kötelező. | `form_id="228"` |
| `btn_text` | A gomb felirata. | `btn_text="Kattints ide"` |
| `bg_color` | A felugró ablak háttérszíne. | `bg_color="green"` |
| `css_class` | Egyéni CSS-osztály(ok) a gombra, a saját formázásodhoz. | `css_class="egyikOsztaly masikOsztaly"` |

Teljes példa:

```text
[fluentform_modal form_id="228" btn_text="Feliratkozás" css_class="egyikOsztaly masikOsztaly" bg_color="red"]
```

Bármilyen felugró ablakot készítő bővítményt is használhatsz (például Popup Maker vagy az Elementor felugró ablaka): ilyenkor a szokásos Fluent Forms rövidkódot kell az ablak tartalmába tenned.

## Önálló céloldal

Az önálló céloldalon az űrlap az oldal fő tartalma, nem zavarják a webhely többi elemei. Kampányokhoz, ajánlatkéréshez, felméréshez és eseményekhez használható.

### A funkció bekapcsolása

1. Nyisd meg az **Integrációk** oldalt a Fluent Forms menüjében.
2. Kapcsold be a céloldal modult.
3. Nyiss meg egy űrlapot, és kattints a **Beállítások és integrációk** fülre.
4. A bal oldali menüben válaszd a **Céloldal** pontot.
5. Jelöld be az **Űrlap-céloldal mód bekapcsolása** jelölőnégyzetet.

Bekapcsolás után két fül jelenik meg: **Dizájn** és **Megosztás**. A **Mentés** gombbal mentheted a beállításokat, a jobb oldali előnézetben pedig mobil- és asztali nézetben is látod az oldalt.

![A Céloldal beállításai a Dizájn fülön, jobbra az előnézettel](./kepek/megjelenes-beagyazas-1-celoldal-terv.webp)

*A Céloldal beállításai a Dizájn fülön, jobbra az előnézettel* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=settings&sub_route=form_settings)

A képen a **Dizájn** fül látszik a **Boxed** és **Classic** választóval, az **Elrendezés típusa** ikonokkal és a színbeállításokkal, mellette az oldal élő előnézete.

### Dizájn

| Beállítás | Mit csinál |
| --- | --- |
| **Boxed** / **Classic** | Az oldal dizájnstílusa. Alapból a **Boxed** van kiválasztva. |
| **Elrendezés típusa** | Öt elrendezés közül választhatsz. A képes elrendezéseknél az űrlap mellé képet tehetsz. |
| **Media** | Az űrlap mellé tett kép. |
| **Media Brightness** | A kép fényereje a + és − gombokkal. |
| **Media Alt Text** | A kép helyettesítő szövege a hozzáférhetőséghez. |
| **Háttérszín** | Az oldal háttérszíne. |
| **Külső árnyék** | Az űrlap konténerét körülvevő árnyék. |
| **Belső árnyék** | Belső árnyék a mélység érzetéhez. |
| **Háttérkép** | Az oldal háttérképe. |
| **Űrlap logója** | Cég- vagy kampánylogó az oldal tetején. |
| **Featured Image** | A kép, amely az oldal közösségi oldalakon való megosztásakor jelenik meg. |
| **Page Headings** | Az oldal főcíme. |
| **Description** | Rövid szöveg arról, miről szól az űrlap. |
| **Security Code** | Az űrlap webcímét védi a kéretlen hozzáféréstől: a látogatónak meg kell adnia a kódot. |

### Megosztás

A **Megosztás** fülön az oldal terjesztésének módjait találod.

![A Céloldal Megosztás füle a webcímmel, QR-kóddal, rövidkóddal és beágyazási kóddal](./kepek/megjelenes-beagyazas-1-celoldal-megosztas.webp)

*A Céloldal Megosztás füle a webcímmel, QR-kóddal, rövidkóddal és beágyazási kóddal* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=settings&sub_route=form_settings)

A képen a **Pretty URL** kapcsoló és az **URL Slug** mező alatt a megosztási kártyák látszanak.

| Lehetőség | Mit csinál |
| --- | --- |
| **Pretty URL** | Bekapcsolás után megadhatsz egy saját **URL Slug**-ot (például `contact-form-demo`), és a **Save Pretty URL** gombbal mented. Az oldal ezen a rövid, olvasható címen lesz elérhető. |
| **Megosztás közvetlen URL-en keresztül** | A közvetlen hivatkozás másolása, valamint gyorsmegosztó ikonok Facebookra, Twitterre, LinkedInre és e-mailben. |
| **QR Code** | SVG formátumú QR-kód letöltése vagy másolása nyomtatáshoz és személyes megosztáshoz (**Download SVG**, **Copy SVG**). |
| **Rövidkód** | A `[fluentform id="1"]` rövidkód, amellyel bármelyik WordPress-oldalra vagy bejegyzésbe beágyazhatod az űrlapot. |
| **Email Share** | Előre megírt e-mail megnyitása vagy a szöveg másolása (**Open Email**, **Copy Message**). |
| **Beágyazás HTML kóddal** | Iframe-kód, amellyel az űrlapot másik tartományra vagy a WordPressen kívülre is beágyazhatod. A magasság (`height`) módosítható. Előtte ellenőrizd, hogy a tárhelyed támogatja-e az iframe használatát. |

Mentsd a beállításokat a jobb felső **Mentés** gombbal. Az elkészült céloldalt a közvetlen hivatkozáson nézheted meg: ezt látják a látogatók.