Custom Form integration to Google Forms

Δημιουργία Google Form

Αρχικά για να δημιουργήσουμε ένα νέο Google Form, ερχόμαστε εδώ.

Στη συνέχεια δημιουργούμε την φόρμα με όλα τα πεδία που χρειαζόμαστε.
Παράδειγμα φόρμας:


 

Για να μπορέσουμε να βρούμε όλα τα πεδία που αντιστοιχούν πρέπει να ανοίξουμε την φόρμα σε preview mode πατώντας το ματάκι πάνω δεξιά

 

Συλλογή Δεδομένων

Στη συνέχεια αφού ανοίξουμε την φόρμα σε Preview Mode χρειαζόμαστε δυο πράγματα για να μπορέσουμε να τη στήσουμε σε custom περιβάλλον και να στέλνει τις απαντήσεις εκεί.
1. Χρειαζόμαστε το action attribute(Που θα ποστάρουμε την φόρμα δηλαδή)


2. Και χρειαζόμαστε και απ'ολες τις επιλογές μας τα name entries


Αυτό που μένει να κάνουμε είναι να ορίσουμε το ίδιο name entry ακριβώς όπως φαίνεται εδώ στην custom φόρμα που φτιάχνουμε εμείς.
Όταν θα κάνουμε το POST request ουσιαστικά δίνουμε στην φόρμα το entry.66983330 σαν name και το adafasd σαν value και έτσι δημιουργείτε η απάντηση αυτόματα.
Στο παραπάνω παράδειγμα ουσιαστικά βλέπουμε ένα πεδίο με ελεύθερο κείμενο οπότε ποστάρουμε στη φόρμα το name entry.66983330 και το value adafasd και έτσι δηλώνεται η απάντηση κατευθείαν.
Στις περιπτώσεις πολλαπλής επιλογής η φόρμα που θα έχουμε φτιάξει θα έχει κάποιες προκαθορισμένες απαντήσεις στα values.Αν εμείς προσπαθήσουμε να στείλουμε την φόρμα με ένα value που δεν υπάρχει στην φόρμα δεν θα μπορέσει η φόρμα να το δεχτεί και θα πετάξει error.
Παρακάτω θα δείτε ένα παράδειγμα custom φόρμας και πως εμφανίζονται στο τέλος τα αποτελέσματα.
Βλέπετε όλα τα πεδία και στο inspect θα δείτε όλα τα entries και όλα τα values.


Implementation

Για την αποστολή λοιπόν αυτών των αρχείων χρειάζεται να φτιάξουμε parameters και να τα postαρουμε στην φόρμα ώστε να στείλει τις απαντήσεις.
Στην δική μου περίπτωση έχω φτιάξει ένα variable req


και για κάθε τσεκαρισμένο element φτιάχνω ένα entry στο array 

Στη συνέχεια φτιάχνω τα parameters έτσι όπως θέλω να τα στείλω και τα βάζω μέσα στο url που θα κάνω POST 


Η τελική μορφή που έχω είναι αυτή:



Ένα ολοκληρωμένο παράδειγμα υπάρχει στο repo του barathome
Συγκεκριμένα η liquid βρίσκεται σε αυτό το αρχείο: FeedbackForm
Την js θα τη βρείτε σε αυτό το αρχείο: App.js


Was this article helpful?