Izradite i ugradite obrasce za prijavu

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

Ugrađeni obrazac postavlja se izravno unutar postojeće stranice na vašem web-mjestu. Ostaje dio okolnog sadržaja umjesto da se prikazuje iznad njega.

Ugrađeni obrasci dobro funkcioniraju u člancima na blogu, odredišnim stranicama na vlastitom web-mjestu, odjeljcima za newsletter, bočnim trakama i podnožjima. Mjesto na koje dodate kôd obrasca određuje gdje će se obrazac prikazati.

Ovaj vodič obuhvaća korake specifične za ugrađene obrasce. Uobičajene funkcije vizualnog uređivanja objašnjene su u glavnom vodiču za izradu obrazaca za prijavu.

Izrada ugrađenog obrasca

Otvorite „Signup Forms”, kliknite „Create Form” i odaberite „Embedded Form”. Unesite jasan interni naziv i nastavite u uređivač.

Postojeći obrazac možete urediti i tako da kliknete njegov naziv u pregledu obrazaca za prijavu.

Interni naziv ne prikazuje se automatski posjetiteljima. Nazovite obrazac prema njegovoj lokaciji ili svrsi, primjerice „Newsletter na početnoj stranici”, „Podnožje bloga” ili „Ažuriranja proizvoda”.

Odabir početnog dizajna

Ugrađeni obrasci nude prazan obrazac, standardni obrazac i četiri dizajnirana predloška:

• Smirena bilješka
• Traka s kuponom
• Tamni urednički stil
• Minimalistički plavi

Odaberite dizajn koji najbolje odgovara prostoru i tonu web-mjesta na kojem će se obrazac prikazivati. Svaki početni dizajn nakon odabira možete u potpunosti izmijeniti.

Dizajniranje ugrađenog obrasca

Upotrijebite „Layout” i „Content” za raspoređivanje obrasca. Ugrađeni obrazac može sadržavati obrazac za prijavu zajedno s pratećim tekstom, slikama, popisima, gumbima, poveznicama na društvene mreže, brojačem pretplatnika, razmacima ili razdjelnicima.

Za usku bočnu traku ili podnožje dizajn s jednim stupcem obično je najlakši za čitanje. U širem odjeljku stranice raspored s dva stupca može postaviti kratko objašnjenje ili sliku uz polja.

Odaberite blok obrasca za prijavu da biste odabrali polja pretplatnika, obavezna polja, oznake, skrivene oznake, indikator napretka i neobavezni brojač pretplatnika. Zatim možete zasebno oblikovati spremnik obrasca, polja i gumb za slanje.

Otvorite „Page settings” da biste promijenili pozadinu i zadane postavke cjelokupnog dizajna platna ugrađenog obrasca. Uzmite u obzir okolno web-mjesto. Prozirna ili jednostavna pozadina često se prirodnije uklapa, dok kontrastna pozadina pomaže da se ponuda za prijavu istakne.

Potpune upute za rasporede, sadržaj, slojeve, polja, oznake, tipografiju i izgled nalaze se u vodiču Upotreba uređivača obrazaca za prijavu.

Povezivanje tijeka prijave

Upotrijebite kontrolu tijeka prijave u zaglavlju uređivača da biste pregledali što se događa nakon slanja, koja se poruka e-pošte za dvostruku potvrdu šalje i što posjetitelj vidi nakon potvrde.

Možete odabrati postojeći tijek, urediti dodijeljeni tijek ili izraditi novi. Ako odabrani tijek dijele drugi obrasci, imajte na umu da njegovo uređivanje može utjecati i na te obrasce.

Pregled i spremanje

Kliknite „Preview” da biste pregledali cijeli obrazac prije nego što ga postavite na svoje web-mjesto. Provjerite redoslijed polja, oznake, prostor za pogreške, tekst gumba i količinu pratećeg sadržaja.

Kliknite „Save changes” da biste spremili trenutačnu verziju. Kada budete spremni ugraditi obrazac, vratite se na pregled obrazaca za prijavu.

Aktivacija obrasca

Ugrađeni obrazac mora biti aktivan prije nego što se njegov javni kôd može upotrijebiti.

Ako obrazac nije aktivan, otvorite izbornik radnji s tri točke u pregledu obrazaca za prijavu i odaberite „Activate”. Aktivni obrazac prikazuje radnju „Show Code Snippet”.

