Φόρμες, κουμπιά και widgets

Ενότητα 4: Σελίδες, εμφάνιση και λειτουργίες · Χρόνος ανάγνωσης: 8 λεπτά

Στόχος μαθήματος: Μετά από αυτό το μάθημα μπορείτε να ρυθμίσετε τη φόρμα επικοινωνίας (παραλήπτη, επιβεβαίωση, σελίδα ευχαριστίας, έλεγχο spam, newsletter και μέθοδο αποστολής), να τοποθετήσετε αιωρούμενα κουμπιά για WhatsApp και επικοινωνία, να ενσωματώσετε ένα widget από άλλη υπηρεσία και γνωρίζετε πότε ταιριάζουν ο Προσαρμοσμένος κώδικας και το Δικό σας HTML.

Βασικές έννοιες: φόρμα επικοινωνίας, παραλήπτης, email επιβεβαίωσης, σελίδα ευχαριστίας, captcha, διπλή εγγραφή (double opt-in), μέθοδος αποστολής, αιωρούμενο κουμπί, widget, κώδικας ενσωμάτωσης, συγκατάθεση, Προσαρμοσμένος κώδικας, Δικό σας HTML

Η φόρμα επικοινωνίας: δύο σημεία

Μια φόρμα στο site σας αποτελείται από δύο μέρη. Η ίδια η φόρμα, με τα πεδία που συμπληρώνει ο επισκέπτης, βρίσκεται σε μια σελίδα. Την τοποθετείτε με την ενότητα Επικοινωνία (μέσω Μπλοκ ή Προσθήκη ενότητας) ή μέσω της συνομιλίας (chat). Τι συμβαίνει όταν κάποιος πατήσει αποστολή το ρυθμίζετε στις Ρυθμίσεις > Φόρμες. Αυτό το πάνελ το ρυθμίζετε πάντα μόνοι σας· η συνομιλία δεν το κάνει.

Η φόρμα έχει πάντα τα πεδία όνομα, email και μήνυμα. Μέσω της συνομιλίας προσθέτετε επιπλέον πεδία, έως οκτώ: ένα πεδίο κειμένου, μια λίστα επιλογών (για παράδειγμα "Εσωτερικά ή εξωτερικά;"), email, τηλέφωνο, ένα μεγάλο πεδίο κειμένου, μια ημερομηνία ή έναν αριθμό. Πεδίο για αποστολή αρχείου ή φωτογραφίας δεν υπάρχει. Αν η Schildersbedrijf Example θέλει να λαμβάνει φωτογραφίες της δουλειάς, γράφει στο κείμενο ευχαριστίας: "Μπορείτε να στείλετε φωτογραφίες στη διεύθυνση email μας."

Σημαντικό: στο δωρεάν site χωρίς πακέτο η φόρμα είναι ορατή αλλά απενεργοποιημένη (γκρι) και δεν στέλνει email. Οι φόρμες στέλνουν πραγματικά μόνο όταν το site σας ανήκει σε πακέτο AI Builder. Μπορείτε όμως να προετοιμάσετε ήδη τις παρακάτω ρυθμίσεις· τότε χρησιμοποιούνται αμέσως.

Ρυθμίσεις > Φόρμες

Το πάνελ έχει πέντε τμήματα.

Λήψη μηνυμάτων. Στο Αποστολή μηνυμάτων σε συμπληρώνετε τη διεύθυνση email όπου πηγαίνουν οι συμπληρωμένες φόρμες. Αν το αφήσετε κενό, πηγαίνουν στη διεύθυνση email του λογαριασμού σας στη WebOké. Συμπληρώστε το συνειδητά. Στο Θέμα του email επιλέγετε το θέμα (κενό: "Νέο μήνυμα μέσω του ιστότοπού σας"). Στο Μετά την αποστολή επιλέγετε Εμφάνιση ευχαριστίας με δικό σας κείμενο ή Ανακατεύθυνση σε σελίδα: μια σελίδα ευχαριστίας που φτιάχνετε μόνοι σας και δεν τη βάζετε στο μενού (μάθημα 4.1). Έτσι μπορείτε αργότερα να μετράτε πόσο συχνά αποστέλλεται η φόρμα.

