Obrasci, gumbi i widgeti

Modul 4: Stranice, izgled i funkcije · Vrijeme čitanja: 8 minuta

Cilj učenja: Nakon ove lekcije moći ćete postaviti kontaktni obrazac (primatelj, potvrda, stranica zahvale, zaštita od neželjene pošte, newsletter i način slanja), postaviti plutajuće gumbe za WhatsApp i kontakt te ugraditi widget druge usluge. Znat ćete i kada su prikladni Vlastiti kod i Vlastiti HTML.

Ključni pojmovi: kontaktni obrazac, primatelj, e-mail potvrde, stranica zahvale, captcha, dvostruka prijava, način slanja, plutajući gumb, widget, kod za ugradnju, privola, Vlastiti kod, Vlastiti HTML

Kontaktni obrazac: dva mjesta

Obrazac na Vašoj stranici sastoji se od dva dijela. Sam obrazac, s poljima koja posjetitelj ispunjava, nalazi se na stranici. Postavljate ga odjeljkom Kontakt (putem Odjeljci ili Dodajte odjeljak) ili putem chata. Što se događa kada netko klikne na slanje, postavljate u Postavke > Obrasci. Tu ploču uvijek postavljate sami; chat to ne radi.

Obrazac uvijek ima polja ime, e-mail i poruka. Putem chata možete dodati dodatna polja, najviše osam: tekstno polje, padajući popis (primjerice "Unutra ili vani?"), e-mail, telefon, dugo tekstno polje, datum ili broj. Polje za slanje datoteke ili fotografije ne postoji. Ako Schildersbedrijf Example želi primati fotografije posla, u tekst zahvale upisuje: "Slobodno nam pošaljite fotografije na našu e-mail adresu."

Važno: na besplatnoj stranici bez paketa obrazac je vidljiv, ali zasivljen i ne šalje e-poštu. Obrasci zaista šalju poruke tek kada je Vaša stranica u paketu AI Builder. Postavke u nastavku ipak možete pripremiti unaprijed; tada se odmah koriste.

Postavke > Obrasci

Ploča ima pet blokova.

Primanje poruka. U Šaljite poruke na upisujete e-mail adresu na koju stižu ispunjeni obrasci. Ako polje ostavite prazno, poruke idu na e-mail adresu Vašeg računa kod WebOké. Upišite je svjesno. U Predmet e-maila odabirete predmet (prazno: "Nova poruka putem Vaše web stranice"). U Nakon slanja odabirete Prikažite zahvalu s vlastitim tekstom ili Preusmjerite na stranicu: stranicu zahvale koju sami izradite i ne stavite u izbornik (lekcija 4.1). Tako kasnije možete mjeriti koliko se često obrazac šalje.

Slanje putem. Način na koji se e-pošta šalje. Server WebOké radi odmah, a pošiljatelj je noreply@weboke.site. Preporučuje se Vaša vlastita e-mail adresa (SMTP): poruka tada dolazi s Vaše domene i rjeđe završava u neželjenoj pošti. S Postavite to umjesto mene graditelj izrađuje tu adresu na Vašoj domeni. Pod vlastitom e-mail adresom možete odabrati i uslugu slanja e-pošte, kao što su Postmark, Brevo, Mailgun ili SendGrid. Zašto je pošiljatelj toliko važan, pročitajte u lekciji 5.3.

Potvrda posjetitelju. Uključite Pošaljite posjetitelju kopiju i posjetitelj će dobiti e-mail potvrde. To je često prva poruka koju netko od Vas primi. Odabirete predmet, Vaš tekst (s {naam} za ime posjetitelja), Potpis i hoće li se priložiti ispunjena poruka. Graditelj Vaš tekst oblikuje u stilu Vaše stranice, s Vašim logotipom. S Neka AI napiše ovaj tekst dobivate prijedlog.

Zaustavljanje neželjene pošte. Svaki obrazac uvijek ima nevidljivu provjeru: skriveno polje i vremensko ograničenje. Ona zaustavlja većinu neželjene pošte, a da posjetitelji to ni ne primijete. Ako ipak primate mnogo neželjene pošte, odaberite dodatnu provjeru, captchu: Cloudflare Turnstile ili hCaptcha. Za to izradite besplatan račun kod te usluge i upišete Site key i Secret key. Captchu uključite tek kada je potrebna: svaki dodatni korak odbija dio posjetitelja.