Deaktivirajte obrazac kada više ne treba biti dostupan na vašem web-mjestu. Deaktivacijom se obrazac uklanja iz upotrebe bez brisanja njegova dizajna ili prethodnih podataka izvješća.

Kopiranje JavaScript kôda

Kliknite „Show Code Snippet” i otvorite karticu „JavaScript”. Maildroppa pruža kratku skriptu koja sadržava jedinstveni ID obrasca.

Kôd slijedi ovu strukturu:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Kopirajte cijeli kôd bez izmjene adrese skripte ili ID-ja obrasca.

Opcija JavaScript učitava trenutačno spremljeni obrazac putem Maildroppa runtimea za obrasce. Kada kasnije uredite i spremite isti obrazac u Maildroppi, postojeći isječak i dalje upućuje na taj ID obrasca. Ne morate izraditi novi obrazac samo da biste promijenili njegov tekst ili dizajn.

Dodavanje obrasca na vaše web-mjesto

Zalijepite skriptu na mjesto stranice na kojem se treba prikazati ugrađeni obrazac.

Točni koraci ovise o sustavu vašeg web-mjesta. U alatu za izradu stranica ili sustavu za upravljanje sadržajem upotrijebite blok koji prihvaća prilagođeni HTML ili kôd skripte. Na prilagođenom web-mjestu dodajte skriptu u odgovarajući predložak ili oznake stranice.

Neki uređivači web-mjesta uklanjaju oznake skripti iz sigurnosnih razloga. Ako se obrazac ne prikaže nakon objave stranice, najprije provjerite je li uređivač sačuvao cijelu Maildroppa skriptu. Možda ćete trebati upotrijebiti posebno područje sustava za prilagođeni kôd ili se obratiti osobi koja upravlja web-mjestom.

Nemojte lijepiti isti isječak ugrađenog obrasca više puta na jednu stranicu, osim ako namjerno želite isti obrazac na više mjesta i testirali ste takvu postavku.

Upotreba kartice HTML

Kartica „HTML” pruža generirane oznake obrasca. Ova je opcija namijenjena prilagođenim implementacijama u kojima želite izravno raditi s prikazanim HTML-om.

Ako odaberete ovu metodu, kopirajte cijele oznake. Budući da na prilagođenu HTML integraciju mogu utjecati stilovi i implementacija vašeg web-mjesta, pažljivo testirajte njezina polja, provjeru valjanosti, slanje i tijek potvrde.

Za uobičajeni obrazac kojim upravlja Maildroppa JavaScript isječak kraća je integracija i učitava trenutačnu javnu konfiguraciju obrasca prema njegovu ID-ju.

Testiranje ugrađenog obrasca

Objavite stranicu web-mjesta koja sadržava kôd ili otvorite njezin pregled. Zatim testirajte obrazac kao posjetitelj:

1. Provjerite prikazuje li se obrazac na ispravnom mjestu.
2. Pregledajte stranicu na širokom i uskom zaslonu.
3. Ispunite svako obavezno polje.
4. Pošaljite obrazac i pregledajte odgovor.
5. Otvorite poruku e-pošte za dvostruku potvrdu.
6. Potvrdite adresu i pregledajte završni odgovor.
7. Provjerite prikazuju li se pretplatnik i sve skrivene oznake ispravno u Maildroppi.

Ako je obrazac širi od spremnika web-mjesta, prilagodite širinu obrasca, raspored stupaca, unutarnje razmake ili postavke slaganja na mobilnim uređajima u uređivaču. Probleme s rasporedom nemojte rješavati izmjenom generiranog Maildroppa kôda.

Ažuriranje ugrađenog obrasca

Otvorite isti obrazac u Maildroppi, unesite izmjene, pregledajte ih i kliknite „Save changes”. JavaScript isječak na vašem web-mjestu nastavlja upotrebljavati isti ID obrasca i učitava spremljenu javnu konfiguraciju.

Ako obrazac treba privremeno ukloniti, deaktivirajte ga u pregledu obrazaca za prijavu. Ako vam više nije potreban, uklonite isječak i s web-mjesta kako stranica ne bi sadržavala neiskorišteni kôd.