Αποστολή μέσω. Πώς αποστέλλεται το email. Ο Server της WebOké λειτουργεί αμέσως, με αποστολέα noreply@weboke.site. Συνιστάται η Η δική σας διεύθυνση email (SMTP): τότε το email έρχεται από το δικό σας domain και καταλήγει πιο σπάνια στα spam. Με το Ρυθμίστε το για μένα ο builder δημιουργεί αυτή τη διεύθυνση στο domain σας. Στη δική σας διεύθυνση email μπορείτε επίσης να επιλέξετε μια υπηρεσία αποστολής email, όπως Postmark, Brevo, Mailgun ή SendGrid. Γιατί ο αποστολέας έχει τόση σημασία θα το διαβάσετε στο μάθημα 5.3.

Επιβεβαίωση στον επισκέπτη. Ενεργοποιήστε το Αποστολή αντιγράφου στον επισκέπτη και ο επισκέπτης λαμβάνει ένα email επιβεβαίωσης. Συχνά είναι το πρώτο μήνυμα που λαμβάνει κάποιος από εσάς. Επιλέγετε το θέμα, το Το κείμενό σας (με {naam} για το όνομα του επισκέπτη), την Υπογραφή και αν θα συμπεριληφθεί το μήνυμα που συμπληρώθηκε. Ο builder βάζει το κείμενό σας στη μορφοποίηση του site σας, με το λογότυπό σας. Με το Αφήστε το AI να γράψει αυτό το κείμενο λαμβάνετε μια πρόταση.

Αποκλεισμός spam. Κάθε φόρμα έχει πάντα έναν αόρατο έλεγχο: ένα κρυφό πεδίο και ένα χρονικό όριο. Αυτός σταματά τα περισσότερα spam χωρίς να το καταλαβαίνουν οι επισκέπτες. Αν παρ' όλα αυτά λαμβάνετε πολλά spam, επιλέξτε έναν επιπλέον έλεγχο, ένα captcha: Cloudflare Turnstile ή hCaptcha. Για αυτό δημιουργείτε έναν δωρεάν λογαριασμό στην υπηρεσία και συμπληρώνετε το Site key και το Secret key. Ενεργοποιήστε captcha μόνο όταν χρειάζεται: κάθε επιπλέον βήμα σάς κοστίζει επισκέπτες.

Newsletter. Μπορείτε να προσθέσετε ένα πλαίσιο επιλογής στη φόρμα, με το οποίο οι επισκέπτες εγγράφονται στο Mailchimp, Laposta, Brevo ή MailerLite. Προστίθεται μόνο όποιος τσεκάρει μόνος του το πλαίσιο. Πάντα με διπλή εγγραφή: ο επισκέπτης επιβεβαιώνει πρώτα μέσω email. Στο Laposta και στο MailerLite την ενεργοποιείτε μόνοι σας στην υπηρεσία· ο builder σάς λέει πού. Χωρίς διπλή εγγραφή, οποιοσδήποτε μπορεί να βάλει ξένες διευθύνσεις στη λίστα σας.

Επίσης: ένας επισκέπτης μπορεί να στείλει έως 5 μηνύματα την ώρα. Αν έχετε πολιτική απορρήτου, κάτω από τη φόρμα εμφανίζεται σύνδεσμος προς αυτήν. Μια φόρμα συλλέγει προσωπικά δεδομένα· τι πρέπει να φροντίσετε για αυτό θα το βρείτε στο μάθημα 7.1.

Παγίδα: δοκιμάστε τη φόρμα μόνοι σας μετά από κάθε αλλαγή, από διαφορετική διεύθυνση από τη διεύθυνση παραλαβής. Κοιτάξτε και στον φάκελο spam και ελέγξτε αν η επιβεβαίωση φτάνει στον "επισκέπτη".

Αιωρούμενα κουμπιά

