Izradite i prikažite skočne obrasce

Published: 16. srpnja 2026. · Last updated: 21. srpnja 2026. · By Marcus Biel

Skočni obrazac prikazuje se iznad sadržaja vaše web-stranice. Ponudu za prijavu postavlja u izravno vidno polje posjetitelja, dok stranica u pozadini ostaje na mjestu.

Skočni obrasci korisni su za ponude biltena, popuste, prijave na događaje, magnete za potencijalne klijente i druge usmjerene pozive na akciju. Budući da prekidaju uobičajeno iskustvo na stranici, vrijeme prikaza i učestalost jednako su važni kao i dizajn.

Ovaj vodič objašnjava postavke specifične za skočne obrasce. Izgledi, blokovi sadržaja, polja pretplatnika, oznake, tipografija, slojevi i tokovi prijave obrađeni su u glavnom vodiču za izradu obrazaca za prijavu.

Izrada skočnog obrasca

Otvorite “Signup Forms”, kliknite “Create Form” i odaberite “Popup”. Unesite jasan interni naziv i nastavite u alat za izradu.

Postojeći skočni obrazac možete urediti i tako da kliknete njegovo ime u pregledu obrazaca za prijavu.

Upotrijebite naziv koji objašnjava ponudu ili mjesto prikaza, primjerice “Homepage Discount Popup”, “Webinar Registration Popup” ili “Guide Download Popup”. Interni naziv ne prikazuje se automatski posjetiteljima.

Odabir predloška skočnog obrasca

Skočni obrasci nude prazan obrazac, standardni obrazac i četiri dizajnirana predloška:

• Čisti popust
• Topli vodič
• Tamni webinar
• Blaga zajednica

Odaberite predložak čija veličina i struktura sadržaja odgovaraju ponudi. Sav tekst, polja, boje, slike, razmaci i izgled mogu se naknadno promijeniti.

Dizajniranje skočnog obrasca

Upotrijebite vizualni alat za izradu kako biste rasporedili skočni obrazac. Obrazac za prijavu možete kombinirati s tekstom, slikama, videozapisima, popisima, gumbima, društvenim poveznicama, brojačem pretplatnika, razmacima i razdjelnicima.

Glavna poruka neka bude dovoljno kratka da se može odmah razumjeti. Jasan naslov, jedno kratko objašnjenje i konkretan gumb za slanje obično su učinkovitiji od nekoliko poruka koje se međusobno natječu.

Odaberite blok obrasca za prijavu kako biste konfigurirali polja, obavezne podatke, skrivene oznake, indikator napretka, brojač pretplatnika, polja za unos i gumb za slanje. Otvorite “Page settings” da biste promijenili ukupnu pozadinu skočnog obrasca i zadane postavke izgleda.

Skočni obrazac prikazuje se iznad web-stranice s kontrolom za zatvaranje. Ostavite dovoljno vizualnog prostora oko važnog teksta i polja kako bi obrazac ostao jednostavan za upotrebu na malom zaslonu.

Konfiguriranje ponašanja skočnog obrasca

Odaberite blok obrasca za prijavu i otvorite “Widget Settings”. Ovaj odjeljak određuje kada se skočni obrazac prikazuje i koliko ga često posjetitelj može vidjeti.

Odgoda prikaza

“Display Delay” određuje koliko sekundi Maildroppa čeka prije nego što prikaže skočni obrazac na ugrađenoj web-stranici.

Unesite 0 da biste ga prikazali bez dodatne odgode. Upotrijebite veću vrijednost kada posjetiteljima želite dati vremena da pročitaju stranicu prije nego što se ponuda pojavi. Alat za izradu prihvaća odgodu do 86,400 sekundi.

Odaberite odgodu na temelju stranice. Kratka odgoda može biti prikladna na usmjerenoj kampanjskoj stranici, dok dulja odgoda može manje ometati čitanje članka.

Učestalost prikaza

“Display Frequency” određuje razdoblje nakon kojeg se skočni obrazac može ponovno prikazati istom posjetitelju. Dostupne su opcije:

• Uvijek
• Jednom na sat
• Jednom dnevno
• Jednom tjedno
• Jednom mjesečno

Opciju “Always” upotrebljavajte oprezno. Skočni obrazac koji opetovano prekida istog posjetitelja može postati frustrirajući. Dnevna ili tjedna učestalost često je bolja početna postavka za opću ponudu na web-stranici.

Učestalost se pohranjuje u pregledniku posjetitelja. Stoga testiranje u drugom pregledniku, privatnom prozoru za pregledavanje ili nakon brisanja pohrane preglednika može dati drugačiji rezultat.

Upotreba namjere izlaska

Omogućite “Exit Intent Popup” kada se skočni obrazac treba otvoriti nakon što posjetitelj pomakne pokazivač izvan područja stranice, što upućuje na to da bi mogao napustiti stranicu.

Kada je namjera izlaska omogućena, skočni obrazac čeka na takvo ponašanje umjesto da slijedi uobičajeni odgođeni prikaz. Odabrana učestalost i dalje sprječava njegovo ponovno prikazivanje prerano.

Namjera izlaska temelji se na pomicanju pokazivača pa je uglavnom relevantna za stolna i prijenosna računala. Uređaji s dodirnim zaslonom ne pružaju isti signal izlaska. Uvijek osigurajte da mobilni posjetitelji vašu ponudu za prijavu mogu otkriti putem same stranice ili drugog prikladnog obrasca.

Ručno otvaranje skočnog obrasca s elementa stranice

Skočni obrazac može se otvoriti kada posjetitelj klikne određeni gumb, sliku ili poveznicu na vašoj web-stranici. To je okidač za ručni klik. Razlikuje se od opcije “Exit Intent Popup”, koja reagira kada posjetitelj pomakne pokazivač izvan stranice.

