# Űrlap widget: űrlap építése az Elementorban

> Kapcsolatfelvételi vagy ajánlatkérő űrlap összeállítása az Űrlap widgettel: mezők, gomb, küldési műveletek, üzenetek és extra opciók.

Az **Űrlap** widget közvetlenül az Elementor szerkesztőjében épít kapcsolatfelvételi, érdeklődő- vagy ajánlatkérő űrlapot, az Elementor Pro űrlapmodulja nélkül. Az alapvető mezőket és az e-mail küldést az ingyenes bővítmény is tudja, a Pro további mezőtípusokat, szűrést a botok ellen és hírlevélszolgáltatói kapcsolatokat ad.

## Előkészületek

- Az Elementor (az ingyenes is elég) legyen telepítve és aktív.
- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá a **Form** szóra, és kapcsold be a kapcsolóját.

## Mi tartozik az ingyenes és mi a Pro változathoz

| | Ingyenes | Pro |
|---|---|---|
| Mezőtípusok | Szöveg, Hosszú szöveg, E-mail-cím, Szám, Rejtett, HoneyPot, Legördülő menü, Dátum, Idő | Mindez, továbbá Telefonszám, Választógomb, Jelölőnégyzet, URL, Feltételek elfogadása, Cloudflare, ReCAPTCHA |
| Küldési műveletek | E-mail, Átirányítás | Mindez, továbbá Adatbázis-bejegyzés, Automatikus válasz e-mail, Active Campaign, Brevo, ConvertKit, GetResponse, Mailchimp, MailerLite, Drip, Webhook, Slack, Discord |
| Spamvédelem | HoneyPot mező | Google reCAPTCHA v3 és Cloudflare Turnstile |

## Az űrlap felépítése

1. Húzd az **Űrlap** widgetet az oldalra.
2. Az **Általános** szakaszban add meg az **Űrlap neve** mezőt. Innen az **Import Presets** gombbal kész mintából is indulhatsz.
3. Nyiss meg egy mezőt a listában, és a **Tartalom** lapon állítsd be a típusát, a címkéjét, a helykitöltőjét, a kötelező voltát és az oszlopszélességét.
4. Az **Elem hozzáadása** gombbal új mezőt veszel fel, húzással pedig átrendezheted őket.

![Az Űrlap widget Általános szakasza az űrlap nevével és a mezők listájával](./kepek/urlap-builder-panel-altalanos.webp)

