# Tesztfiók és teljes példa

> HubSpot fejlesztői tesztfiók létrehozása, az engedélyezés és egy példaűrlap végigvezetése a beküldésig.

Ez a fejezet egy teljes menetet mutat be: tesztfiók létrehozása, a webhely engedélyezése, majd egy egyszerű űrlap, amely beküldéskor kapcsolatot ad a HubSpothoz. Az alkalmazás és a kulcsok beállítását a [Beállítások](https://hub.hellowp.io/hu/plugins/jet-form-builder-hubspot-action/beallitasok/) fejezet írja le.

## HubSpot-fiók típusok

A HubSpot négy fióktípust ismer: „Standard”, „Developer”, „Sandbox” és „Marketplace Provider”. A „Developer” fiók ingyenes, és legfeljebb tíz tesztfiókot nyithatsz benne. A kiegészítő működéséhez elég a fejlesztői fiók és egy abban létrehozott alkalmazás.

Az alkalmazást a HubSpot fejlesztői oldalán a **Create app** gombbal hozod létre. A **Public app name** mezőbe az alkalmazás nevét írd (például „MyHubSpotAppTEST”), a többi mező nem kötelező. Az **Auth** fülön a **Redirect URLs** mezőbe a **Your Redirect URL** értéke kerül, a **Scopes** résznél a lépések a Beállítások fejezetben vannak. Ha a jogosultságok felvétele után a HubSpot **Update** gombot kínál, kattints rá, majd a **Create app** gombra.

## Tesztfiók létrehozása

A tesztfiók „sandbox” módban működik, így élő adat nélkül kipróbálhatod a kapcsolatot. Nem kötelező: ha fizetős fiókod van, használhatod azt is.

1. A HubSpot fejlesztői fiókjában nyisd meg a **Testing** részt, és válaszd a **Test Accounts** fület.
2. Kattints a **Create developer test account** gombra.
3. A felugró ablak **Account name** mezőjébe írd be a fiók nevét (például „Developer test account 1”), majd kattints a **Create** gombra.
4. A tesztfiókok listájában kattints a létrehozott fiók nevére.
5. Megnyílik a **Create dashboard from scratch** fül. Kattints a **+ New dashboard** gombra, adj nevet a műszerfalnak, hagyd bejelölve az **Allow everyone to view and edit** lehetőséget, és kattints a **Create dashboard** gombra.

## A webhely engedélyezése

1. A WordPressben nyisd meg a **JetFormBuilder → Beállítások → HubSpot API** fület. A **Client Secret** és az **Install URL (OAuth)** mező már ki van töltve, a beállítások el vannak mentve.
2. Kattints az **Authorize** gombra.
3. A HubSpot **Connecting Your Account to HubSpot** ablakában válaszd ki a használni kívánt fiókot (például a tesztfiókot), és kattints a **Choose Account** gombra.
4. Görgess az ablak aljára, és kattints a **Connect app** gombra.
5. Visszatérsz a WordPressbe: az **Authorize** felirat helyén az „You are already logged in” szöveg jelzi, hogy a hitelesítés sikerült.

## Példaűrlap

A példa űrlap három szövegmezőt tartalmaz, és csak a HubSpot műveletet használja.

1. Hozz létre új űrlapot a **JetFormBuilder → Űrlapok** oldalon (vagy használj mintát).
2. Vegyél fel három szövegmezőt: név, e-mail és telefonszám, valamint egy beküldő gombot (Action Button).
3. A jobb oldali sávban a **Post Submit Actions** panelen kattints a **New Action** gombra, és válaszd a **HubSpot** kártyát.
4. Az **Edit HubSpot** ablakban kapcsold be a **Use Global Settings** kapcsolót.
5. Az **AUTHORIZATION TYPE** listában válaszd az **OAuth 2.0** lehetőséget (az **API Key** csak régebbi fiókokhoz való), és kattints a **Send Request** gombra.
6. A beállítások listájának többsége nem kötelező. A **Fields Map** részben az **Email** sorhoz válaszd ki az e-mail-mezőt, a **First Name** és a **Phone** sorhoz a megfelelő űrlapmezőket.
7. Kattints az **Update** gombra, majd mentsd az űrlapot.

## Megjelenítés és eredmény

1. Tedd az űrlapot egy oldalra a JetForm blokkal, widgettel vagy elemmel, a használt szerkesztőben (Elementor, blokkszerkesztő vagy Bricks).
2. Nyisd meg az oldalt a webhely nyilvános felületén, és töltsd ki az űrlapot.
3. A beküldés után az új feliratkozó megjelenik a HubSpot-fiók **Contacts** listájában.