Πώς να υποβάλετε μια φόρμα χωρίς ανανέωση σελίδας στο WordPress

υποβάλετε μια φόρμα χωρίς ανανέωση σελίδας


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

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

Γιατί να ενεργοποιήσετε την υποβολή φόρμας Ajax στο WordPress

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

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

υποβολές φόρμας ajax

Για να ενεργοποιήσετε την υποβολή φόρμας ajax στον ιστότοπό σας στο WordPress, σας συνιστούμε WPForms, η καλύτερη προσθήκη φόρμας για το WordPress.

Βήμα 1: Δημιουργία νέας φόρμας

Για να ξεκινήσετε να δημιουργείτε τη φόρμα σας, θα πρέπει πρώτα να εγκαταστήσετε το πρόσθετο WPForms στον ιστότοπό σας WordPress.

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

Μόλις εγκατασταθεί και ενεργοποιηθεί η προσθήκη, μεταβείτε στον πίνακα ελέγχου του WordPress και μεταβείτε στο WPForms »Προσθήκη νέου. Τώρα θα ανακατευθυνθείτε σε μια σελίδα όπου μπορείτε να επιλέξετε ένα πρότυπο για τη φόρμα σας.

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

Ρύθμιση φόρμας WPForms

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

διαγράψτε ένα πεδίο από wpforms

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

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

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

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

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

φόρμα φόρτωσης αρχείου

Βήμα 3: Ενεργοποίηση υποβολής φόρμας Ajax

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

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

ενεργοποίηση υποβολής φόρμας ajax

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

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

ρυθμίσεις επιβεβαίωσης φόρμας μεταφόρτωσης αρχείου

Βήμα 4: Δημοσίευση της φόρμας με υποβολή Ajax

Το τελευταίο βήμα είναι να δημοσιεύσετε τη φόρμα με δυνατότητα υποβολής Ajax στον ιστότοπό σας. Για αυτό, μεταβείτε στη σελίδα όπου θέλετε να εμφανίζεται η φόρμα.

Μπορείτε να ξεκινήσετε πηγαίνοντας στο Σελίδες »Προσθήκη νέου στον πίνακα ελέγχου του 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