# Egyedi megjelenésű értesítő e-mailek

> HTML, CSS és összefűző címkék együttes használata az értesítés üzenetében, a Vizuális és Kód nézet buktatói.

HTML-lel, CSS-sel és összefűző címkékkel olyan sablont készíthetsz, amely az űrlap beküldött adataival töltődik ki, így az értesítő levelek a saját arculatodat követik. A sablon az értesítés **Üzenet** mezőjébe kerül (**Űrlapok → Beállítások → Értesítések**, az értesítés szerkesztése).

**Fontos:** testreszabáskor kapcsold be az **Automatikus formázás kikapcsolása** jelölőnégyzetet az értesítésben, különben a WordPress beavatkozik a formázásba.

![Az értesítés szerkesztője az Üzenet mezővel, a Média hozzáadása gombbal és a Vizuális és Kód füllel](./kepek/hogyan-9-ertesites-uzenet.webp)

*Az értesítés szerkesztője az Üzenet mezővel, a Média hozzáadása gombbal és a Vizuális és Kód füllel* (https://minta-bolt.hu/wp-admin/admin.php?page=gf_edit_forms&view=settings&subview=notification&id=1&nid=new)

A képen az **Üzenet** szerkesztője látszik a **Vizuális** és **Kód** füllel, alatta az **Automatikus formázás kikapcsolása** jelölőnégyzettel.

## Az üzenet szerkesztése

- A **Vizuális** nézet egyszerű eszköztárat ad a gyors HTML-sablonozáshoz.
- A **Kód** nézetben tetszőleges HTML-t írhatsz.
- Nem minden e-mail-kliens támogat minden HTML-címkét és CSS-stílust.
- Ha a **Kód** fülön írod a HTML-t, maradj ott: a WordPress klasszikus szerkesztője a fülek közti váltáskor egyes címkéket eltávolít.

Hogy véletlenül se válts, a **Vizuális** fület teljesen kikapcsolhatod ezzel a kóddal (a webhelyed szokásos kódhelyére illeszd be):

```php
add_action( 'admin_init', function () {
    if ( class_exists( 'GFForms' ) && GFForms::is_gravity_page() && GFForms::get_page() === 'notification_edit' ) {
        add_filter( 'user_can_richedit', '__return_false' );
    }
} );
```

## Összefűző címkék és feltételes shortcode

A szerkesztő melletti összefűző címke legördülővel (a **{..}** ikon) címkéket szúrhatsz az üzenetbe, amelyek a beküldésből töltődnek ki. Az [Összefűző címkék áttekintése](https://hub.hellowp.io/hu/plugins/gravityforms/osszefuzo-cimkek-attekintes/) fejezet ismerteti őket. A feltételes shortcode-dal tartalomblokkokat jeleníthetsz meg a beküldött értékektől függően, lásd: [Feltételes shortcode](https://hub.hellowp.io/hu/plugins/gravityforms/osszefuzo-cimkek-felteteles-shortcode/).

## Alap példa

```html
<h1>Email Header</h1>
<img src="https://example.com/image.jpg">
Hello {Name (First):1.3}{Name (Last):1.6},

<div style="margin: 20px;">
<p>This is some body content with a margin around it.</p>
</div>

<p style="color: green;">{form_title}</p>

<p style="color: red;">This could be some footer content.</p>
```

A példában:

1. `h1` címkék közt fejléc áll;
2. az `img` címkével kép ágyazódik be;
3. a felhasználó keresztnevét és vezetéknevét összefűző címkék töltik ki;
4. egy `div` kis margót ad a tartalom köré;
5. az `{form_title}` kiírja az űrlap címét zöld színnel;
6. az utolsó sor állandó, piros szövegű lábléc.

Mivel ez egyszerű HTML és összefűző címke, ugyanez **Szöveg** típusú megerősítés tartalmaként is működik. A címzettek megadásáról az [Értesítések beállítása](https://hub.hellowp.io/hu/plugins/gravityforms/ertesitesek-beallitas/) fejezetben olvashatsz.