Προσθήκη πεδίου στη φόρμα επικοινωνίας
Προσθήκη πεδίου στη φόρμα επικοινωνίας
φοιτητικά νέα

Θα χρησιμοποιήσουμε ένα γνωστό πρόσθετο φόρμας επικοινωνίας (από το προηγούμενο άρθρο) που ονομάζεται «Contact Form 7».

Αν έχετε μόλις διαβάσει το προηγούμενο άρθρο μας, στο οποίο εξηγούμε πώς να χρησιμοποιήσετε τα πρόσθετα όταν κάνετε κατασκευή ιστοσελίδων με το wordpress, λογικά θα το έχετε εγκαταστήσει ήδη.

Κατ’ αρχάς, επιτρέψτε μου να σας πω αυτό. Υπάρχουν ένα σωρό πρόσθετα για φόρμες επικοινωνίας για το WordPress εκεί έξω, οπότε μη διστάσετε να κοιτάξετε τριγύρω και να δοκιμάσετε μερικά διαφορετικά. Το «Contact Form 7» είναι ένα από τα πιο δημοφιλή πρόσθετα του WordPress, οπότε θα είναι και αυτό που θα χρησιμοποιήσουμε σε αυτό το κεφάλαιο.

Το «Contact Form 7» είναι επίσης δωρεάν, οπότε πάμε να το εγκαταστήσουμε και, στη συνέχεια, να το ενεργοποιήσουμε (αν δεν το έχετε κάνει ήδη).

Εγκατάσταση του πρόσθετου «MailChimp extension plugin for Contact»
Εγκατάσταση του πρόσθετου «MailChimp extension plugin for Contact»

Ας δημιουργήσουμε την πρώτη μας φόρμα. Στην αριστερή πλευρά του Πίνακα Ελέγχου, κάντε κλικ στον σύνδεσμο Contact. Στην κορυφή, κάντε κλικ στην επιλογή Add New, στη συνέχεια, δώστε ένα όνομα στη φόρμα σας και κάντε κλικ στην επιλογή Save.

Μπορείτε να προσθέσετε πεδία πατώντας ένα από τα κουμπιά (παρακάτω) και θα παρατηρήσετε ότι αυτό το πρόσθετο σας δίνει έναν σύντομο κωδικό για κάθε πεδίο που προσθέτετε.

Κουμπιά προσθήκης πεδίου
Κουμπιά προσθήκης πεδίου
Προσθήκη πεδίου στη φόρμα επικοινωνίας
Προσθήκη πεδίου στη φόρμα επικοινωνίας

Πιθανότατα θα παρατηρήσετε ότι υπάρχουν ετικέτες HTML γύρω από τα προεπιλεγμένα πεδία φόρμας στο Contact Form 7 που φαίνονται ως «<label>» ή «<p>». Εδώ να υπενθυμίσουμε οτι οι ετικέτες είναι οι παράγραφοι στην html.

Μπορείτε να χρησιμοποιήσετε τον προεπιλεγμένο κωδικό τους ως οδηγό, αν θέλετε, και μπορείτε να αντιγράψετε/επικολλήσετε τον κωδικό τους και να αντικαταστήστε το απαραίτητο κείμενο με το δικό σας.

Μπορείτε επίσης, απλά, να αφήσετε εκτός την HTML εάν μπερδεύεστε πολύ. Συνιστάται η συμπερίληψή της, δεδομένου ότι σας βοηθά να διαμορφώσετε τη φόρμα σωστά, αλλά αν κάτι πάει στραβά λόγω άστοχου κώδικα, μπορείτε να καταφύγετε στο να συμπεριλάβετε τα πεδία χωρίς τον κώδικα HTML τυλιγμένο γύρω τους. Μια καλή πρόταση θα ήταν να φρεσκάρετε τις γνώσεις σας πάνω στην HTML διαβάζοντας τα άρθρα μας για την εισαγωγή στη γλώσσα html. Εφόσον διαβάζετε αυτό το άρθρο είναι βέβαιο οτι θέλετε να ασχοληθείτε με κατασκευή ιστοσελίδων. Για αυτό το σκοπό είναι απαραίτητο να γνωρίζετε τουλάχιστο τα βασικά στοιχεία της γλώσσας html.