Στις Ρυθμίσεις > Κουμπιά τοποθετείτε κουμπιά που μένουν ορατά στο κάτω μέρος κάθε σελίδας, δεξιά ή αριστερά (Γωνία: Κάτω δεξιά ή Κάτω αριστερά).

• Αριθμός WhatsApp: σε διεθνή μορφή, για παράδειγμα με +31 για ολλανδικό αριθμό ή +30 για ελληνικό, χωρίς το αρχικό 0. Αν το αφήσετε κενό, δεν εμφανίζεται κουμπί WhatsApp. Επιτρέπεται ένα Προσυμπληρωμένο μήνυμα, για παράδειγμα "Θα ήθελα μια προσφορά για εργασίες βαφής." Το κουμπί ανοίγει συνομιλία με τον αριθμό σας.
• Αιωρούμενο κουμπί επικοινωνίας: ανοίγει τη φόρμα επικοινωνίας σας σε ένα παράθυρο. Το μήνυμα φτάνει στην ίδια διεύθυνση με τη φόρμα σας. Επιλέγετε το Κείμενο κουμπιού.

Στην προεπισκόπηση τα κουμπιά εμφανίζονται λίγο πιο ψηλά από ό,τι στο πραγματικό σας site, ώστε να μην κρύβονται πίσω από το κουμπί βοήθειας του builder.

Προσοχή: ένα κουμπί WhatsApp υπόσχεται γρήγορη απάντηση. Αν διαβάζετε το WhatsApp μόνο το βράδυ, προτιμήστε το κουμπί επικοινωνίας.

Widgets από άλλες υπηρεσίες

Ένα widget είναι ένα κομμάτι μιας άλλης υπηρεσίας μέσα στη σελίδα σας: ένα βίντεο YouTube, ένας χάρτης Google Maps, ένα εργαλείο κρατήσεων ραντεβού του Calendly, το Instagram σας, μια playlist στο Spotify. Για πολλές υπηρεσίες αρκεί ο σύνδεσμος· ο builder φτιάχνει μόνος του τον player ή τη φόρμα. Παραδείγματα: YouTube, Vimeo, Spotify, Calendly, Google Maps (αρκεί η διεύθυνση), Google Calendar, Instagram και TikTok (αρκεί το @όνομά σας) και Google Forms. Για άλλες υπηρεσίες, όπως Salonized, Trustpilot ή Bandcamp, επικολλάτε τον κώδικα ενσωμάτωσης: το κομμάτι κώδικα που σας δίνει η υπηρεσία για να το βάλετε σε έναν ιστότοπο.

Πώς το κάνετε: πείτε το στη συνομιλία μαζί με τον σύνδεσμο ("βάλε τον χάρτη διαδρομής μας κάτω από το μπλοκ επικοινωνίας, διεύθυνση Dorpsstraat 1"), επικολλήστε τον κώδικα στη συνομιλία ή επιλέξτε στα Μπλοκ την ενότητα Widget. Ο builder αναγνωρίζει την υπηρεσία, προτείνει ύψος και επικεφαλίδα και σας προειδοποιεί αν κάτι δεν θα λειτουργήσει. Αν αφήσετε το AI να το τοποθετήσει, αυτό είναι εντολή και κοστίζει επεξεργασίες· βλέπετε εκ των προτέρων πόσες. Ένα τοποθετημένο widget το αλλάζετε με το Επεξεργασία κώδικα στο μπλοκ της προεπισκόπησης.

Τρία πράγματα που πρέπει να γνωρίζετε:

