Πώς να δημιουργήσετε μια φόρμα επικοινωνίας χρησιμοποιώντας το Formspree

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

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

Τι είναι το Formspree και πώς λειτουργεί;

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

Το Formspree θα δημιουργήσει ένα τελικό σημείο, το οποίο θα πρέπει να προσθέσετε στην προσαρμοσμένη φόρμα σας. Όταν ένας χρήστης πατήσει το κουμπί "Υποβολή", η φόρμα θα χρησιμοποιήσει το τελικό σημείο για να καλέσει την υπηρεσία API του Formspree. Αυτό θα δημιουργήσει ένα email με τα περιεχόμενα της φόρμας επικοινωνίας.

Το Formspree θα στείλει αυτό το email στο email-στόχο που καταχωρίσατε στον λογαριασμό σας στο Formspree. Στη συνέχεια θα λάβετε το email στα εισερχόμενά σας. Ο λογαριασμός σας στο Formspree διαθέτει επίσης ένα μέρος όπου μπορείτε να δείτε τις υποβολές της φόρμας επικοινωνίας.

Για να καταχωρήσετε το email σας στο Formspree, συνδεθείτε και εισαγάγετε τη διεύθυνση email-στόχο για τη φόρμα σας.

1. Συνδεθείτε Formspree. Εάν δεν έχετε λογαριασμό, θα πρέπει να εισαγάγετε τη διεύθυνση email σας και έναν κωδικό πρόσβασης. Εγγραφείτε χρησιμοποιώντας τη διεύθυνση email στην οποία θέλετε η φόρμα επικοινωνίας να στέλνει τις υποβολές. Μπορεί επίσης να χρειαστεί να επαληθεύσετε αυτήν τη διεύθυνση ηλεκτρονικού ταχυδρομείου κατά τη διαδικασία εγγραφής.
2. Μόλις ολοκληρωθεί η διαδικασία εγγραφής, θα ανοίξει η σελίδα "Φόρμες". Κάντε κλικ στο Νέα Φόρμα.
3. Εισαγάγετε οποιοδήποτε όνομα για τη φόρμα επικοινωνίας σας και αφήστε τις προεπιλεγμένες ρυθμίσεις του έργου. Εισαγάγετε τη διεύθυνση email προορισμού στο πεδίο "Αποστολή email σε". Εδώ το Formspree θα στείλει τις υποβολές της φόρμας επικοινωνίας σας. Μόλις ολοκληρωθεί, κάντε κλικ στο Δημιουργία Φόρμας.
4. Το Formspree θα σας παρέχει ένα τελικό σημείο και παραδείγματα για το πώς να το χρησιμοποιήσετε. Θα χρειαστεί να προσθέσετε αυτό το τελικό σημείο στην προσαρμοσμένη φόρμα επικοινωνίας στον ιστότοπό σας (περισσότερα για αυτό αργότερα).
5. Από προεπιλογή, το Formspree αποθηκεύει τη φόρμα σας σε ένα έργο που ονομάζεται "My First Project". Εάν θέλετε να αλλάξετε το όνομα αυτού, επιστρέψτε στη σελίδα "Φόρμες". Κάντε κλικ στο Ρυθμίσεις δίπλα στο όνομα του έργου.
6. Εδώ, μπορείτε να αλλάξετε το όνομα του έργου σας σε κάτι άλλο. Για παράδειγμα, μπορείτε να το μετονομάσετε ώστε να έχει το ίδιο όνομα με τον ιστότοπό σας. Μπορείτε επίσης να προσθέσετε τη διεύθυνση URL για τον ιστότοπό σας.

Θα χρειαστεί να προσθέσετε το τελικό σημείο που παρέχεται από το Formspree στη φόρμα επικοινωνίας στον κώδικα του ιστότοπού σας.

1. Προσθέστε το τελικό σημείο στο χαρακτηριστικό "action" για τη φόρμα. Αυτό θα κάνει το πρόγραμμα περιήγησης ενός χρήστη να στείλει τη φόρμα σε αυτήν τη διεύθυνση URL όταν την υποβάλει.

   <μορφή δράσης="https://formspree.io/f/xjvlaqpe" μέθοδος="ΘΕΣΗ">
   <!-- Η φόρμα σας εδώ -->
   <τύπος κουμπιού="υποβάλλουν" τάξη="κουμπί"> υποβάλλουν </button>
   </form>

2. Προσθέστε στοιχεία εισόδου στη φόρμα σας. Μπορείτε να χρησιμοποιήσετε αυτό το παράδειγμα φόρμας που χρησιμοποιεί το πλαίσιο Bootstrap CSS:

   <μορφή δράσης="https://formspree.io/f/mbjqjrdl" τάξη="επιπλέον επένδυση" μέθοδος="ΘΕΣΗ">
   <div class="μορφή-ομάδα">
   <ετικέτα για="να απαντήσουν σε"> Η ηλεκτρονική σου διεύθυνση </label>
   <τύπος εισόδου="ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ" τάξη="μορφή-έλεγχος" id="να απαντήσουν σε" όνομα="_να απαντήσουν σε" ngModel="απάντηση" aria-describedby="email Βοήθεια" κράτημα θέσης="[email protected]">
   <μικρό id="email Βοήθεια" τάξη="μορφή-κείμενο-σε σίγαση"> Το email σας δεν θα κοινοποιηθεί σε κανέναν άλλο. </small>
   </div>
   <div class="μορφή-ομάδα">
   <ετικέτα για="μήνυμα"> Το μήνυμά σου </label>
   <textarea όνομα="μήνυμα" στυλ="ύψος: 200 px" τάξη="μορφή-έλεγχος" id="μήνυμα" κράτημα θέσης="Γεια σου! Εγώ'Επικοινωνώ μαζί σας γιατί..."></textarea>
   </div>
   <τύπος κουμπιού="υποβάλλουν" τάξη="κουμπί"> υποβάλλουν </button>
   </form>
   

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

1. Εκτελέστε τον ιστότοπό σας και ανοίξτε τη σελίδα που έχει τη φόρμα επικοινωνίας. Εισαγάγετε ένα μήνυμα στη φόρμα επικοινωνίας και πατήστε υποβάλλουν.
2. Θα λάβετε το μήνυμα της φόρμας επικοινωνίας στα εισερχόμενά σας.
3. Εάν επιστρέψετε στο Formspree, κάντε κλικ στο Υποβολές αυτί. Εδώ θα μπορείτε επίσης να δείτε τα υποβληθέντα μηνύματα από τη φόρμα επικοινωνίας σας.

Το Formspree είναι μία από τις πολλές υπηρεσίες που μπορείτε να χρησιμοποιήσετε για να ενσωματώσετε μια προσαρμοσμένη φόρμα επικοινωνίας στον ιστότοπό σας. Σας επιτρέπει να αρχίσετε γρήγορα να δέχεστε τα σχόλια των χρηστών χωρίς να χρειάζεται να ανησυχείτε για τις λεπτομέρειες του backend.

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

Σχετικά με τον Συγγραφέα

Sharlene Von Drehnen (Δημοσιεύτηκαν 9 άρθρα)

Η Sharlene είναι Tech Writer στο MUO και εργάζεται επίσης με πλήρη απασχόληση στην ανάπτυξη λογισμικού. Είναι πτυχιούχος Πληροφορικής και έχει προϋπηρεσία στη Διασφάλιση Ποιότητας και στο Πανεπιστημιακό Φροντιστήριο. Η Sharlene λατρεύει τα παιχνίδια και το πιάνο.

Περισσότερα από τη Sharlene Von Drehnen