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

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.

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.

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.

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

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

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

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

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):

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.