Σύνδεση με τον λογαριασμό στο MailChimp
Σύνδεση με τον λογαριασμό στο MailChimp

ΤΩΡΑ ΠΡΕΠΕΙ ΝΑ ΒΑΛΕΤΕ ΤΗ ΦΟΡΜΑ ΜΑΣ ΣΤΗΝ ΙΣΤΟΣΕΛΙΔΑ ΣΑΣ

Το μόνο που μένει να κάνετε τώρα είναι:

  • Να αντιγράψετε τον σύντομο κωδικό για τη νέα σας φόρμα,
  • να πάτε στην ενότητα Μικροεφαρμογές,
  • να προσθέσετε τη μικροεφαρμογή κειμένου σε μία από τις περιοχές μικροεφαρμογών σας,
  • και να κάνετε επικόλληση τον σύντομο κωδικό της φόρμας.

Τώρα κάντε αποθήκευση και θα πρέπει να είστε σε θέση να δείτε τη νέα φόρμα σας στην ιστοσελίδα σας.

Και αν το δοκιμάσατε, θα πρέπει να δείτε ότι πλέον έχετε προστεθεί στο MailChimp μόλις υποβάλλετε μια φόρμα.

Κάτι τελευταίο για το «Contact Form 7»: Αν θέλετε, όσοι κάνουν υποβολή μιας φόρμας να ανακατευθύνονται σε μία σελίδα «Σας Ευχαριστούμε», θα πρέπει να πάτε πίσω στην επεξεργασία της φόρμας σας και να κάνετε κλικ στο Additional Settings. Αυτό το μέρος δεν είναι όσο ξεκάθαρο θα έπρεπε, γι’ αυτό επιτρέψτε μου να σας βοηθήσω λίγο.

Ο κωδικός που θα θελήσετε να βάλετε εδώ για να ανακατευθύνεται κάποιος σε μία ευχαριστήρια σελίδα σας μετά την υποβολή, είναι:
on_sent_ok: «location = ‘http://yourdomain.com/’

Τώρα κάντε κλικ στο Save και είστε έτοιμοι.

Μέχρι τώρα θα πρέπει να έχετε μια βασική φόρμα επικοινωνίας στην ιστοσελίδα σας.

 

Φόρμες επικοινωνίας στην κατασκευή ιστοσελίδων

Όταν κάνουμε κατασκευή ιστοσελίδων τότε πολύ συχνά χρειάζεται να τοποθετήσουμε φόρμες εντός του ιστότοπου. Η ανάγκη που καλύπτει η φόρμα κατά τη δημιουργία ιστοσελίδας αφορά την επικοινωνία του επισκέπτη με τον ιδιοκτήτη της ιστοσελίδας. Η εμπειρία έχει δείξει ότι το θέμα της φόρμας επικοινωνίας τίθεται σε κάθε κατασκευή ιστοσελίδας. Και μάλιστα δεν τίθεται επιφανειακά, αλλά σε βάθος. Και αυτό είναι πολύ λογικό. Άλλωστε ο ουσιαστικός σκοπός για τον οποίο κατασκευάζεται μια ιστοσελίδα είναι για να φέρει σε επαφή την επιχείρηση με τον κόσμο. Αν θέλουμε να παραδώσουμε έναν άρτιο ιστότοπο θα πρέπει να υλοποιήσουμε την επικοινωνία με τον καλύτερο τρόπο κατά το σχεδιασμό της ιστοσελίδας. Το μυστικό βρίσκεται στην επιλογή του κατάλληλου πρόσθετου. Σιγά σιγά με την εμπειρία που αποκτά κάποιος στη δημιουργία ιστοσελίδων μαθαινει πως να επιλέγει τα κατάλληλα πρόσθετα. Αν είστε αρχάριος στη δημιουργία ιστοσελίδας τότε καλό είναι να επιλέξετε το πρόσθετο που χρησιμοποιείται στο παράδειγμα. Το έχουμε δοκιμάσει και είμαστε σίγουροι για αυτό. Αν όμως θέλετε να μάθετε λεπτομέρειες για την εξειδικευμένη χρήση των πρόσθετων τότε δεν έχετε παρά να ακολουθήσετε τους κορυφαίους επαγγελματίες που διαθέτουν άριστη τεχνογνωσία στη δημιουργία των ιστοσελίδων.