Newsletter. U obrazac možete dodati kvačicu kojom se posjetitelji prijavljuju na Mailchimp, Laposta, Brevo ili MailerLite. Dodaje se samo onaj tko sam označi kvačicu. Uvijek s dvostrukom prijavom: posjetitelj najprije potvrđuje putem e-maila. Kod usluga Laposta i MailerLite to sami uključujete u toj usluzi; graditelj Vam kaže gdje. Bez dvostruke prijave svatko može na Vaš popis dodati tuđe adrese.

Nadalje: posjetitelj može poslati najviše 5 poruka na sat. Ako imate izjavu o privatnosti, ispod obrasca nalazi se poveznica na nju. Obrazac prikuplja osobne podatke; što za to morate urediti, opisano je u lekciji 7.1.

Zamka: nakon svake promjene sami testirajte obrazac, s adrese različite od adrese primatelja. Pogledajte i mapu neželjene pošte te provjerite stiže li potvrda "posjetitelju".

Plutajući gumbi

U Postavke > Gumbi postavljate gumbe koji na svakoj stranici ostaju dolje na zaslonu, desno ili lijevo (Kut: Dolje desno ili Dolje lijevo).

• Broj za WhatsApp: u međunarodnom obliku, s pozivnim brojem zemlje (npr. +385 za hrvatski broj) i bez nule ispred. Ako ga ostavite praznim, nema gumba za WhatsApp. Može se dodati i Unaprijed ispunjena poruka, primjerice "Želio bih ponudu za ličilačke radove." Gumb otvara razgovor s Vašim brojem.
• Plutajući gumb za kontakt: otvara Vaš kontaktni obrazac u prozoru. Poruka stiže na istu adresu kao i Vaš obrazac. Odabirete Tekst na gumbu.

U pregledu su gumbi malo više nego na Vašoj pravoj stranici, kako ne bi bili skriveni iza gumba za pomoć graditelja.

Pažnja: gumb za WhatsApp obećava brz odgovor. Ako WhatsApp čitate samo navečer, radije odaberite gumb za kontakt.

Widgeti drugih usluga

Widget je dio druge usluge na Vašoj stranici: YouTube videozapis, Google Maps karta, planer termina iz Calendlyja, Vaš Instagram, Spotify playlista. Kod mnogih usluga dovoljna je poveznica; graditelj sam izrađuje player ili obrazac. Primjeri: YouTube, Vimeo, Spotify, Calendly, Google Maps (dovoljna je adresa), Google Kalendar, Instagram i TikTok (dovoljno je Vaše @ime) te Google Obrasci. Kod drugih usluga, kao što su Salonized, Trustpilot ili Bandcamp, zalijepite kod za ugradnju: dio koda koji dobivate od te usluge za postavljanje na web stranicu.

Evo kako: recite to u chatu i dodajte poveznicu ("stavite našu kartu s uputama ispod bloka za kontakt, adresa Glavna ulica 1"), zalijepite kod u chat ili u Odjeljci odaberite odjeljak Widget. Graditelj prepoznaje uslugu, predlaže visinu i naslov te upozorava ako nešto neće raditi. Ako widget postavi AI, to je nalog i troši izmjene; unaprijed vidite koliko. Postavljeni widget prilagođavate s Uredite kod na bloku u pregledu.

Tri stvari koje treba znati:

1. Widget se učitava tek nakon privole. Usluge trećih strana često postavljaju kolačiće ili prate posjetitelje. Kada je uključen banner za kolačiće, widget se učitava tek kada posjetitelj da privolu za tu vrstu kolačića. Usluga se automatski pojavljuje u Vašem banneru za kolačiće pod "Što se sada izvršava na Vašoj stranici". Nakon toga provjerite i svoju izjavu o privatnosti (lekcije 7.1 i 7.2).
2. Google Kalendar mora biti javan. Privatni kalendar nitko drugi ne može vidjeti. U Google Kalendaru učinite javnim samo zaseban kalendar s onim što posjetitelji smiju vidjeti, nikada svoj osobni kalendar.
3. Nesiguran kod ne dolazi na stranicu. Kod koji može prosljeđivati podatke posjetitelja, skriva što radi ili učitava nešto s nepoznate web stranice AI ne postavlja na Vašu stranicu. Objašnjava zašto.

Vlastiti kod i Vlastiti HTML, ukratko

Za napredne korisnike postoje dva mjesta.

