Comment créer un formulaire personnalisé dans le volet de droite de Google Sheets

par

Dans cet article, découvrez comment créer un formulaire personnalisé dans le volet de droite de Google Sheets pour une saisie de données simplifiée.

Ce processus non seulement facilite la collecte de données structurée mais accélère également l’entrée d’informations, tout en permettant une personnalisation poussée des interfaces utilisateur.

Apprenez à tirer parti de cette méthode pour optimiser votre gestion de données dans Google Sheets.

Étape 1 : Créer un script Google Apps Script

Tout d’abord, ouvrez votre feuille de calcul Google Sheets et accédez à Extensions > Apps Script. Cela ouvrira l’éditeur de script où vous pouvez ajouter du code pour étendre les fonctionnalités de votre feuille de calcul.

Étape 2 : Écrire le code du formulaire

Dans l’éditeur Apps Script, vous allez créer un fichier HTML pour le formulaire. Cliquez sur Fichier > Nouveau > Fichier HTML et nommez-le, par exemple, Form.html. Dans ce fichier, insérez le code HTML pour votre formulaire. Voici un exemple simple :

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <label for="nom">Nom :</label>
  <input type="text" id="nom">
  <button onclick="soumettreFormulaire()">Ajouter</button>

  <script>
    function soumettreFormulaire() {
      var nom = document.getElementById('nom').value;
      google.script.run.ajouterAFeuille(nom);
    }
  </script>
</body>
</html>

Étape 3 : Ajouter la fonction pour écrire dans la feuille de calcul

Dans le même projet Apps Script, ajoutez une fonction pour prendre les données du formulaire et les écrire dans votre feuille de calcul. Par exemple :

function ajouterAFeuille(nom) {
  var feuille = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  feuille.appendRow([nom]);
}

Cette fonction addToSheet prend une entrée (dans ce cas, le nom) et l’ajoute à la première colonne de la feuille active.

Étape 4 : Créer une fonction pour ouvrir le formulaire

Toujours dans Apps Script, ajoutez une fonction pour ouvrir le formulaire dans le volet de droite :

function ouvrirFormulaire() {
  var html = HtmlService.createHtmlOutputFromFile('Formulaire')
      .setTitle('Mon Formulaire')
      .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

Cette fonction crée une nouvelle instance de votre formulaire et le définit pour s’afficher dans le volet de droite de Google Sheets.

Étape 5 : Ajouter une commande de menu

Pour faciliter l’accès à votre formulaire, vous pouvez ajouter une commande de menu personnalisée à votre feuille de calcul :

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('Mon Formulaire')
      .addItem('Ouvrir le formulaire', 'ouvrirFormulaire')
      .addToUi();
}

La fonction onOpen crée un nouveau menu intitulé « Mon Formulaire » dans la barre de menu de Google Sheets, avec une option pour ouvrir votre formulaire personnalisé.

Pour allez plus loin

Développer un formulaire personnalisé dans Google Sheets permet une collecte de données plus structurée et rapide. Les exemples ci-dessus montrent comment intégrer un formulaire dans Google Sheets. J’ai développé une version avancée qui inclut des champs supplémentaires comme les adresses, codes postaux, et numéros de téléphone. Cette version enrichit nettement l’interface utilisateur.

Améliorez l’interface

J’ai également optimisé l’aspect visuel du formulaire. Grâce à des ajustements minutieux, ce formulaire avancé montre comment utiliser les standards web pour améliorer l’expérience utilisateur dans Google Sheets.

Voici les améliorations :

  • Champs supplémentaires : Les utilisateurs entrent des informations plus détaillées, adaptant le formulaire à divers usages.
  • Style amélioré : Des ajustements CSS rendent le formulaire plus agréable visuellement.
  • Interaction plus intuitive : Un écouteur d’événements pour la touche Entrée simplifie la soumission des données.

Proposition d’accompagnement

Je suis enthousiaste à l’idée de partager ce développement avec vous.

Si vous cherchez une solution sur mesure ou plus d’informations sur ce formulaire personnalisé dans Google Sheets, contactez-moi.

À l’Atelier informatique, nous nous engageons à créer des solutions innovantes adaptées à vos besoins. Pour discuter de vos projets, contactez-moi à contact@atelier-informatique.com. Transformons ensemble vos idées en réalité.

Laisser un commentaire