Formulare, butoane și widgeturi

Modulul 4: Pagini, aspect și funcții · Timp de citire: 8 minute

Obiectivul lecției: După această lecție puteți configura formularul de contact (destinatar, confirmare, pagină de mulțumire, protecție anti-spam, newsletter și metodă de trimitere), puteți adăuga butoane flotante pentru WhatsApp și contact, puteți include un widget al unui alt serviciu și știți când se potrivesc Cod personalizat și HTML personalizat.

Concepte cheie: formular de contact, destinatar, e-mail de confirmare, pagină de mulțumire, captcha, dublă abonare, metodă de trimitere, buton flotant, widget, cod de încorporare, consimțământ, Cod personalizat, HTML personalizat

Formularul de contact: două locuri

Un formular de pe site-ul dumneavoastră are două părți. Formularul propriu-zis, cu câmpurile pe care le completează un vizitator, se află pe o pagină. Îl adăugați cu secțiunea Contact (prin Blocuri sau Adăugați o secțiune) sau prin chat. Ce se întâmplă când cineva apasă pe trimitere setați în Setări > Formulare. Acest panou îl configurați întotdeauna dumneavoastră; chatul nu face acest lucru.

Formularul are întotdeauna câmpurile nume, e-mail și mesaj. Prin chat puteți adăuga câmpuri suplimentare, cel mult opt: un câmp de text, o listă de opțiuni (de exemplu „În interior sau în exterior?”), e-mail, telefon, un câmp de text lung, o dată sau un număr. Un câmp pentru a trimite un fișier sau o fotografie nu există. Dacă Schildersbedrijf Example vrea să primească fotografii ale lucrării, scrie în textul de mulțumire: „Ne puteți trimite fotografii la adresa noastră de e-mail.”

Important: pe site-ul gratuit fără pachet, formularul este vizibil, dar dezactivat (gri), și nu trimite e-mailuri. Formularele trimit cu adevărat mesaje abia când site-ul dumneavoastră este într-un pachet AI Builder. Puteți totuși să pregătiți deja setările de mai jos; ele vor fi folosite imediat.

Setări > Formulare

Panoul are cinci blocuri.

Primirea mesajelor. La Trimiteți mesajele la completați adresa de e-mail la care ajung formularele completate. Dacă lăsați câmpul gol, mesajele ajung la adresa de e-mail a contului dumneavoastră WebOké. Completați-l în mod conștient. La Subiectul e-mailului alegeți subiectul (gol: „Mesaj nou prin site-ul dumneavoastră”). La După trimitere alegeți Afișați un mesaj de mulțumire cu propriul text sau Redirecționați către o pagină: o pagină de mulțumire pe care o creați dumneavoastră și pe care nu o includeți în meniu (lecția 4.1). Astfel puteți măsura mai târziu de câte ori este trimis formularul.

Trimitere prin. Modul în care este trimis e-mailul. Serverul WebOké funcționează imediat, cu expeditorul noreply@weboke.site. Propria adresă de e-mail (SMTP) este recomandată: e-mailul vine atunci de pe propriul domeniu și ajunge mai rar în spam. Cu Configurați-l pentru mine, constructorul creează această adresă pe domeniul dumneavoastră. La propria adresă de e-mail puteți alege și un serviciu de e-mail, precum Postmark, Brevo, Mailgun sau SendGrid. De ce contează atât de mult expeditorul aflați în lecția 5.3.

Confirmare pentru vizitator. Activați Trimiteți vizitatorului o copie și vizitatorul primește un e-mail de confirmare. Acesta este adesea primul mesaj pe care cineva îl primește de la dumneavoastră. Alegeți subiectul, Textul dumneavoastră (cu {naam} pentru numele vizitatorului), Semnătură și dacă mesajul completat este inclus. Constructorul așază textul în designul site-ului dumneavoastră, cu logoul. Cu Lăsați AI-ul să scrie acest text primiți o propunere.

Opriți spamul. Fiecare formular are întotdeauna o verificare invizibilă: un câmp ascuns și o limită de timp. Aceasta oprește cea mai mare parte a spamului fără ca vizitatorii să observe ceva. Dacă totuși primiți mult spam, alegeți o verificare suplimentară, un captcha: Cloudflare Turnstile sau hCaptcha. Pentru aceasta creați un cont gratuit la serviciul respectiv și completați Site key și Secret key. Activați un captcha doar când este nevoie: fiecare pas în plus vă costă vizitatori.

