Υπάρχει μια σειρά διαφορετικών προσθηκών φόρμας WordPress εκεί έξω, όπως Φόρμες WP, Φόρμα Επικοινωνίας 7 και Πειρατικές Φόρμες.
Σε αυτό το παράδειγμα, θα δείξουμε με τη δωρεάν χρήση της προσθήκης Φόρμας Επικοινωνίας 7.
1. Εγκαταστήστε την προσθήκη φόρμας επικοινωνίας 7
Συνδεθείτε στην περιοχή Διαχειριστή του WordPress και κατευθυνθείτε στις Προσθήκες και επιλέξτε Προσθήκη νέου. Αναζητήστε τη Φόρμα Επικοινωνίας 7 και επιλέξτε Εγκατάσταση τώρα και μετά Ενεργοποίηση.
Σελίδα προσθηκών WordPress για εγκατάσταση της φόρμας επικοινωνίας.
2. Προσθέστε μια νέα φόρμα επικοινωνίας
Θα δείτε τώρα μια νέα επιλογή μενού που ονομάζεται Επαφή κάτω από την αριστερή πλαϊνή γραμμή του WordPress. Επιλέξτε Επαφή για να διαμορφώσετε μια νέα φόρμα. Θα δείτε μια λίστα με τις τρέχουσες φόρμες επικοινωνίας, με μια προεπιλεγμένη φόρμα που ονομάζεται «Φόρμα επικοινωνίας 1» να έχει ήδη προστεθεί.
Θα δημιουργήσουμε ένα νέο. Επιλέξτε Προσθήκη νέου. Θα δείτε την προεπιλεγμένη φόρμα που έχει προστεθεί μαζί με τα προεπιλεγμένα δεδομένα της. Αυτό θα εμφανίσει μια φόρμα που μοιάζει με αυτό:
Προσθέστε μια νέα φόρμα επικοινωνίας στο WordPress
3. Διαμόρφωση της φόρμας σας
Οι ετικέτες φόρμας χρησιμοποιούνται ως σύμβολα κράτησης θέσης για ένα στοιχείο ελέγχου φόρμας HTML. Για παράδειγμα, μπορείτε να προσθέσετε ένα αναπτυσσόμενο μενού χρησιμοποιώντας την ετικέτα του αναπτυσσόμενου μενού. Μπορείτε να δείτε το παράδειγμά μας παρακάτω και πώς επηρεάζει τη φόρμα στον ιστότοπο.
Διαμόρφωση φόρμας επικοινωνίας στο WordPress
Τύπος πεδίου - Ορίζει εάν το πεδίο που προστίθεται είναι απαραίτητο για την υποβολή της φόρμας.
Όνομα - Αυτό είναι το όνομα της ετικέτας φόρμας που προστίθεται. Χρησιμοποιείται μόνο εσωτερικά, επομένως δεν θα επηρεάσει τον τρόπο εμφάνισης του πεδίου φόρμας στον ιστότοπο.
Επιλογές - Καθώς αυτή είναι μια ετικέτα αναπτυσσόμενου μενού, πρέπει να υπάρχουν διάφορες επιλογές για να τις επιλέξει ο χρήστης. Στο παράδειγμά μας χρησιμοποιήσαμε διάφορες ηλικίες.
Χαρακτηριστικό Id/Class - Εάν θέλετε να προσαρμόσετε περαιτέρω τη φόρμα σας, μπορείτε να εκχωρήσετε ένα CSS ID ή ένα χαρακτηριστικό Class.
4. Επεξεργαστείτε τις Ρυθμίσεις αλληλογραφίας
Τώρα που έχετε διαμορφώσει τη φόρμα σας, θα θέλετε να διαμορφώσετε από πού στέλνει πραγματικά η φόρμα και πού στέλνει. Η διεύθυνση Από θα πρέπει πάντα να είναι μια διεύθυνση που χρησιμοποιεί τον δικό σας τομέα, π.χ. [email protected], ωστόσο μπορείτε να ορίσετε τη διεύθυνση Προς να είναι οποιαδήποτε διεύθυνση email στην οποία θέλετε να λάβετε τη φόρμα.
Ρυθμίσεις email φόρμας επικοινωνίας στο WordPress
Θα μπορείτε να διαμορφώσετε ποιες πληροφορίες από τη φόρμα θα αποστέλλονται μέσω του email, στο παραπάνω παράδειγμα, μπορείτε να δείτε τις ετικέτες: [το όνομά σας], [το email σας], [το θέμα σας] και [σας- μήνυμα]. Αυτές θα είναι οι πληροφορίες που έχει εισαγάγει ο χρήστης της φόρμας στη φόρμα όταν την υπέβαλε.
5. Προσθήκη της φόρμας στον ιστότοπό σας
Τώρα έχετε διαμορφώσει τη φόρμα, μπορείτε να την προσθέσετε σε μια ανάρτηση ή μια σελίδα στον ιστότοπό σας στο WordPress. Για να το κάνετε αυτό, θα χρειαστείτε τον σύντομο κωδικό της φόρμας που παρέχεται στη σελίδα Φόρμα Επικοινωνίας.
Σύντομοι κώδικες φόρμας επικοινωνίας για εφαρμογή σε σελίδες WordPress
Στο παράδειγμά μας, ο σύντομος κώδικάς μας είναι:
[contact-form-7 id="11" title="Νέα Φόρμα Επικοινωνίας"]
Προσθέστε τον σύντομο κώδικα στη σελίδα σας ως εξής:
Προσθέστε σύντομο κώδικα στη σελίδα WordPress
Μόλις ολοκληρωθεί, η φόρμα σας θα εμφανιστεί στη σελίδα ή την ανάρτηση στην οποία την έχετε προσθέσει.