Okidač za ručni klik konfigurirajte i instalirajte na sljedeći način:

1. Otvorite skočni obrazac u alatu Signup Form Builder.
2. Kliknite blok obrasca za prijavu na platnu i otvorite “Settings” s desne strane.
3. Proširite “Widget Settings” i omogućite “Open popup when a customer clicks a page element”.
4. Kliknite “Save changes”.
5. Vratite se na pregled obrazaca za prijavu i aktivirajte skočni obrazac ako je neaktivan.
6. Kliknite “Show Code Snippet” u retku tog skočnog obrasca.

Dijaloški okvir sadržava dvije vrijednosti potrebne na vašoj web-stranici:

1. Kopirajte cijeli kôd s kartice “JavaScript” i dodajte ga na stranicu web-stranice na kojoj skočni obrazac treba biti dostupan.
2. Ispod koda kopirajte ID prikazan pod “Add this ID to element from which you want to manually trigger Popup”.
3. Dodajte tu točnu vrijednost u atribut id gumba, slike ili poveznice koja treba otvoriti skočni obrazac.

ID slijedi ovaj format:

maildroppa-popup-btn-[form-id]

Na primjer:

<button id="maildroppa-popup-btn-[form-id]">Preuzmite vodič</button>

JavaScript učitava skočni obrazac. ID povezuje skočni obrazac s odabranim elementom stranice. Oba moraju biti prisutna na istoj objavljenoj stranici. Kada posjetitelj klikne element s tim točnim ID-jem, skripta Maildroppa otvara skočni obrazac.

Ako gumb na vašoj web-stranici već ima ID iz drugog sustava skočnih obrazaca, zamijenite ga ID-jem okidača Maildroppa kada Maildroppa treba upravljati klikom. Ne postavljajte Maildroppa skočni obrazac unutar drugog skočnog obrasca koji isporučuje alat za izradu vaše web-stranice.

Svaki HTML ID upotrijebite samo jednom po stranici. Ako više elemenata treba otvarati isti skočni obrazac, zamolite osobu koja implementira web-stranicu da poveže te elemente bez dupliciranja istog ID-ja.

Povezivanje toka prijave

Pregledajte dodijeljeni tok prijave u zaglavlju alata za izradu. On određuje neposredni odgovor nakon slanja, poruku e-pošte za Double Opt-in i rezultat nakon potvrde.

Možete odabrati postojeći tok, urediti ga ili izraditi zaseban tok za ovaj skočni obrazac. Namjenski tok koristan je kada ponuda treba vlastitu poruku potvrde ili isporuku magneta za potencijalne klijente.

Pregled i spremanje

Kliknite “Preview” da biste provjerili dizajn i ponašanje skočnog obrasca bez promjene verzije koja se upotrebljava na vašoj web-stranici. Pregledajte izgled, kontrolu za zatvaranje, redoslijed polja, prostor za provjeru valjanosti i odgovor nakon slanja.

Kliknite “Save changes” kada je skočni obrazac spreman. Zatim se vratite na pregled obrazaca za prijavu.

Aktiviranje i automatsko ugrađivanje skočnog obrasca

Aktivirajte skočni obrazac iz izbornika radnji s tri točke ako već nije aktivan. Zatim kliknite “Show Code Snippet” i kopirajte cijeli kôd s kartice “JavaScript”.

Dodajte skriptu na svaku stranicu web-stranice na kojoj skočni obrazac treba biti dostupan. Kôd sadržava jedinstveni ID obrasca skočnog obrasca i učitava njegovu trenutačno spremljenu konfiguraciju.

Kartica “HTML” pruža generirano označavanje za prilagođene implementacije. Ako je upotrebljavate, pažljivo testirajte sva ponašanja i korake slanja jer kôd i stilovi vaše web-stranice mogu utjecati na rezultat.

Ovaj odjeljak primjenjuje se kada se skočni obrazac treba automatski otvoriti na temelju odgode prikaza ili ponašanja vezanog uz namjeru izlaska. Za gumb, sliku ili poveznicu koja otvara skočni obrazac klikom slijedite

.

Opće upute za ugrađivanje potražite u vodiču Izrada i ugrađivanje ugrađenog obrasca.

Testiranje skočnog obrasca na vašoj web-stranici

Nakon dodavanja koda testirajte skočni obrazac na stvarnoj stranici web-stranice:

1. Provjerite konfiguriranu odgodu.
2. Testirajte gumb za zatvaranje i klik izvan obrasca.
3. Ako je omogućeno, pomaknite pokazivač izvan stranice da biste testirali namjeru izlaska.
4. Ako je omogućeno, kliknite konfigurirani element stranice da biste testirali ručni okidač.
5. Provjerite izgled na uskom zaslonu.
6. Pošaljite obrazac i dovršite postupak Double Opt-in.
7. Provjerite pretplatnika i skrivene oznake u Maildroppi.

Postavka učestalosti može spriječiti ponovno prikazivanje skočnog obrasca tijekom ponovljenih testova. Upotrijebite privatni prozor za pregledavanje ili izbrišite relevantnu pohranu preglednika kada vam je potreban novi testni posjet.

Ažuriranje ili deaktiviranje skočnog obrasca

Da biste ažurirali skočni obrazac, otvorite ga u Maildroppi, uredite dizajn ili ponašanje, pregledajte ga i kliknite “Save changes”. Isječak JavaScripta nastavlja upotrebljavati isti ID obrasca.

Da biste privremeno zaustavili njegovo prikazivanje, odaberite “Deactivate” iz izbornika radnji. Deaktiviranjem se čuvaju skočni obrazac i njegovi prethodni podaci izvješća. Uklonite i skriptu ili element okidača s web-stranice ako vam više nisu potrebni.