Newsletter. Puteți adăuga în formular o casetă de bifat prin care vizitatorii se abonează la Mailchimp, Laposta, Brevo sau MailerLite. Este adăugat doar cine bifează singur caseta. Întotdeauna cu dublă abonare: vizitatorul confirmă mai întâi printr-un e-mail. La Laposta și MailerLite activați acest lucru dumneavoastră în serviciul respectiv; constructorul vă spune unde. Fără dublă abonare, oricine poate adăuga adrese străine pe lista dumneavoastră.

În plus: un vizitator poate trimite cel mult 5 mesaje pe oră. Dacă aveți o politică de confidențialitate, sub formular apare un link către aceasta. Un formular colectează date cu caracter personal; ce trebuie să reglementați pentru aceasta găsiți în lecția 7.1.

Capcană: testați singur formularul după fiecare modificare, de pe o altă adresă decât adresa de primire. Verificați și dosarul de spam și dacă confirmarea ajunge la „vizitator”.

Butoane flotante

În Setări > Butoane adăugați butoane care rămân vizibile jos pe fiecare pagină, în dreapta sau în stânga (Colț: Dreapta jos sau Stânga jos).

• Număr WhatsApp: în format internațional, cu prefixul țării (de exemplu +40 pentru un număr din România) și fără 0 din față. Dacă lăsați câmpul gol, nu există buton WhatsApp. Puteți adăuga un Mesaj precompletat, de exemplu „Aș dori o ofertă pentru lucrări de vopsitorie.” Butonul deschide o conversație cu numărul dumneavoastră.
• Buton de contact flotant: deschide formularul de contact într-o fereastră. Mesajul ajunge la aceeași adresă ca formularul dumneavoastră. Alegeți Textul butonului.

În previzualizare, butoanele apar puțin mai sus decât pe site-ul real, ca să nu fie acoperite de butonul de ajutor al constructorului.

Atenție: un buton WhatsApp promite un răspuns rapid. Dacă citiți WhatsApp doar seara, alegeți mai bine butonul de contact.

Widgeturi ale altor servicii

Un widget este o bucată dintr-un alt serviciu pe pagina dumneavoastră: un videoclip YouTube, o hartă Google Maps, un planificator de programări Calendly, contul dumneavoastră de Instagram, un playlist Spotify. Pentru multe servicii este suficient linkul; constructorul creează singur playerul sau formularul. Exemple: YouTube, Vimeo, Spotify, Calendly, Google Maps (este suficientă adresa), Google Calendar, Instagram și TikTok (este suficient @numele dumneavoastră) și Google Forms. Pentru alte servicii, precum Salonized, Trustpilot sau Bandcamp, lipiți codul de încorporare: bucata de cod pe care o primiți de la acel serviciu pentru a o pune pe un site web.

Iată cum procedați: spuneți-o în chat împreună cu linkul („adăugați harta noastră de acces sub blocul de contact, adresa Strada Principală 1”), lipiți codul în chat sau alegeți în Blocuri secțiunea Widget. Constructorul recunoaște serviciul, propune înălțimea și titlul și vă avertizează dacă ceva nu va funcționa. Dacă lăsați AI-ul să îl adauge, aceasta este o instrucțiune și costă editări; vedeți dinainte cât. Un widget adăugat îl modificați cu Editați codul pe blocul din previzualizare.

Trei lucruri de știut:

1. Un widget se încarcă doar după consimțământ. Serviciile terților plasează adesea cookie-uri sau urmăresc vizitatorii. Cu bannerul de cookie-uri activ, un widget se încarcă doar după ce vizitatorul își dă consimțământul pentru acel tip de cookie-uri. Serviciul apare automat în bannerul de cookie-uri la „Ce rulează acum pe site”. Verificați apoi și politica de confidențialitate (lecțiile 7.1 și 7.2).
2. Google Calendar trebuie să fie public. Un calendar privat nu îl poate vedea nimeni altcineva. Faceți public în Google Calendar doar un calendar separat cu ceea ce pot vedea vizitatorii, niciodată calendarul personal.
3. Codul nesigur nu ajunge pe site. Codul care poate transmite date ale vizitatorilor, ascunde ce face sau încarcă ceva de pe un site necunoscut nu este pus de AI pe site-ul dumneavoastră. AI-ul explică de ce.

Cod personalizat și HTML personalizat, pe scurt

Pentru utilizatorii avansați există două locuri.