κατασκευή ιστοσελίδων
κατασκευή ιστοσελίδων

Προώθηση ιστοσελίδων

Όταν κάνουμε προώθηση ιστοσελίδων καλό είναι να μην το παρακανουμε με τη βελτιστοποίηση. Καλό είναι να αφήσουμε την επικοινωνία απαλλαγμένη από τις λέξεις κλειδιά. Καλό είναι να αφήσουμε τη μηχανή αναζήτησης να ανακαλύψει μόνη της τη σελίδα της επικοινωνίας του ιστότοπου που προωθούμε. Εάν όλα τα υπόλοιπα κομμάτια της προώθησης της ιστοσελίδας πραγματοποιηθούν σωστά, τότε το google όχι μόνο θα ανακαλύψει τη σελίδα επικοινωνίας, αλλά θα την εμφανίσει κάτω από την κεντρική σας σελίδα στη λίστα αποτελεσμάτων. Μπορείτε να μάθετε περισσότερα για την προώθηση ιστοσελίδας κάνοντας κλικ εδώ.

Προώθηση ιστοσελίδων
Προώθηση ιστοσελίδων

Κατασκευή eshop

Η φορμα επικοινωνίας είναι απαραίτητη κατά την κατασκευή eshop. Υπάρχει η δυνατότητα να κάνετε κατασκευή ηλεκτρονικού καταστήματος μέσα από το wordpress χρησιμοποιώντας το woocommerce. Στην περίπτωση επιλογής του woocommerce τότε η λύση του πρόσθετου για τη φόρμα αποτελεί μονόδρομο για την επικοινωνία με τον πελάτη. Η επικοινωνία είναι απαραίτητη σε κάθε δημιουργία ηλεκτρονικού καταστήματος. Η επιλογή του κατάλληλου πρόσθετου για την επικοινωνία αποτελεί ένα από τα πολλά μικρά ζητήματα που κάνουν την κατασκευή ενός ηλεκτρονικού καταστήματος να θεωρηθεί ποιοτική. Όλα αυτά τα θέματα θα τα έχετε λυμένα αν αναθέσετε την κατασκευή του eshop της επιχείρησης σας στους επαγγελματίες. Μπορείτε να βρείτε τους καλύτερους πατώντας εδώ.

Σεμιναρια seo

Ένας από τους λόγους για τους οποίους είναι δημοφιλές το wordpress είναι επειδή είναι εξαιρετικά φιλικό προς τις μηχανές αναζήτησης. Μετά από την κατασκευή της ιστοσελίδας, το επόμενο βήμα είναι η προώθηση. Τα σεμινάρια προώθησης ιστοσελίδων αποτελούν τον καλύτερο τρόπο για να εκπαιδευθείτε πάνω στο θέμα της προώθησης. Αν και στην αγορά υπάρχουν πολλά σεμινάρια seo, τα καλύτερα σεμινάρια προώθησης ιστοσελίδων θα τα βρείτε στον ιστότοπο της εταιρείας dreamweaver πατώντας εδώ.

Υποστήριξη ιστοσελίδων όταν περιέχουν φόρμες επικοινωνίας

