# Aláírás a PDF-ben

> Szerződés aláírása az űrlapon a Signature Field mezővel, az aláírással ellátott PDF elkészítése és elküldése.

Ez a fejezet egy szerződésűrlapot készít, amelyen a látogató kézzel (egérrel vagy ujjal) aláír, a beküldés után pedig az aláírással ellátott PDF e-mailben elmegy hozzá. Más műveletekkel is kombinálható, például a **Register User** művelettel regisztrálhatod az aláírókat.

## Követelmények

- JetFormBuilder.
- A **Signature** és a **PDF Attachment** bővítmény (mindkettő a JetFormBuilder kiegészítője).

## Az űrlap

1. Nyisd meg a **JetFormBuilder → Add New** oldalt. Az üdvözlő blokkot töröld.
2. Add meg az űrlap nevét (a példában „Contract Form with Signature”).
3. Vedd fel a mezőket:
   - két **Text Field**: a név és az e-mail-cím;
   - **Textarea Field**: az elérhetőségi adatoknak;
   - **Checkbox Field**: az elfogadó négyzet a szerződés feltételeihez.
4. A jelölőnégyzet **Manage Items** gombjára kattintva az **Edit Manual Options** ablakban a **LABEL** mezőbe írd: „I agree with the contract provisions”, a **VALUE** mezőbe: „agree”. Kattints az **Update** gombra.
5. Végül szúrd be a **Signature Field** mezőt.

### A Signature Field beállítása

1. A **FIELD NAME** mezőbe írd az elnevezést (a példában „Signature”). A **FORM FIELD NAME** magától kitöltődik.
2. Az **IMAGE FORMAT** a létrejövő kép formátuma (a példában **PNG**).
3. A **STORAGE TYPE** adja meg, hogyan mentődjön a kép. A példa a **File in a hashed folder and WP attachment** értéket választja, és bekapcsolja a megjelenő **Delete created file on form error** kapcsolót, hogy csak a sikeresen beküldött űrlap adata maradjon meg.
4. A **Canvas Settings** részben a **CANVAS WIDTH**, **CANVAS HEIGHT**, **PEN COLOR** és **CLEAR BUTTON LABEL** marad az alapértelmezett, a **CANVAS BACKGROUND** pedig a példában „Cyan bluish gray”. A háttérszín csak a használhatóságot segíti: az aláírás háttér nélkül mentődik.

### A beküldés gomb megjelenítése feltétellel

A példában a beküldés gombja addig nem látszik, amíg a látogató be nem jelölte az elfogadást, és alá nem írt.

1. Tedd az **Action Button**t egy **Conditional Block** blokkba.
2. A blokk beállításainál kattints a „keresztezett nyilak” ikonra (a felső eszköztáron, az **Options** gombtól balra).
3. A **Conditional Logic** ablakban a **Which Function Need Execute?** listából válaszd a **Show if …** értéket, és kapcsold be a **Remove hidden elements from page HTML** kapcsolót.
4. Kattints az **+ Add Condition** gombra, és állítsd be az első feltételt: **FIELD** a jelölőnégyzet (címke: „I agree with the contract provisions”), **OPERATOR** az **In the list**, **VALUE TO COMPARE** az „agree”.
5. Újabb **+ ADD CONDITION** gombbal vegyél fel egy második feltételt: **FORM FIELD NAME** a „Signature”, **OPERATOR** a **Not empty**.
6. Kattints az **Update** gombra.

## A beküldés utáni műveletek

Az üdvözlő blokk törlése miatt a **Save Form Record** nem kerül be magától: a **JetForm** fül **Post Submit Actions** részén a **New Action** gombbal add hozzá. Ez teszi lehetővé, hogy a generált PDF a médiatárba kerüljön, és a **Form Records** oldalon megjelenjen a hivatkozása.

### Generate PDF

1. Add hozzá a **Generate PDF** műveletet, a ceruza ikonnal nyisd meg, és kattints az **Add new template** gombra.
2. Írd be a sablon nevét az alapértelmezett „Sample template” helyére. A példában a sablon címe „Contract”.
3. Osszd két oszlopra az elrendezést, és a makrókkal (**[/]**, **Insert JetFormBuilder macros**) tedd bele az űrlap mezőit. A makrók használatát a [PDF-sablon szerkesztése](https://hub.hellowp.io/hu/plugins/jet-form-builder-pdf/sablonszerkeszto/) fejezet írja le.
4. A második oszlopban, az elérhetőségi adatok makrója alatt add hozzá a **Kép** blokkot, majd a **[/]** gombbal válaszd ki az aláírásmezőt („Signature”). A kép helyén így az aláírás jelenik meg.
5. Kattints a **Mentés** gombra, és térj vissza az űrlaphoz.
6. A **SELECT PDF TEMPLATE** listából válaszd ki a sablont („Contract”), és add meg a **FILE NAME** mezőt. A csavarkulccsal kiválaszthatod a név mezőt is, így a fájl neve az aláíróé lesz, például `John-Smith.pdf`.
7. Kapcsold be a **Save generated PDF** kapcsolót, görgess lejjebb, és szükség szerint írd át a két hibaüzenetet.

### Send Email

1. Az **Edit Generate PDF** ablakban kattints az **Attach to the Send Email action** gombra, majd a megjelenő **Confirm** gombra.
2. A buborékban a **Go to the action** hivatkozás megnyitja a **Send Email** ablakot. Az **ATTACHMENTS** résznél a generált PDF már a mellékletek között van.
3. Görgess az ablak tetejére. A **MAIL TO** listából válaszd az **Email from submitted form field** értéket, a **FROM FIELD** mezőben pedig az űrlap e-mail mezőjét. A **SUBJECT** legyen például „contract”, a **CONTENT TYPE** **Plain text**, a **CONTENT** mezőbe pedig írd a levél szövegét, például „Dear %name%! Your contract is attached. Best regards!”.
4. Kattints az **Update** gombra, majd mentsd az űrlapot.

## Az űrlap oldalra helyezése

Hozz létre egy oldalt, és tedd rá a **JetForm** elemet. A **Choose Form** listában válaszd ki az űrlapot, majd tedd közzé az oldalt. Ha szeretnéd, az űrlapot felugró ablakba is teheted, hogy előre megadott feltételekkel jelenjen meg.

## Kipróbálás

1. A weboldalon töltsd ki a szöveges mezőket, jelöld be a jelölőnégyzetet, és rajzold le az aláírást a vászonra. Ekkor megjelenik a **SUBMIT** gomb: kattints rá.
2. Nézd meg a postaládát: a levélben ott a PDF. Nyisd meg, és ellenőrizd, hogy az aláírás helyesen szerepel.
3. A **JetFormBuilder → Form Records** oldalon bontsd ki a beküldés részleteit, és az alján a **Generated PDF** résznél a **View** hivatkozással nyisd meg a mellékletet a médiatárban. A **Label & Name** alatti útvonalat a böngészőbe másolva is megnézheted.

A PDF fájl szerveren lévő helyét a [Hol találod a generált PDF-eket](https://hub.hellowp.io/hu/plugins/jet-form-builder-pdf/pdf-fajlok-elerese/) fejezet írja le.