Vlastiti kod nalazi se na dnu u Postavke > Povezivanja: kod koji mora biti na svakoj stranici, U head svake stranice ili Na dnu svake stranice. Primjerice skripta za učitavanje chat usluge ili widgeta za recenzije. Taj kod graditelj ne provjerava ("Ovaj kod ne provjeravamo"). Poznate usluge banner za kolačiće blokira dok se ne dobije privola. Označite Ovaj kod je nužan samo za kod koji ne prati posjetitelje, jer se tada učitava odmah. U pregledu u graditelju vlastiti kod se ne izvršava, a na Vašoj pravoj stranici da. Na besplatnoj stranici vlastiti kod ne radi. Za mjerni ID kao što je Google Analytics ne koristite Vlastiti kod, nego predviđeno polje u Povezivanja (lekcija 7.2).

Vlastiti HTML je odjeljak u Odjeljci. Zalijepite vlastiti HTML i po potrebi CSS te ga kasnije prilagođavate s Uredite HTML. Boje i fontovi prate Vaš vizualni identitet. Skripte, iframeovi i obrasci ovdje ne rade; za to koristite widget.

Oboje koristite samo ako drugačije ne ide: tuđi kod predstavlja rizik za brzinu, sigurnost i privatnost.

U graditelju: kako to učiniti

1. Postavite odjeljak Kontakt s obrascem na svoju stranicu za kontakt.
2. Otvorite Postavke > Obrasci. Ispunite Šaljite poruke na.
3. U Slanje putem odaberite svoju vlastitu e-mail adresu ili ostavite server WebOké dok Vaša domena ne bude spremna (lekcija 5.3).
4. Uključite Pošaljite posjetitelju kopiju i napišite vlastiti tekst.
5. U Nakon slanja odaberite zahvalu ili stranicu zahvale.
6. Po potrebi u Postavke > Gumbi postavite gumb za WhatsApp ili kontakt.
7. Objavite stranicu i pošaljite probnu poruku.

Sažetak

• Obrazac se nalazi na stranici; što se s njim događa, uređujete u Postavke > Obrasci.
• Svjesno ispunite Šaljite poruke na; kao pošiljatelja po mogućnosti odaberite vlastitu e-mail adresu.
• Na besplatnoj stranici obrazac ne šalje e-poštu; slanje datoteke nikada nije moguće.
• Plutajući gumbi za WhatsApp i kontakt nalaze se u Postavke > Gumbi.
• Widgeti se učitavaju tek nakon privole; Vlastiti kod i Vlastiti HTML namijenjeni su naprednim korisnicima.

Kviz

Zadatak

Zadatak D4.3: Vaš kontaktni obrazac i widget. Potpuno postavite svoj obrazac i postavite jedan widget koji zaista nešto dodaje.

Kontrolni popis:

• [ ] odjeljak Kontakt s obrascem na Vašoj stranici za kontakt;
• [ ] Šaljite poruke na ispunjeno adresom koju svakodnevno čitate;
• [ ] odabran način slanja i shvaćeno zašto;
• [ ] potvrda posjetitelju s Vašim vlastitim tekstom;
• [ ] postavljena zahvala ili stranica zahvale;
• [ ] postavljen jedan widget (primjerice karta ili planer termina) i provjereno da se nalazi u banneru za kolačiće;
• [ ] stranica objavljena i poslana probna poruka (samo s paketom; na besplatnoj stranici provjeravate postavke).

Pitanja:

1. Na koju adresu stižu poruke iz Vašeg obrasca i putem kojeg načina slanja?
2. Koji ste widget odabrali, što on dodaje Vašem posjetitelju i što vidi posjetitelj koji ne da privolu?
3. Je li Vaša probna poruka stigla i je li potvrda stigla "posjetitelju" ili u neželjenu poštu?

Nakon "gotovo" vidjet ćete primjer odgovora: Schildersbedrijf Example šalje poruke na info@example.com putem vlastite e-mail adrese na domeni; widget je Google Maps karta s adresom, koja se učitava tek nakon privole, a inače prikazuje površinu s gumbom za davanje privole; probna poruka je stigla, potvrda također, i to ne u neželjenu poštu.

Dodatno štivo

• Kontaktni obrazac na Vašoj web stranici: slanje polja e-poštom i sprječavanje spama
• Besplatni tečaj E-pošta u redu: postavljanje i uredno primanje poruka 7.3: Pošta s Vaše web stranice i obrazaca
• Besplatni tečaj E-pošta u redu: postavljanje i uredno primanje poruka 7.2: Privola, odjava i uredan popis adresa
• Korištenje značajke Klikni i razgovaraj (WhatsApp centar za pomoć): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (pomoć za Google Kalendar, na engleskom): https://support.google.com/calendar/answer/37083