Καλό είναι η τοποθέτηση φόρμας να γίνεται με αξιόπιστα εργαλεία ώστε να αποφύγουμε προβλήματα με αγνώστους κατασκευαστές λογισμικού. Η δυσκολία στη συντήρηση της ιστοσελίδας σε μεγάλο βαθμό εξαρτάται από το πλήθος των πρόσθετων που προέρχονται από άγνωστους κατασκευαστές. Όσο λιγότερο το πλήθος αυτών των πρόσθετων, τόσο μικρότερη η προσπάθεια που απαιτείται για την υποστήριξη ιστοσελίδας. Την ώρα που κατασκευάζουμε την ιστοσελίδα έχουμε στο μυαλό μας να παρουσιάσουμε ένα εντυπωσιακό αποτέλεσμα. Και παρασυρόμενοι από αυτό τον ενθουσιασμό πολλές φορές αγνοούμε το κόστος συντήρησης της ιστοσελίδας. Όμως εκεί φαίνεται ο επαγγελματίας κατασκευαστής ιστοσελιδων. Δηλαδή αυτός που δεν σκέφτεται μόνο το παρόν, αλλά λαμβάνει πολύ σοβαρά τόσο την υποστήριξη της ιστοσελίδας όσο και την προετοιμασία για την προώθηση της ιστοσελίδας. Εδώ αξίζει τον κόπο να σημειωθεί ότι αυτό που αγνοείται περισσότερο είναι η συντήρηση της ιστοσελίδας. Και αυτό συμβαίνει επειδή πολλοί ιδιοκτήτες ιστότοπων δεν δίνουν σημασία στη συντήρηση μέχρι να παρουσιαστεί το πρόβλημα. Όμως τότε θα είναι πλέον αργά. Με άλλα λόγια η συντήρηση ιστοσελίδων είναι το σύνολο των ενεργειών που κάνουμε ώστε να αποφύγουμε το πρόβλημα και ο ιστότοπος να συνεχίσει να λειτουργεί απρόσκοπτα. Εδώ μπορείτε να μάθετε περισσότερα για τη συντήρηση ιστοσελίδων.

Χρήση javascript στις φόρμες επικοινωνίας

Στις φόρμες επικοινωνίας πριν γίνει αποστολή τωνδεομένων γίνεται έλεγχος εγκυρότητας αυτών (validation). Αυτό σημαίνει για παράδειγμα οτι επιβεβαιώνει ο ιστότοπος πως στο πεδίο του email περιλαμβάνεται το σύμβολο @ ή οτι το πεδίο του τηλεφώνου περιλαμβάνει μόνο αριθμητικούς χαρακτήρες. Αυτός ο έλεγχος γίνεται μέσω εντολών της γλώσσας javascript. Διότι η γλώσσα javascript εκτελείται στο φυλλομετρητή και δεν επιβαρύνει τη σελίδα με επικοινωνία προς το server. Εάν θέλετε να ασχοληθείτε με κατασκευή ιστοσελίδων τότε καλό θα είναι να αποκτήσετε κάποιες βασικές γνώσεις javascript. Αυτό μπορείτε να το κάνετε διαβάζοντας τα άρθρα μας, ξεκινώντας από την εισαγωγή στη γλώσσα JavaScript.

Εισαγωγή στη JavaScript
Εισαγωγή στη JavaScript

Βιβλίο κατασκευής ιστοσελίδων

Μπορείτε να μάθετε πολλά πάνω στις φόρμες αλλά και σε άλλες κατηγορίες πρόσθετων για το wordpress αν διαβάσετε το βιβλίο κατασκευής ιστοσελίδων με τίτλο «Ανάπτυξη ιστοσελίδων με το wordpress«. Κυκλοφορεί από τις εκδόσεις Φυλατος και είναι το καλύτερο βιβλίο κατασκευής ιστοσελίδων της Ελληνικής βιβλιογραφίας. Διότι προσεγγίζει με απλότητα αλλά και πληρότητα όλες τις έννοιες που αφορούν στην κατασκευή ιστοσελίδων. Περιεχόμενο εύκολο στο διάβασμα, αλλά δίνει επακριβώς την ουσία. Όλα όσα θέλετε να μάθετε για την κατασκευή ιστοσελίδων με το wordpress βρίσκονται σε αυτό το βιβλίο. Μπορείτε να αγοράσετε το βιβλίο πατώντας εδώ.