# Contact Form 7 stílusbeállító widget

> Contact Form 7 űrlapok formázása: beállítások, többoszlopos mezők, rádiógomb és jelölőnégyzet stílusa, hibaelhárítás.

A **Contact Form 7 stílusbeállító** widgettel a Contact Form 7 bővítménnyel készített űrlapot az Elementor paneljéről formázhatod, kódolás nélkül.

## Követelmények

A widget akkor jelenik meg a widgetlistában, ha:

1. a **Contact Form 7** bővítmény telepítve és aktív;
2. a bővítmény elég új (a widget az 1.1.0-s kiadástól létezik);
3. a **Contact Form 7 stílusbeállító** widget be van kapcsolva a bővítmény **Widgetek** beállításainál.

## Beállítások

![A Contact Form 7 stílusbeállító Általános szakasza](./kepek/urlapok-cf7-altalanos.webp)

*A Contact Form 7 stílusbeállító Általános szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A **Tartalom** fül szakaszai: **Általános**, **Rádiógomb és jelölőnégyzet**, **Küldés gomb**, **Sikerüzenet / hibaüzenet**.

| Szakasz | Beállítások |
|---|---|
| **Általános** | **Űrlap kiválasztása**, **Mező stílusa**, **Mező mérete** (extra kicsitől extra nagyig), **Mező padding**, **Mező háttérszíne**, **Címke színe**, **Beviteli szöveg / helyőrző színe**, **Szegély stílusa**, **Keret szélessége**, **Szegélyszín**, **Aktív szegély színe**, **Lekerekített sarkok**, **Dobozárnyék** |
| **Rádiógomb és jelölőnégyzet** | **Aktuális stílus felülbírálása** |
| **Küldés gomb** | Igazítás, méret, padding, a **Normál** és a **Rámutatás** állapot szöveg- és háttérszíne, szegély, keretsugár, dobozárnyék |
| **Sikerüzenet / hibaüzenet** | Lásd lent |

A **Stílus** fülön a **Térközök** és a **Tipográfia** (űrlapcímke, beviteli szöveg / helyőrző, gomb) szakasz áll.

### Üzenetek

![A Sikerüzenet / hibaüzenet szakasz](./kepek/urlapok-cf7-uzenetek.webp)

*A Sikerüzenet / hibaüzenet szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A **Mezőellenőrzés** csoportban az **Üzenet pozíciója** lehet **Alapértelmezett** vagy **A mező jobb alsó részén**, és megadhatod az **Üzenet színét**, a **Keretek kiemelését** és a **Tipográfiát**. Az **Űrlap-érvényesítés sikere / hibája** csoportban külön színe van a sikerüzenet és a hibaüzenet szövegének, hátterének és keretének, és állítható a **Keret mérete**, a **Lekerekített sarkok**, az **Üzenet padding** és a **Tipográfia**.

### Rádiógomb és jelölőnégyzet

![A Rádiógomb és jelölőnégyzet szakasz](./kepek/urlapok-cf7-radio-jelolonegyzet.webp)

*A Rádiógomb és jelölőnégyzet szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A rádiógombok, jelölőnégyzetek és az elfogadás mező alapból az **Általános** szakasz stílusát kapják. Egyéni megjelenéshez kapcsold be az **Aktuális stílus felülbírálása** kapcsolót, és állítsd be a megjelenő színeket.

## Az eredmény a weboldalon

![A Contact Form 7 űrlap a weboldalon](./kepek/urlapok-cf7-elo.webp)

*A Contact Form 7 űrlap a weboldalon* (https://minta-bolt.hu/urlapok-1-teszt/)

## Több oszlop egy sorban

Ha a mezőket egymás mellé szeretnéd tenni, az űrlap kódjában (a Contact Form 7 űrlapszerkesztőjében) minden sort egy `uael-cf7-col` osztályú burkolóba tegyél, és minden mezőt `span` címkébe zárj. A mezők helyére a Contact Form 7 saját mezőkódja kerül.

Három oszlop:

```html
<div class="uael-cf7-col">
<span> 1. mező </span>
<span> 2. mező </span>
<span> 3. mező </span>
</div>
```

Két oszlop:

```html
<div class="uael-cf7-col">
<span> 1. mező </span>
<span> 2. mező </span>
</div>
```

Példa mezőkóddal:

```html
<span>[text* your-name placeholder "Neved"]</span>
```

## Hibaelhárítás

### Nem látom a widgetet

Nézd végig a fenti követelményeket: a Contact Form 7 aktív-e, és be van-e kapcsolva a widget a **Widgetek** beállításainál.

### A jelölőnégyzet, rádiógomb vagy elfogadás mező nem formázható

Ellenőrizd a Contact Form 7 űrlap kódjában:

1. A jelölőnégyzet vagy rádiógomb mezőben szerepel a `use_label_element` beállítás.
2. A jelölőnégyzet vagy rádiógomb mezőben **nincs** `label_first` beállítás.
3. Az elfogadás mezőnél van feltételes utasítás (`[acceptance …]` mező a Contact Form 7 kódjában).