1. Ένα widget φορτώνει μόνο μετά από συγκατάθεση. Οι υπηρεσίες τρίτων συχνά τοποθετούν cookies ή παρακολουθούν τους επισκέπτες. Με ενεργό το banner cookies, ένα widget φορτώνει μόνο όταν ο επισκέπτης δώσει συγκατάθεση για αυτό το είδος cookies. Η υπηρεσία εμφανίζεται αυτόματα στο banner cookies σας στο "Τι εκτελείται τώρα στο site σας". Ελέγξτε μετά και την πολιτική απορρήτου σας (μαθήματα 7.1 και 7.2).
2. Το Google Calendar πρέπει να είναι δημόσιο. Ένα ιδιωτικό ημερολόγιο δεν μπορεί να το δει κανείς άλλος. Στο Google Calendar κάντε δημόσιο μόνο ένα ξεχωριστό ημερολόγιο με ό,τι επιτρέπεται να βλέπουν οι επισκέπτες, ποτέ το προσωπικό σας ημερολόγιο.
3. Μη ασφαλής κώδικας δεν μπαίνει. Κώδικα που μπορεί να προωθεί δεδομένα επισκεπτών, κρύβει τι κάνει ή φορτώνει κάτι από άγνωστο ιστότοπο, το AI δεν τον βάζει στο site σας. Εξηγεί και γιατί.

Προσαρμοσμένος κώδικας και Δικό σας HTML, σε γενικές γραμμές

Για προχωρημένους υπάρχουν δύο σημεία.

Ο Προσαρμοσμένος κώδικας βρίσκεται στο κάτω μέρος των Ρυθμίσεις > Ενσωματώσεις: κώδικας που πρέπει να υπάρχει σε κάθε σελίδα, Στο head κάθε σελίδας ή Στο κάτω μέρος κάθε σελίδας. Για παράδειγμα το script φόρτωσης μιας υπηρεσίας chat ή ενός widget κριτικών. Αυτόν τον κώδικα ο builder δεν τον ελέγχει ("Αυτόν τον κώδικα δεν τον ελέγχουμε"). Γνωστές υπηρεσίες τις συγκρατεί το banner cookies μέχρι να υπάρξει συγκατάθεση. Τσεκάρετε το Αυτός ο κώδικας είναι απαραίτητος μόνο για κώδικα που δεν παρακολουθεί επισκέπτες, γιατί τότε φορτώνει αμέσως. Στην προεπισκόπηση του builder ο προσαρμοσμένος κώδικας δεν εκτελείται, στο πραγματικό σας site όμως ναι. Στο δωρεάν site ο προσαρμοσμένος κώδικας δεν λειτουργεί. Για ένα αναγνωριστικό μέτρησης όπως το Google Analytics δεν χρησιμοποιείτε τον Προσαρμοσμένο κώδικα, αλλά το σταθερό πεδίο στις Ενσωματώσεις (μάθημα 7.2).

Το Δικό σας HTML είναι μια ενότητα στα Μπλοκ. Επικολλάτε δικό σας HTML και προαιρετικά CSS και το αλλάζετε αργότερα με το Επεξεργασία HTML. Τα χρώματα και οι γραμματοσειρές ακολουθούν την εταιρική σας ταυτότητα. Scripts, iframes και φόρμες δεν λειτουργούν εδώ· για αυτά χρησιμοποιείτε ένα widget.

Χρησιμοποιήστε και τα δύο μόνο όταν δεν γίνεται αλλιώς: ο κώδικας τρίτων αποτελεί κίνδυνο για την ταχύτητα, την ασφάλεια και το απόρρητο.

Στον builder: έτσι το κάνετε

1. Τοποθετήστε την ενότητα Επικοινωνία με φόρμα στη σελίδα επικοινωνίας σας.
2. Ανοίξτε τις Ρυθμίσεις > Φόρμες. Συμπληρώστε το Αποστολή μηνυμάτων σε.
3. Στο Αποστολή μέσω επιλέξτε τη δική σας διεύθυνση email ή αφήστε τον server της WebOké μέχρι να είναι έτοιμο το domain σας (μάθημα 5.3).
4. Ενεργοποιήστε το Αποστολή αντιγράφου στον επισκέπτη και γράψτε το δικό σας κείμενο.
5. Στο Μετά την αποστολή επιλέξτε ευχαριστία ή σελίδα ευχαριστίας.
6. Αν χρειάζεται, τοποθετήστε στις Ρυθμίσεις > Κουμπιά ένα κουμπί WhatsApp ή επικοινωνίας.
7. Δημοσιεύστε το site σας και στείλτε ένα δοκιμαστικό μήνυμα.