*Az Űrlap widget Általános szakasza az űrlap nevével és a mezők listájával* (https://minta-bolt.hu/wp-admin/post.php?post=354&action=elementor)

A képen az alapértelmezett mezőkészlet látszik: keresztnév, vezetéknév, e-mail-cím, mobilszám, tárgy, üzenet és egy elfogadó jelölőnégyzet.

![Egy megnyitott e-mail típusú mező a Tartalom lapon](./kepek/urlap-builder-panel-mezo.webp)

*Egy megnyitott e-mail típusú mező a Tartalom lapon* (https://minta-bolt.hu/wp-admin/post.php?post=354&action=elementor)

A képen az e-mail-cím mezőt nyitottuk meg: típus, címke, helykitöltő, kötelező kapcsoló és oszlopszélesség.

### A mezők beállításai

| Beállítás | Mit csinál |
|---|---|
| **Típus** | A mező fajtája (lásd a táblázatot fent). A típusok magyar neve: Szöveg, Hosszú szöveg, E-mail-cím, Szám, Rejtett, HoneyPot, Legördülő menü, Telefonszám, Választógomb, Jelölőnégyzet, URL, Feltételek elfogadása, Dátum, Idő, Cloudflare, ReCAPTCHA. |
| **Címke**, **Helykitöltő** | A mező felirata és a benne látszó halvány segédszöveg. |
| **Kötelező** | Kötelezővé teszi a mezőt. |
| **Autofill** (Pro) | Engedi, hogy a böngésző a mentett adatokból kitöltse a mezőt. Alapból be van kapcsolva. |
| **Oszlopszélesség** | A mező szélessége százalékban, eszközönként. Két, nagyjából 50 százalékos mező egymás mellé kerül. |
| Legördülő menü, Választógomb, Jelölőnégyzet: **opciók** | Soronként egy választási lehetőség. |

A mező **Haladó** lapján további beállítások vannak:

| Beállítás | Mit csinál |
|---|---|
| **Alapértelmezett érték** | A mező előre kitöltött értéke. |
| **Súgószöveg** | A mező alatt megjelenő magyarázat. |
| **ARIA-leírás** | A képernyőolvasóknak szánt leírás. |
| **Egyedi ID** | A mező azonosítója, az e-mailekben és a hírlevél-integrációkban ezzel hivatkozol rá. Csak betű, szám és aláhúzás lehet benne, szóköz nem, és az oldalon egyedinek kell lennie. |
| **Adatok shortcode-ja** | Az a kód, amellyel a mező értékét beillesztheted egy e-mail szövegébe: `[value_id="azonosító"]`, például `[value_id="email"]`. A Pro-ban az **Egyedi ID** beírásakor magától kitöltődik. |

![Az e-mail mező Haladó lapja az egyedi azonosítóval és az adatok shortcode-jával](./kepek/urlap-builder-panel-mezo-halado.webp)

*Az e-mail mező Haladó lapja az egyedi azonosítóval és az adatok shortcode-jával* (https://minta-bolt.hu/wp-admin/post.php?post=354&action=elementor)

A képen az **Egyedi ID** (`email`) és a hozzá tartozó **Adatok shortcode-ja** látszik.

## A gomb

A **Gomb** szakaszban állítod be a gomb szövegét (alapból **Küldés**), a stílusát, egy opcionális ikont (az **Ikonbetűkészlet** mezővel, az ikon a szöveg előtt vagy után állhat), a **Soron belüli gomb** kapcsolót és a **Gomb szélessége** értékét. A gomb **Haladó** lapján külön azonosítót is megadhatsz neki (**Button ID**).

![Az Űrlap widget Gomb szakasza](./kepek/urlap-builder-panel-gomb.webp)

*Az Űrlap widget Gomb szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=354&action=elementor)

A képen a gomb szövegének, ikonjának és szélességének beállításai láthatók.

## Küldési műveletek

A **Küldési műveletek** szakasz **Művelet hozzáadása** mezőjében választod ki, mi történjen, amikor valaki elküldi az űrlapot. Egyszerre több műveletet is megadhatsz.

![A Küldési műveletek szakasz egyetlen kiválasztott művelettel](./kepek/urlap-builder-panel-muveletek.webp)

*A Küldési műveletek szakasz egyetlen kiválasztott művelettel* (https://minta-bolt.hu/wp-admin/post.php?post=354&action=elementor)

A lehetséges műveletek: **Adatbázis-bejegyzés** (Pro), **E-mail-cím** (az űrlap elküldése e-mailben), **Automatikus válasz e-mail** (Pro), **Átirányítás**, **Active Campaign**, **Brevo**, **ConvertKit**, **GetResponse**, **Mailchimp**, **MailerLite**, **Drip**, **Webhook**, **Slack** és **Discord** (ezek mind Pro).

Minden kiválasztott művelet saját szakaszt kap a panelen, a beállításaival.

![A Küldési műveletek szakasz több kiválasztott művelettel, alattuk a hozzájuk tartozó szakaszokkal](./kepek/urlap-builder-panel-muveletek-sok.webp)

*A Küldési műveletek szakasz több kiválasztott művelettel, alattuk a hozzájuk tartozó szakaszokkal* (https://minta-bolt.hu/wp-admin/post.php?post=355&action=elementor)

A képen jól látszik, hogy minden újabb művelet új szakasszal bővíti a panelt.

A részletes beállításokat külön fejezetek írják le:

- [Beérkező űrlapok e-mailben](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/urlap-builder-email-fogadas/) (E-mail művelet)
- [Automatikus válasz a látogatónak](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/urlap-builder-automatikus-valasz/)
- [SMTP-beállítás Gmaillel](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/urlap-builder-smtp-gmail/), hogy az e-mailek megbízhatóan megérkezzenek
- [Hírlevélszolgáltatók: Brevo, Kit, GetResponse, Mailchimp, MailerLite, Drip](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/urlap-builder-hirlevel-integraciok/)
- [Spamvédelem: Google reCAPTCHA v3 és Cloudflare Turnstile](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/urlap-builder-spamvedelem/)

## Üzenet tartalma

Az **Üzenet tartalma** szakaszban átírhatod azokat a szövegeket, amelyeket a látogató az űrlap elküldése után lát.

![Az Üzenet tartalma szakasz az alapértelmezett szövegekkel](./kepek/urlap-builder-panel-uzenetek.webp)

*Az Üzenet tartalma szakasz az alapértelmezett szövegekkel* (https://minta-bolt.hu/wp-admin/post.php?post=354&action=elementor)

A képen az öt üzenet alapértelmezett szövege látszik.

| Beállítás | Mikor jelenik meg | Alapértelmezett szöveg |
|---|---|---|
| **Sikerüzenet** | Az űrlap elment. | Form Submitted Successfully |
| **Kötelező mezők** | Egy kitöltetlen kötelező mező alatt. | Field is Required. |
| **Űrlap érvényesítési hiba** | Az űrlapban érvénytelen adat van. | Invalid form! Please check it again. |
| **Beküldési probléma** | Egy művelet (például egy integráció) nem sikerült. A `%error%` beírásával a hiba okát is kiírathatod. | There was an error in submitting the form. |
| **Szerverhiba** | A kérés nem jutott el a webhelyhez. | A server error occurred. |

A Pro-ban a siker- és a hibaüzenet 5 másodperc után eltűnik, az ingyenes bővítményben az oldalon marad. Az ingyenes változatban a kitöltetlen kötelező mezőt a böngésző saját ellenőrzése jelzi.

![Az elküldött űrlap a sikerüzenettel az oldalon](./kepek/urlap-builder-sikeruzenet.webp)

*Az elküldött űrlap a sikerüzenettel az oldalon* (https://minta-bolt.hu/uf-urlap/)

A képen az űrlap alatt zölden látszik a sikerüzenet. Az űrlap a küldés után kiürül.

## Extra opciók

Az **Extra opciók** szakaszban négy beállítás van:

- **Űrlap ID**: az űrlap HTML-azonosítója (a mentett beküldéseknél is ez a neve).
- **Űrlap címének megjelenítése**: kiírja az űrlap nevét a mezők fölé.
- **Címke megjelenítése**: a mezők címkéi látszanak-e.
- **Kötelező jelölő**: a kötelező mezők mellé kerülő csillag (*).

![Az Extra opciók szakasz](./kepek/urlap-builder-panel-extra.webp)

*Az Extra opciók szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=354&action=elementor)

A képen a négy kapcsoló és az azonosító mező látható.

## Az űrlap megjelenése a nyilvános oldalon

![Az űrlap a nyilvános oldalon az alapértelmezett mezőkkel](./kepek/urlap-builder-frontend.webp)

*Az űrlap a nyilvános oldalon az alapértelmezett mezőkkel* (https://minta-bolt.hu/uf-urlap/)

A képen az alapértelmezett mezőkkel felépített űrlap látszik vendégként nézve.

## Stílus

A **Stílus** lapon állítod be az űrlap kinézetét: az **Általános** szakaszban a sor- és oszlopközöket és az űrlap címét, továbbá a mezők, a küldés gomb, a súgószöveg és az üzenetek stílusát.

## Korlátozások

- A **HoneyPot** mező jelenleg nem állítja meg a beküldést: kitöltött HoneyPot mezővel az űrlap mégis elmegy. Spam ellen használd a reCAPTCHA vagy a Cloudflare Turnstile mezőt (Pro).
- Nincs fájlfeltöltő mező.
- Az e-mail címzett (**E-mail cím**), a **CC** és a **BCC** mezőbe is csak egy-egy cím írható.