Comment « hacker » un formulaire Google ?

google docsLes formulaires de google sont un excellent moyen de publier un questionnaire en ligne. En quelques minutes, vous pouvez créer simplement des formulaires pour par exemple des inscriptions à des événements, des formulaires de contacts, ou d’enquêtes,..

Mais le résultat est un peu brut de fonderie malgré les nombreux thèmes proposés par google.

Il est impossible, par exemple, d’ajouter le logo de votre entreprise ou appliquer les couleurs de votre site, …

Je vous propose une solution qui peut solutionner ces limitations.

Attention :

 

  • je ne suis pas responsable, si Google modifie son service ou son système de codage
  • Un autre point, je n’ai pas trouvé de texte sur la réglementation concernant l’utilisation des codes des formulaires.

La méthode est relativement simple.

Il est bien sur nécessaire d’avoir un compte Google.

  1. Créer un nouveau une nouvelle feuille de calcul dans Google Drive.
  2. Double cliquer sur « Feuille de calcul sans titre » pour renommer votre formulaire.
  3. Dans le menu « Outils », choisir « Créer un formulaire ».02 creer un formulaire
  4. A vous de jouer et de choisir ce que vous souhaitez de poser comme question.

    03 renseigner les champs du formulaire

    Vous pouvez choisir entre des champs texte court, texte long,…

    04 differents types de champs

  5. Une fois le formulaire terminé, enregistrer et fermer la fenêtre.Vous remarquez que dans la feuille de calcul chaque champ du formulaire est devenu une colonne06 champs dans les colonnes

    et un nouveau menu a été ajouté « Formulaire ». Le nombre a coté de « Formulaire » correspond au nombre de réponses.

  6. Aller dans le menu « Formulaire », choisir « Accéder au formulaire en ligne »07 acceder au formulaire en ligneet voilà le résultat :05 exemple de formulaire
  7. Maintenant mettons les mains dans le cambouis… Faire un clic droit sur le formulaire pour obtenir le code source.Exemple avec Chrome :09 obtenir code source
  8. La partie qui nous concerne est comprise entre <form action et </form>.Copier cette partie dans votre éditeur HTML.Et à vous de jouer pour rendre ce formulaire conforme à votre style.

    Les champs sont derrières les balises qui contiennent les class suivantes :

    • class= »ss-q-short » pour les textes simples ;
    • class= »ss-q-long » pour les textes longs ;
    • class= »ss-q-radio » pour les boutons ;
    • class= »ss-q-checkbox » pour les cases à cocher

    Tout le reste peut être modifié,

  9. Publier votre formulaire

Voilà le résultat que je vous propose :

Votre navigateur ne support pas les iframes.

 

Il reste à améliorer la page de confirmation et la vérification des champs obligatoires.

Soyez le premier à commenter

Laisser un commentaire