Πώς να δημιουργήσετε ένα αναδυόμενο έντυπο φόρμας επικοινωνίας στο WordPress – Βήμα προς βήμα

πώς να δημιουργήσετε ένα αναδυόμενο έντυπο επαφής στο wordpress


Θέλετε να εμφανιστεί η φόρμα επικοινωνίας σας όταν ένας χρήστης κάνει κλικ στο κουμπί επαφής ή στο σύνδεσμο?

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

Δημιουργία αναδυόμενου εντύπου επαφής εύκολα στο WordPress

Με το WordPress, η δημιουργία αναδυόμενου εντύπου επαφής είναι εύκολη. Για να ξεκινήσετε, πρέπει απλώς να έχετε 2 πράγματα:

  1. ένα ισχυρό αναδυόμενο πρόσθετο
  2. ένα ισχυρό πρόσθετο δημιουργίας φόρμας

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

WPForms, εγγραφή χρήστη, προσθήκη, προσθήκη σύνδεσης χρήστη

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

αναδυόμενα παράθυρα

Για να μάθετε περισσότερα σχετικά με το OptinMonster, διαβάστε τη λεπτομερή κριτική μας για το OptinMonster.

Βήμα 1: Εγκαταστήστε τις προσθήκες WPForms και OptinMonster

προσθήκη-wordpress-plugins

Ξεκινήστε κατεβάζοντας το WPForms συνδέω. Στη συνέχεια, εγκαταστήστε και ενεργοποιήστε το. Δεν είμαι σίγουρος πώς; Κανένα πρόβλημα. Μπορείτε να μεταβείτε στον οδηγό μας για το πώς να εγκαταστήσετε μια προσθήκη WordPress για να τα λύσετε όλα αυτά. Θα περιμένουμε.

Ολα έτοιμα? Τέλειος.

Ακολουθήστε την ίδια διαδικασία για να ενεργοποιήσετε το πρόσθετο OptinMonster. Δεν αρκεί όμως να εγκαταστήσετε μόνο την προσθήκη. Θα πρέπει δημιουργία λογαριασμού με την εφαρμογή OptinMonster επίσης. Η προσθήκη λειτουργεί μόνο ως μέσο για τη σύνδεση του ιστότοπού σας WordPress με την εφαρμογή OptinMonster. Για να λειτουργήσει σωστά, πρέπει να εγκαταστήσετε την προσθήκη και να δημιουργήσετε έναν λογαριασμό και με την εφαρμογή.

Βήμα 2: Δημιουργήστε μια φόρμα επικοινωνίας χρησιμοποιώντας WPForms για το αναδυόμενο παράθυρο

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

Εάν δεν έχετε φόρμα επικοινωνίας, μεταβείτε στον πίνακα ελέγχου και κάντε κλικ στο WPForms »Προσθήκη νέου.

wpforms-ταμπλό

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

Πρότυπα WPForms Lite

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

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

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

Βήμα 3: Δημιουργία αναδυόμενου παραθύρου WordPress χρησιμοποιώντας το OptinMonster

Το επόμενο βήμα είναι να δημιουργήσετε ένα αναδυόμενο παράθυρο στον ιστότοπό σας. Θα δημιουργήσουμε ένα αναδυόμενο παράθυρο χρησιμοποιώντας OptinMonster. Μεταβείτε λοιπόν στον πίνακα ελέγχου του WordPress και κάντε κλικ στο OptinMonster »Δημιουργία νέας καμπάνιας.

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

Για το πρότυπο, ας πάμε Καμβάς. Αυτός είναι ένας κενός καμβάς που υποστηρίζει όλες τις μορφές κωδικών. Έτσι μπορείτε να εισαγάγετε οποιοδήποτε HTML, CSS, JavaScript, ακόμη και WordPress σύντομους κωδικούς εδώ.

Μόλις επιλέξετε το πρότυπο, θα μεταφερθείτε σε μια νέα οθόνη όπου μπορείτε να ονομάσετε την καμπάνια σας.

Στη συνέχεια κάντε κλικ στο Ξεκινήστε να χτίζετε αυτί. Θα κατευθυνθείτε τώρα στο εργαλείο δημιουργίας μεταφοράς και απόθεσης. Θα παρατηρήσετε ότι ο καμβάς είναι κενός όσον αφορά το σχεδιασμό. Μπορείτε να δημιουργήσετε οποιοδήποτε αναδυόμενο παράθυρο χρησιμοποιώντας αυτόν τον καμβά και να τα σχεδιάσετε από το μηδέν. Μπορείτε να το κάνετε χρησιμοποιώντας τις επιλογές κάτω από το Σχέδιο αυτί.

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

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

Εχετε ερωτήσεις?

Θέλετε να ρωτήσετε περισσότερα για την υπηρεσία μας; Απλώς συμπληρώστε τη φόρμα και θα επικοινωνήσουμε μαζί σας το συντομότερο δυνατό.

Ακολουθεί μια προεπισκόπηση του πώς μπορείτε να το κάνετε.

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

Κάντε κύλιση προς τα κάτω σε αυτήν την οθόνη και θα βρείτε περισσότερες επιλογές. Μπορείτε να τα χρησιμοποιήσετε εάν θέλετε να εμφανίσετε αυτήν τη φόρμα σε μια συγκεκριμένη σελίδα ή ανάρτηση. Χτύπα το Σώσει κουμπί όταν τελειώσετε.

Βήμα 4: Δημοσίευση της αναδυόμενης φόρμας

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

Τέλος, μεταβείτε στο Δημοσιεύω καρτέλα και εναλλαγή της κατάστασης σε ζω.

optinmonster, πύλη καλωσορίσματος, πύλη καλωσορίσματος wp, κατασκευή λιστών

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

Τέλος κάντε κλικ στο Αποθήκευση ρυθμίσεων επιλογή στο τέλος της σελίδας.

Βήμα 5: Προσθήκη συνδέσμου για ενεργοποίηση του αναδυόμενου εντύπου επαφής

Πρώτα αντιγράψτε το γυμνόσχημο της καμπάνιας OptinMonster. Μπορείτε να το βρείτε ακριβώς δίπλα στο όνομα της καμπάνιας σας.

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

Επικοινωνήστε μαζί μας

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map