Σύνοψη

• Η φόρμα βρίσκεται σε μια σελίδα· τι γίνεται με αυτήν το ρυθμίζετε στις Ρυθμίσεις > Φόρμες.
• Συμπληρώστε συνειδητά το Αποστολή μηνυμάτων σε· κατά προτίμηση επιλέξτε τη δική σας διεύθυνση email ως αποστολέα.
• Στο δωρεάν site η φόρμα δεν στέλνει email· αποστολή αρχείου δεν είναι ποτέ δυνατή.
• Τα αιωρούμενα κουμπιά για WhatsApp και επικοινωνία βρίσκονται στις Ρυθμίσεις > Κουμπιά.
• Τα widgets φορτώνουν μόνο μετά από συγκατάθεση· ο Προσαρμοσμένος κώδικας και το Δικό σας HTML είναι για προχωρημένους.

Κουίζ

Άσκηση

Άσκηση D4.3: Η φόρμα επικοινωνίας σας και ένα widget. Ρυθμίστε πλήρως τη φόρμα σας και τοποθετήστε ένα widget που προσθέτει πραγματικά κάτι.

Λίστα ελέγχου:

• [ ] ενότητα Επικοινωνία με φόρμα στη σελίδα επικοινωνίας σας·
• [ ] το Αποστολή μηνυμάτων σε συμπληρωμένο με μια διεύθυνση που διαβάζετε καθημερινά·
• [ ] επιλεγμένη μέθοδος αποστολής και κατανοητό το γιατί·
• [ ] επιβεβαίωση στον επισκέπτη με δικό σας κείμενο·
• [ ] ρυθμισμένη ευχαριστία ή σελίδα ευχαριστίας·
• [ ] ένα widget τοποθετημένο (για παράδειγμα ένας χάρτης ή ένα εργαλείο κρατήσεων ραντεβού) και επιβεβαιωμένο ότι εμφανίζεται στο banner cookies·
• [ ] site δημοσιευμένο και δοκιμαστικό μήνυμα σταλμένο (μόνο με πακέτο· στο δωρεάν site ελέγχετε τις ρυθμίσεις).

Ερωτήσεις:

1. Σε ποια διεύθυνση φτάνουν τα μηνύματα της φόρμας σας και με ποια μέθοδο αποστολής;
2. Ποιο widget επιλέξατε, τι προσφέρει στον επισκέπτη σας και τι βλέπει ένας επισκέπτης που δεν δίνει συγκατάθεση;
3. Έφτασε το δοκιμαστικό σας μήνυμα και έφτασε η επιβεβαίωση στον "επισκέπτη" ή κατέληξε στα spam;

Αφού πατήσετε "ολοκληρώθηκε", βλέπετε ένα παράδειγμα απάντησης: η Schildersbedrijf Example στέλνει τα μηνύματα στο info@example.com μέσω της δικής της διεύθυνσης email στο domain· το widget είναι ένας χάρτης Google Maps με τη διεύθυνση, που φορτώνει μόνο μετά από συγκατάθεση και αλλιώς εμφανίζει ένα πλαίσιο με κουμπί για συγκατάθεση· το δοκιμαστικό μήνυμα έφτασε, όπως και η επιβεβαίωση, όχι στα spam.

Περαιτέρω ανάγνωση

• Φόρμα επικοινωνίας στον ιστότοπό σας: αποστολή των πεδίων μέσω email και αποτροπή του spam
• Δωρεάν μάθημα Το email σε τάξη: ρύθμιση και σωστή παράδοση 7.3: Mail από τον ιστότοπό σας και φόρμες
• Δωρεάν μάθημα Το email σε τάξη: ρύθμιση και σωστή παράδοση 7.2: Συγκατάθεση, απεγγραφή και μια καθαρή λίστα
• Χρήση του Click to Chat (Κέντρο βοήθειας WhatsApp): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Βοήθεια Google Calendar, στα αγγλικά): https://support.google.com/calendar/answer/37083