Cod personalizat se află jos în Setări > Integrări: cod care trebuie să apară pe fiecare pagină, În head-ul fiecărei pagini sau În partea de jos a fiecărei pagini. De exemplu, scriptul de încărcare al unui serviciu de chat sau al unui widget de recenzii. Acest cod nu este verificat de constructor („Acest cod nu îl verificăm”). Serviciile cunoscute sunt blocate de bannerul de cookie-uri până la acordarea consimțământului. Bifați Acest cod este necesar doar pentru codul care nu urmărește vizitatori, deoarece atunci se încarcă imediat. În previzualizarea din constructor, codul personalizat nu este executat, pe site-ul real da. Pe site-ul gratuit, codul personalizat nu funcționează. Pentru un ID de măsurare precum Google Analytics nu folosiți Cod personalizat, ci câmpul dedicat din Integrări (lecția 7.2).

HTML personalizat este o secțiune din Blocuri. Lipiți propriul HTML și eventual CSS și îl modificați ulterior cu Editați HTML-ul. Culorile și fonturile urmează identitatea vizuală. Scripturile, iframe-urile și formularele nu funcționează aici; pentru acestea folosiți un widget.

Folosiți-le pe amândouă doar când nu există altă soluție: codul altcuiva este un risc pentru viteză, securitate și confidențialitate.

În constructor: iată cum procedați

1. Adăugați secțiunea Contact cu formular pe pagina de contact.
2. Deschideți Setări > Formulare. Completați Trimiteți mesajele la.
3. La Trimitere prin alegeți propria adresă de e-mail sau lăsați serverul WebOké până când domeniul este gata (lecția 5.3).
4. Activați Trimiteți vizitatorului o copie și scrieți propriul text.
5. La După trimitere alegeți un mesaj de mulțumire sau o pagină de mulțumire.
6. Dacă este nevoie, adăugați în Setări > Butoane un buton WhatsApp sau de contact.
7. Publicați site-ul și trimiteți un mesaj de test.

Rezumat

• Formularul se află pe o pagină; ce se întâmplă cu el reglementați în Setări > Formulare.
• Completați Trimiteți mesajele la în mod conștient; alegeți de preferință propria adresă de e-mail ca expeditor.
• Pe site-ul gratuit, formularul nu trimite e-mailuri; atașarea unui fișier nu este niciodată posibilă.
• Butoanele flotante pentru WhatsApp și contact se află în Setări > Butoane.
• Widgeturile se încarcă doar după consimțământ; Cod personalizat și HTML personalizat sunt pentru utilizatorii avansați.

Test

Exercițiu

Exercițiul D4.3: Formularul dumneavoastră de contact și un widget. Configurați complet formularul și adăugați un widget care aduce cu adevărat ceva în plus.

Listă de verificare:

• [ ] secțiunea Contact cu formular pe pagina de contact;
• [ ] Trimiteți mesajele la completat cu o adresă pe care o citiți zilnic;
• [ ] metoda de trimitere aleasă și înțeles de ce;
• [ ] confirmare pentru vizitator cu propriul text;
• [ ] mesaj de mulțumire sau pagină de mulțumire configurată;
• [ ] un widget adăugat (de exemplu o hartă sau un planificator de programări) și verificat că apare în bannerul de cookie-uri;
• [ ] site publicat și un mesaj de test trimis (doar cu un pachet; pe site-ul gratuit verificați setările).

Întrebări:

1. La ce adresă ajung mesajele din formular și prin ce metodă de trimitere?
2. Ce widget ați ales, ce aduce în plus pentru vizitator și ce vede un vizitator care nu își dă consimțământul?
3. A ajuns mesajul de test și a ajuns confirmarea la „vizitator” sau în spam?

După „gata” vedeți un exemplu de răspuns: Schildersbedrijf Example trimite mesajele la info@example.com prin propria adresă de e-mail de pe domeniu; widgetul este o hartă Google Maps cu adresa, care se încarcă doar după consimțământ și altfel afișează o zonă cu un buton pentru acordarea consimțământului; mesajul de test a ajuns, confirmarea la fel, nu în spam.

Resurse suplimentare

• Un formular de contact pe site-ul dumneavoastră: trimiterea câmpurilor prin e-mail și prevenirea spamului
• Curs gratuit E-mailul la punct: configurare și livrare corectă 7.3: E-mail de pe site-ul dumneavoastră și formulare
• Curs gratuit E-mailul la punct: configurare și livrare corectă 7.2: Consimțământ, dezabonare și o listă curată
• Utilizarea funcției Click to Chat (Centrul de ajutor WhatsApp): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Ajutor Google Calendar, în limba engleză): https://support.google.com/calendar/answer/37083