# Űrlap beágyazása: Beágyazás panel, sablonfájl, többszöri beágyazás

> Az űrlap oldalra vagy bejegyzésbe helyezése a Beágyazás panellel, függvényhívással a sablonban, és mit kell tudni az ugyanazon az oldalon többször szereplő űrlapról.

## Beágyazás a Beágyazás panellel

Az űrlapszerkesztő felső sávjában van egy **Beágyazás** gomb. Ez egy oldalpanelt nyit, amellyel az űrlapot közvetlenül a szerkesztőből teheted oldalra vagy bejegyzésbe. A panel a WordPress blokkszerkesztőt használja, de a shortcode-ot is kimásolhatod belőle, ha más szerkesztőt használsz.

![A Beágyazás panel megnyitva az űrlapszerkesztőben](./kepek/elso-lepesek-beagyazas-panel.webp)

*A Beágyazás panel megnyitva az űrlapszerkesztőben* (https://minta-bolt.hu/wp-admin/admin.php?page=gf_edit_forms&id=1)

A panelen fentről lefelé az űrlap azonosítója, a meglévő tartalomhoz adás, az új létrehozása és a shortcode másolása látszik.

| Elem | Mit csinál |
|---|---|
| Űrlap ID | Az aktuális űrlap azonosítója. |
| Hozzáadás meglévő tartalomhoz | Itt választhatsz **Oldal** vagy **Bejegyzés** között, ez határozza meg, melyik tartalmak közül választhatsz. |
| Válassz egy Oldal | A weboldalad oldalainak (vagy bejegyzéseinek) legördülő listája. |
| Űrlap beszúrása | Beszúrja az űrlapot a kiválasztott oldalba, és megnyitja azt a blokkszerkesztőben. |
| Új létrehozása | Itt is választhatsz **Oldal** vagy **Bejegyzés** között: ilyen típusú új tartalom jön létre az űrlapnak. |
| Add meg a(z) Oldal nevét | Az új oldal vagy bejegyzés neve. |
| Létrehozás | Létrehozza az új oldalt vagy bejegyzést, és megnyitja a blokkszerkesztőben. |
| Shortcode másolása | A vágólapra másolja az űrlap shortcode-ját, hogy beillesszd az oldalépítődbe. |

### Űrlap beágyazása új oldalba vagy bejegyzésbe

1. Kattints a felső sávban a **Beágyazás** gombra.
2. Az **Új létrehozása** alatt válaszd az **Oldal** vagy a **Bejegyzés** lehetőséget.
3. Írd be az új oldal vagy bejegyzés nevét.
4. Kattints a **Létrehozás** gombra.
5. Az új oldal létrejön, és benne van az űrlap.
6. Itt módosíthatod az űrlapblokk beállításait, majd közzéteheted az oldalt.

### Űrlap beágyazása meglévő oldalba vagy bejegyzésbe

1. Kattints a felső sávban a **Beágyazás** gombra.
2. A **Hozzáadás meglévő tartalomhoz** alatt válaszd az **Oldal** vagy a **Bejegyzés** lehetőséget.
3. Válassz egy elemet a listából.
4. Kattints az **Űrlap beszúrása** gombra.
5. Megnyílik az oldal, és a Gravity Forms blokk ki van emelve a beágyazások között.
6. Kattints a blokkra, hogy az űrlap bekerüljön a tartalomba, vagy húzd a blokkot a kívánt helyre.
7. Módosítsd szükség szerint az űrlapblokk beállításait, majd frissítsd az oldalt, hogy az űrlap megjelenjen.

### Shortcode másolása

1. Kattints a felső sávban a **Beágyazás** gombra.
2. A **Nem a blokkszerkesztőt használod?** rész alatt kattints a **Shortcode másolása** gombra.
3. Az űrlap shortcode-ja a vágólapra kerül, beillesztheted az oldalépítődbe.

Az űrlapot egyéni tartalomtípusokba is beágyazhatod a panellel, ha ezeket egy szűrővel bekapcsolod.

## Űrlap hozzáadása a sablonfájlban függvényhívással

Ha az űrlapot a WordPress sablonjának egy fájljából akarod meghívni, használd a `gravity_form()` függvényt. Ugyanez a módszer használható külső kampókból is.

```php
gravity_form( $id_or_title, $display_title = true, $display_description = true, $display_inactive = false, $field_values = null, $ajax = false, $tabindex = 0, $echo = true, $form_theme = null, $style_settings = null );
```

| Paraméter | Típus | Jelentése |
|---|---|---|
| `$id_or_title` | vegyes, kötelező | A beágyazandó űrlap azonosítója vagy címe. |
| `$display_title` | logikai, nem kötelező | Megjelenjen-e az űrlap címe. Alapérték: igen. |
| `$display_description` | logikai, nem kötelező | Megjelenjen-e az űrlap leírása. Alapérték: igen. |
| `$display_inactive` | logikai, nem kötelező | Megjelenjen-e az űrlap akkor is, ha ki van kapcsolva. Alapérték: nem. |
| `$field_values` | tömb, nem kötelező | Dinamikus kitöltés paraméterkulcsai és értékei, például `array('parameter_name' => 'custom_value')`. |
| `$ajax` | logikai, nem kötelező | AJAX-szal menjen-e a beküldés. Alapérték: nem. |
| `$tabindex` | egész, nem kötelező | Az űrlapmezők kezdő tabindexe. A `0` kihagyja a tabindex attribútumokat. |
| `$echo` | logikai, nem kötelező | Kiírja (igen) vagy visszaadja (nem) az űrlap kódját. Alapérték: igen. |
| `$form_theme` | szöveg, nem kötelező | A használandó űrlaptéma. Alapból az alapértelmezett űrlaptéma öröklődik. |
| `$style_settings` | JSON-szöveg, nem kötelező | JSON-ba kódolt stílusbeállítások. A `false` megkerüli a `gform_default_styles` szűrőt. |

### Példák

Alapvető hívás: az 1-es azonosítójú űrlap, cím és leírás nélkül, kikapcsolt állapotban nem jelenik meg, AJAX nélkül.

```php
gravity_form( 1, false, false, false, '', false );
```

AJAX-szal és 12-es kezdő tabindexszel:

```php
gravity_form( 1, false, false, false, '', true, 12 );
```

Az azonosító helyett az űrlap címe is megadható:

```php
gravity_form( 'Contact Us', false, false, false, '', false );
```

Ha olyan azonosítót vagy címet adsz meg, amelyhez nincs űrlap, ez az üzenet jelenik meg: „Oops! We could not locate your form.”

Változó átadása dinamikus kitöltéshez (a `some_field` nevű paraméterű mezőt tölti ki a `$my_variable` értékével):

```php
gravity_form( 1, false, false, false, array('some_field' => $my_variable ), false);
```

### Szkriptek és stílusok betöltése

Ha az űrlapot függvényhívással ágyazod be, a Gravity Forms JavaScript- és CSS-fájljait magadnak kell betöltened a WordPress saját betöltési módszerével. Feltételes logikát tartalmazó űrlaphoz és a dátumválasztó mezőhöz szükségesek. A függvényhívás ezeket magától nem adja hozzá.

Érdemes a betöltésüket a WordPress sorbaállítási rendszerével megoldani, és nem a sablonba fixen beírni. Így a Gravity Forms nem tölti be újra azokat, ha már jelen vannak az oldalon. Jó gyakorlat, hogy csak a weboldal látogatói felületén töltsd be őket. Ehhez használd a `gravity_form_enqueue_scripts()` függvényt: ez beállítja a szükséges szkripteket és stílusokat kézi beágyazáskor. Akkor is hasznos, ha az űrlapwidgetet használod, és nem szeretnéd, hogy a szkriptek és stílusok közvetlenül az oldalba kerüljenek.

## Ugyanaz az űrlap többször egy oldalon

Ne ágyazd be ugyanazt az űrlapot többször ugyanarra az oldalra. A leggyakoribb tünetek:

- az űrlap nem küldhető be, és a töltésjelző folyton forog,
- egy másik űrlap beküldő gombjára kattintva rossz űrlap megy el,
- a tabulátorral az űrlapok között ragadsz,
- gond van a fizetési kiegészítővel összekötött űrlap beküldésével,
- gond van a CAPTCHA mezővel vagy a reCAPTCHA kiegészítővel.

Mindezt az okozhatja, hogy egy űrlap többször szerepel az oldalon. Nemcsak az űrlapblokkal, a shortcode-dal, a widgettel vagy a függvényhívással történő beágyazás számít: ha felugró ablakban, füles felületen, harmonikában vagy csúszkában ágyazod be többször ugyanazt az űrlapot, az sem támogatott, és hibákat okoz.

**Megoldás:** ha mégis többször kell megjelenítened ugyanazt az űrlapot, készíts külön másolatot minden helyre. Az **Űrlapok** lista gyorsmenüjének **Duplikálás** pontjával megsokszorozhatod az űrlapot, és minden másolatot csak egyszer ágyazz be.

**Miért van ez?** Minden űrlap egyedi azonosítót kap a HTML elem `id` attribútumában. Ennek egy dokumentumon belül egyedinek kell lennie, ezért ugyanaz az űrlap nem szerepelhet többször ugyanabban a dokumentumban. Ha több elem azonos azonosítót kap, a böngészők és az azonosító alapján keresgélő JavaScript-ek összezavarodnak:

- JavaScript-ütközés: a szkript az első azonos azonosítójú elemre hat, a többit figyelmen kívül hagyja, így csak az egyik űrlap működik.
- Stílusproblémák: az azonosítóra célzó CSS nem mindenhol érvényesül, ezért az űrlapok eltérően jelenhetnek meg.
- Beküldési hibák: az egyik űrlap beküldése véletlenül egy másikat küldhet el, vagy az egyik adatai a másik helyett mennek el.

Más okai is lehetnek annak, hogy egy űrlap nem küldhető be. Ezeket a sablon- és bővítményütközés tesztelése tárgyalja.