Ανασκόπηση των προσθηκών για τη δημιουργία μιας φόρμας σχολίων. Φόρμα σχολίων - τα καλύτερα πρόσθετα WP

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

Γιατί χρειάζεστε μια αναδυόμενη φόρμα σχολίων για το WordPress;

Λόγοι χρήσης

Ας δούμε γιατί χρειάζεται αυτή η φόρμα

  1. Εξοικονόμηση ελεύθερου χώρου στον ιστότοπο. Η φόρμα επικοινωνίας μπορεί να τοποθετηθεί οπουδήποτε: στο υποσέλιδο ή στην κεφαλίδα, στο κύριο περιεχόμενο της σελίδας, ως αιωρούμενο κουμπί κ.λπ.
  2. Αποτελεσματική εμφάνιση. Το animation της εμφάνισης ενός νέου παραθύρου φαίνεται ενδιαφέρον και ασυνήθιστο
  3. Διαθεσιμότητα. Μπορείτε να αφήσετε καταχωρήσεις σε αυτήν τη φόρμα από οπουδήποτε στον ιστότοπο, οι χρήστες δεν χρειάζεται να επιστρέψουν στην κύρια σελίδα.

Ένα πρόσθετο πλεονέκτημα: η φόρμα είναι εύκολο να τροποποιηθεί και να προσαρμοστεί για να ταιριάζει στις ανάγκες του ιστότοπού σας. Μια αναδυόμενη φόρμα σχολίων για το WordPress μπορεί να παρουσιαστεί με τη μορφή ενός ανοίγματος παραθύρου για παραγγελία κλήσης, υπηρεσίας ή προϊόντος ή για συνδρομή. Εάν θέλετε, μπορείτε να προσθέσετε οπτικά εφέ, διάφορες εικόνες κ.λπ.

Πρόσθετα για την εγκατάσταση μιας αναδυόμενης φόρμας

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

Φόρμα Επικοινωνίας 7

Αυτό το πρόσθετο χρησιμοποιείται απευθείας για το σχεδιασμό της φόρμας. Για να το εγκαταστήσετε, ακολουθήστε τα εξής βήματα:

Εύκολο FancyBox

Αυτό το πρόσθετο είναι κατάλληλο για την ανάπτυξη ενός εφέ αναδυόμενου παραθύρου. Η σειρά εγκατάστασης του Easy FancyBox είναι παρόμοια με την προηγούμενη εγκατάσταση προσθήκης.

Ρύθμιση πρόσθετων

Μπορείτε να διαμορφώσετε τις ρυθμίσεις του πρόσθετου Easy FancyBox μέσω αρχείων πολυμέσων. Χρησιμοποιήστε τις επιλογές μενού "Ρυθμίσεις" -> "Αρχεία πολυμέσων".

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

Αλλά δεν είναι μόνο αυτό. Επιλέξτε το πλαίσιο δίπλα στο "Ενσωματωμένο περιεχόμενο"

Οποιοσδήποτε μπορεί να εμβαθύνει στις ρυθμίσεις της προσθήκης και να τις ορίσει στη διακριτική του ευχέρεια.

Συμβουλή: εάν θέλετε η φόρμα να είναι πάντα ανοιχτή, καταργήστε την επιλογή "Κλείσιμο FancyBox όταν γίνεται κλικ στην επικάλυψη" στις ρυθμίσεις Easy FancyBox, η οποία κλείνει το παράθυρο όταν κάνετε κλικ έξω από αυτήν.

Οδηγία βήμα προς βήμα

Λοιπόν, η "βαρετή" προκαταρκτική προετοιμασία τελείωσε, τώρα ας περάσουμε στο "νόστιμο" μέρος - πώς, στην πραγματικότητα, αναπτύσσεται η αναδυόμενη φόρμα σχολίων του WordPress.

Χειρισμός του παραθύρου φόρμας

Από πού ξεκινάμε; Φυσικά, με προκαταρκτική διαμόρφωση της ίδιας της φόρμας. Επιλέξτε «Φόρμα Επικοινωνίας 7» στο δεξί μενού και, στη συνέχεια, την επιλογή «Προσθήκη νέου».

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

Ρίξτε μια ματιά στο αποτέλεσμα. Όπως μπορείτε να δείτε, το πρόσθετο δημιούργησε έναν ειδικό σύντομο κώδικα που χρησιμοποιείται για να εμφανίσει στη συνέχεια τη φόρμα. Πρέπει να το αντιγράψετε.

Έξοδος φόρμας

Τώρα ας πάμε στον προγραμματισμό. Ο νέος κώδικας προγράμματος μπορεί να εισαχθεί οπουδήποτε στον ιστότοπο, για παράδειγμα, στις "Επαφές" και σε άλλα. Στο παράδειγμά μας, η νέα φόρμα θα εμφανιστεί στο widget. Επιλέξτε «Εμφάνιση» στο μενού, κάντε κλικ στο «Γραφικά στοιχεία» και, στη συνέχεια, στο παράθυρο που ανοίγει, κάντε κλικ στην επιλογή «Κείμενο».

Τώρα κάντε κλικ στο κουμπί "Προσθήκη γραφικού στοιχείου".

Επικολλήστε τον ακόλουθο κώδικα στο πεδίο εισαγωγής περιεχομένου:

Γράψε ένα γράμμα

Έτσι θα μοιάζει το αποτέλεσμα:

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

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

Στυλ συνδέσμων

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

Μέθοδος 1: Χρήση πρόσθετων στυλ θεμάτων.

Ο παρακάτω κώδικας μπορεί να εισαχθεί ως εξής:


Ο ίδιος ο κώδικας του προγράμματος μοιάζει με αυτό:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 /***Εμφάνιση συνδέσμου σε μορφή κουμπιού****/ .επικοινωνήστε μαζί μας a( margin:auto; /*ευθυγράμμιση του μπλοκ στο κέντρο*/ display:block; πλάτος:199px; /*button size*/ padding: 11px 22px ; κεντράρισμα της λεζάντας*/ color:#ffffff; έγχρωμοι σύνδεσμοι όταν τοποθετείτε τον κέρσορα**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ;

/***Εμφάνιση συνδέσμου σε μορφή κουμπιού****/ .επικοινωνήστε μαζί μας a( margin:auto; /*ευθυγράμμιση του μπλοκ στο κέντρο*/ display:block; πλάτος:199px; /*button size*/ padding: 11px 22px ; κεντράρισμα της λεζάντας*/ color:#ffffff; έγχρωμοι σύνδεσμοι όταν τοποθετείτε τον κέρσορα**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ;

Το αποτέλεσμα είναι ένα κουμπί όπως αυτό:

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

Μέθοδος 2 - χρησιμοποιήστε μια εικόνα ως κουμπί. Αρχικά, ανεβάστε την απαιτούμενη εικόνα στον ιστότοπο (όποια εικόνα σας αρέσει, όχι απαραίτητα με τη μορφή κουμπιού - δεν έχει μεγάλη σημασία). Για να το κάνετε αυτό, κάντε κλικ στο "Media" -> "Add New" και επιλέξτε την εικόνα που θέλετε. Ένας μόνιμος σύνδεσμος προς το αρχείο θα εμφανιστεί στα δεξιά της εικόνας (σε αυτό το παράδειγμα http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg) , αντιγράψτε το και προσθέστε το στον κώδικα (μην αφαιρείτε εισαγωγικά):

Προσθέστε τον κωδικό που προκύπτει στον κύριο κωδικό εξόδου της φόρμας αντί για το κείμενο "Γράψτε ένα γράμμα".

1

Ο ιστότοπός μου εμφάνισε το κουμπί που φαίνεται στο παρακάτω στιγμιότυπο οθόνης:

Και έτσι θα μοιάζει το κουμπί εάν αφήσετε το πρόσθετο στυλ που περιγράφεται στην πρώτη μέθοδο:

Προσθήκη στο μενού

Για να μπορεί να κληθεί η αναδυόμενη φόρμα σχολίων για το WordPress απευθείας από το μενού, πρέπει να χρησιμοποιήσετε τον ακόλουθο κώδικα

1 2 3
  • Γράψε ένα γράμμα
  • Γράψε ένα γράμμα
  • Πρώτα πρέπει να υπολογίσετε πού ακριβώς πρέπει να εισαγάγετε αυτόν τον κωδικό. Μεταβείτε στο "Editor" μέσω του "Appearance" και ανάμεσα στα πρότυπα επιλέξτε "Header (header.php)"

    Τώρα βρείτε το μέρος όπου βρίσκεται ο κωδικός μενού. Βρείτε τις ακόλουθες πληροφορίες:

    1 2