Formaloo vous permet de connecter vos formulaires à Google Sheets de deux manières : avec une synchronisation unidirectionnelle ou bidirectionnelle.

ℹ️ Quelle est la différence entre la synchronisation unidirectionnelle et bidirectionnelle avec Google Sheets ?

➡️ Avec une synchronisation Google Sheets unidirectionnelle standard, les nouvelles soumissions sont automatiquement synchronisées vers votre feuille de calcul, et vous pouvez resynchroniser le formulaire à tout moment pour transférer vers Google Sheets les modifications effectuées dans Formaloo.

🔗 Découvrez comment connecter et synchroniser votre formulaire avec Google Sheets

↔️ Avec une synchronisation Google Sheets bidirectionnelle, vous pouvez également modifier les données directement dans Google Sheets et synchroniser ces modifications vers Formaloo.

Une synchronisation bidirectionnelle peut être utile si vous :

Préférez consulter ou modifier les données dans des feuilles de calcul
Collaborez avec des équipes dans Google Sheets
Souhaitez que les modifications effectuées dans Google Sheets soient reflétées dans Formaloo sans copie manuelle

👀 Pas d’inquiétude : aucune compétence technique n’est nécessaire pour configurer une synchronisation bidirectionnelle.

Suivez simplement les étapes ci-dessous avec attention, sans en sauter aucune : cela ne prendra que quelques minutes.

➡️ Connecter votre formulaire à Google Sheets

Avant de configurer la synchronisation bidirectionnelle, vous devez d’abord connecter votre formulaire à une feuille Google Sheets depuis votre tableau de bord Formaloo :

Étape 1 : activez l’intégration Google Sheets

Cliquez sur l’icône de votre profil Formaloo en haut à droite
Ouvrez Apps & Integrations
Recherchez Google Sheets
Si nécessaire, cliquez sur Add pour activer l’intégration
Accédez à Add new integration pour créer une nouvelle connexion Google Sheets

Étape 2 : créez une nouvelle connexion

Sous Add new integration, créez une nouvelle connexion :

Sélectionnez le formulaire à synchroniser (recherchez-le par son titre ou son ID),
Saisissez le titre de la feuille (Sheet title),
Collez l’URL de la feuille (Sheet URL),
Cliquez sur Connect

ℹ️️ Copiez l’URL de votre feuille Google Sheets directement depuis la barre d’adresse de votre navigateur.

Lorsque vous copiez l’URL de la feuille, assurez-vous d’être dans la bonne feuille (si votre classeur en contient plusieurs),

Il est également essentiel que le titre de la feuille corresponde exactement entre votre feuille de calcul et les paramètres de connexion dans Formaloo :

Étape 3 : synchronisez les données du formulaire avec la feuille

Une fois l’intégration créée :

Ouvrez Active integrations,
Recherchez la nouvelle connexion,
Cliquez sur Resync data :

Cela permet de vérifier la connexion et de synchroniser toutes les soumissions existantes vers votre feuille.

ℹ️ Sous Active integrations, vous pouvez toujours :

Consulter les connexions existantes (voir leur statut et si la synchronisation bidirectionnelle est activée)
Modifier les paramètres de n’importe quelle connexion
Supprimer n’importe quelle connexion
Resynchroniser les données

🔗 En savoir plus sur la resynchronisation, la modification ou la suppression de vos connexions Google Sheets

↔️ Activer la synchronisation bidirectionnelle entre votre formulaire et Google Sheets

Étape 1 : activez la synchronisation bidirectionnelle dans Formaloo

Commencez par modifier la connexion que vous venez de créer :

Activez Enable two-way Formaloo ↔ Google Sheets sync,
Cliquez sur Update pour enregistrer les paramètres de connexion.

À ce stade, la configuration côté Formaloo est terminée.

Vous allez maintenant configurer la partie Google Sheets nécessaire à la connexion bidirectionnelle.

Étape 2 : préparez votre feuille Google Sheets pour la synchronisation bidirectionnelle

Ouvrez le fichier Google Sheets dans lequel vous souhaitez configurer la synchronisation bidirectionnelle avec Formaloo.

➔ Ouvrez Apps Script

Dans Google Sheets, accédez à Extensions > Apps Script :

➔ Ajoutez le fichier JavaScript

Cliquez sur l’icône + en haut à gauche et sélectionnez Script,
Nommez le fichier formaloo.js,
Ouvrez le fichier contenant le code,
Copiez le contenu de la section JavaScript et collez-le dans votre fichier formaloo.js

Vous pouvez également copier le code JavaScript directement ici (cliquez pour développer)

➔ Ajoutez le fichier HTML

Cliquez à nouveau sur l’icône +, en sélectionnant cette fois HTML,
Nommez ce fichier formaloo,
Ouvrez le fichier contenant le code,
Copiez le contenu de la section HTML et collez-le dans votre fichier formaloo

Vous pouvez également copier le code HTML directement ici (cliquez pour développer)

<!doctype html><html lang="en"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Formaloo</title><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><script src="https://unpkg.com/vue@3"></script><style>.container{max-width:300px;margin:0 auto}.progress{height:4px;background-color:#f3f3f3;margin:5px 0}.progress .indeterminate{background-color:#f76015;animation:indeterminate 2s infinite linear}@keyframes indeterminate{0%{left:-100%;width:100%}50%{left:100%;width:100%}100%{left:100%;width:100%}}.orange-btn{background-color:#f76015!important;color:#fff!important}footer{text-align:left;position:fixed;bottom:0;width:100%;font-size:.9rem;max-width:300px;margin:auto}footer .version{background-color:#ececec;width:100%;color:#666;padding:5px}a:visited,footer a{color:#f76015;text-decoration:underline}.warning-message{color:red;background-color:#ffe6e6;padding:1rem;border-radius:5px;margin-bottom:1rem}.warning-message li{text-align:justify;margin-bottom:.5rem}.button-group{display:inline-flex;flex-direction:row;align-items:center}.button-group button{margin-right:5px}.accordion-item{margin:3px 0;padding:1px;border:1px solid #e3e3e3;border-radius:5px}.accordion-header{padding:10px;cursor:pointer;background-color:#f9f9f9;transition:background-color .3s}.accordion-header:hover{background-color:#e0e0e0}.accordion-content{padding:0 10px;overflow:hidden;transition:max-height .3s ease;max-height:0}.accordion-content.active{max-height:300px}.accordion-content p{margin:10px 0}.faq-title{font-size:1.2rem;font-weight:700;color:#f3915b;padding:0;margin:0}@keyframes slideOut{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(100%)}}.toast.slide-out{animation:slideOut .5s forwards}.sync-status{background-color:#fff7f5;border-radius:8px;padding:10px 20px 5px 20px}.sync-header{display:flex;align-items:center;margin-bottom:12px}.sync-title{font-size:1rem;color:#f3915b;font-weight:700}.sync-details{list-style-type:none;padding:0}.sync-details li{display:flex;align-items:center;margin:5px 0;justify-content:space-between}.sync-details strong{white-space:nowrap;margin-right:5px}.loader{border:2px solid transparent;border-radius:50%;border-top-color:#fff;width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.text-success{color:green;font-weight:700}.text-danger{color:red;font-weight:700}.opacity{opacity:.5}.waiting-message{color:#b22222;background-color:#ffe6db;font-size:.9rem;font-weight:700;margin:7px auto;padding:5px 15px;border-radius:5px;text-align:left}</style><div id="app"><div class="container"><div class="row"><div class="col s12"><div class="header"><img src="https://cdn.prod.website-files.com/656ce8668244222553627f66/656ceeed63564c91d4c9c581_Formaloo%20navbar%20logo.svg" alt="Formaloo Logo" style="width:70%;height:auto;margin-top:1rem"></div></div></div></div><div class="row"><div class="col s12"><div class="button-group"><button class="btn orange-btn waves-effect waves-light" @click="submitForm" :disabled="isLoading" title="Sync data with Formaloo"><i class="material-icons left">sync</i> Sync</button> <button class="btn orange-btn waves-effect waves-light" @click="getSyncStatus" :disabled="getSyncStatusLoading" title="Get the latest sync status"><i class="material-icons" v-if="getSyncStatusLoading">hourglass_empty</i> <i class="material-icons" v-if="!getSyncStatusLoading">info</i></button> <button class="btn orange-btn waves-effect waves-light" @click="resetStyles" :disabled="isResettingStyle" title="Reformat the sheet"><i class="material-icons" v-if="isResettingStyle">hourglass_empty</i> <i class="material-icons" v-if="!isResettingStyle">imagesearch_roller</i></button></div></div><div class="col s12"><div class="waiting-message" v-if="isLoading || isResettingStyle || getSyncStatusLoading">Please wait, do not make changes.<div class="progress"><div class="indeterminate"></div></div></div></div></div><footer><div class="row"><div class="col s12"><div class="sync-status" v-if="syncStatus" :class="{'opacity': getSyncStatusLoading}"><div class="sync-header"><span class="sync-title" v-if="!getSyncStatusLoading">Latest Sync Status</span> <span class="sync-title" v-if="getSyncStatusLoading">Retrieving data ...</span></div><ul class="sync-details"><li><strong>Start Time: </strong><span>{{ formatDate(syncStatus.started_at) }}</span><li><strong>Stop Time: </strong><span>{{ syncStatus.stopped_at ? formatDate(syncStatus.stopped_at) : '-' }}</span><li><strong>Status: </strong><span :class="{

'text-success': syncStatus.status === 'succeeded',

'text-danger': syncStatus.status === 'failed'

}">{{ capitalizeFirstLetter(syncStatus.status) }} <span v-if="syncStatus.status === 'failed' && syncStatus.extra && syncStatus.extra.error"><i class="material-icons left" style="font-size:19px;margin-right:3px;cursor:pointer" :title="syncStatus.extra.error">info</i></span></span><li><strong>Duration: </strong><span v-if="syncStatus.duration > 0">{{ syncStatus.duration }} seconds</span> <span v-if="!syncStatus.duration">-</span><li><strong>Sheet Title:</strong> <span style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="sheetTitle">{{ sheetTitle }}</span></ul></div></div></div><div class="row"><div class="col s12"><div class="faq-title">FAQ</div><hr style="border:1px solid #ffd3b7;margin:10px 0"><div v-for="(faq, index) in faqs" :key="index" class="accordion-item"><div class="accordion-header" @click="toggleAccordion(index)"><span v-html="faq.question"></span> <i class="material-icons right">{{ activeIndex === index ? 'expand_less' : 'expand_more' }}</i></div><div class="accordion-content" :class="{ active: activeIndex === index }"><p v-html="faq.answer"></div></div></div></div><div class="version"><strong>Version {{ appVersion }}</strong> | <a href="https://help.formaloo.com/" target="_blank">Support</a></div></footer></div><script>const env="stage";apiKey="e2afd323b824a38e10a07d86ad5c527c2c007c0d",apiUrl="https://api.formaloo.me";const faqs=[{question:'<strong style="color: #ff2f00; font-size: 1rem;">⛔ Essential Guidelines!</strong>',answer:'\n <div style="color: #ff0000">\n 1- Do not change the column names.\n <br>\n 2- Do not modify data in the <strong>"submitted at"</strong>, and <strong>"Formaloo Record ID"</strong>\n columns.\n <br>\n 3- Avoid adding any data in cells after the "Formaloo Record ID" column.\n <br>\n 4- Please avoid from changing any data while syncing is in progress.\n </div>\n '},{question:"Sync the sheet's data.",answer:"\n After you have changed your data in the Google Sheet, click the Sync button to store your\n new changes in the corresponding form's data in Formaloo.\n "},{question:"Delete row(s).",answer:'\n 1- Select the row(s) that you want to delete.\n <br>\n 2- Right-click and select "Delete row(s)" from the context menu.\n <br>\n 3- Click the Sync button and wait for the data to sync with your Formaloo data.\n '},{question:"Check the latest sync status.",answer:"\n You can click the info button (info icon) to get the latest status information from the last\n sync you performed.\n "}],app=Vue.createApp({data:()=>({sheetId:"",sheetTitle:"",isLoading:!1,isResettingStyle:!1,getSyncStatusLoading:!1,appVersion:"",activeIndex:0,syncStatus:null,faqs:faqs}),mounted(){google.script.run.withSuccessHandler((t=>{this.appVersion=t.appVersion})).getSettings(),this.getSheetInfo(),this.resetStyles()},methods:{toBase64:t=>btoa((new TextEncoder).encode(t).reduce(((t,e)=>t+String.fromCharCode(e)),"")),getSheetInfo(t=()=>null){google.script.run.withSuccessHandler((({sheetId:e,sheetTitle:s})=>{this.sheetId=e,this.sheetTitle=s,t()})).withFailureHandler((t=>{console.error("Failed to fetch sheet info:",t)})).getSheetInfo()},showToast(t,e="green",s=1e4){M.toast({html:t,classes:e,displayLength:s,completeCallback:()=>{const t=document.querySelector(".toast");t&&(t.classList.add("slide-out"),setTimeout((()=>t.remove()),500))}})},handleErrors(t){t&&t.errors?(t.errors.general_errors?.length&&t.errors.general_errors.forEach((t=>{this.showToast(t,"red")})),t.errors.form_errors?.length&&t.errors.form_errors.forEach((t=>{this.showToast(t,"red")}))):this.showToast("An unknown error occurred.","red")},toggleAccordion(t){this.activeIndex=this.activeIndex===t?null:t},submitForm(){this.isLoading=!0,this.getSheetInfo((async()=>{if(!this.sheetId)return this.showToast("Sheet ID not found, please try again.","red"),void(this.isLoading=!1);setTimeout((()=>{this.getSyncStatus()}),1e3);const t={sheet_id:this.sheetId,sheet_title:this.sheetTitle};try{const e=await fetch(`${apiUrl}/v3/sync-with-gsheet/`,{method:"POST",headers:{"x-api-key":apiKey,"Content-Type":"application/json"},body:JSON.stringify(t)});if(e.ok){await e.json();this.showToast("Data synced successfully!","green"),this.resetStyles()}else{const t=await e.json();this.handleErrors(t)}}catch(t){console.error("Unexpected error:",t),this.showToast("An unexpected error occurred. Please try again later.","red")}finally{this.isLoading=!1,this.getSyncStatus(),google.script.run.cleanUpSheet(),google.script.run.protectColumns()}}))},formatDate(t){const e=new Date(t);return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")} ${String(e.getHours()).padStart(2,"0")}:${String(e.getMinutes()).padStart(2,"0")}:${String(e.getSeconds()).padStart(2,"0")}`},capitalizeFirstLetter:t=>t?t.charAt(0).toUpperCase()+t.slice(1):"",getSyncStatus(){this.getSyncStatusLoading=!0,this.getSheetInfo((async()=>{const t=this.toBase64(this.sheetTitle),e=`${apiUrl}/v5/two-way-sync/google-sheets/${this.sheetId}/${t}`;try{const t=await fetch(e,{method:"GET",headers:{"x-api-key":apiKey,"Content-Type":"application/json"}});if(t.ok){const e=await t.json();this.syncStatus=e||null}else{const e=await t.json();this.handleErrors(e),this.syncStatus=null}}catch(t){console.error("Unexpected error:",t),this.showToast("An unexpected error occurred. Please try again later.","red"),this.syncStatus=null}finally{this.getSyncStatusLoading=!1}}))},resetStyles(){this.isResettingStyle=!0,google.script.run.withSuccessHandler((()=>{this.isResettingStyle=!1})).protectColumns(),setTimeout((()=>{this.isResettingStyle=!1}),3e4)}}});app.mount("#app")</script>

➔ Enregistrez le projet

Renommez le projet Formaloo pour le retrouver facilement (facultatif),
Cliquez sur l’icône Save en haut de l’éditeur Apps Script :

➔ Actualisez votre feuille Google Sheets

Revenez à votre fichier Google Sheets et actualisez la page,
Après l’actualisation, un nouvel élément de menu nommé Formaloo devrait apparaître en haut de l’écran :

Étape 3 : autorisez l’application Formaloo

Cliquez sur Formaloo dans la barre de menus et sélectionnez Sync Form :

Une demande d’autorisation Google s’affiche. Veillez à :

Suivre toutes les étapes d’autorisation
Accorder toutes les autorisations demandées

⚠️ Si certaines autorisations sont ignorées ou refusées, la synchronisation risque de ne pas fonctionner correctement.

Une fois l’autorisation terminée, le panneau latéral Formaloo s’affiche dans votre feuille de calcul.

🔄 Lancez la synchronisation !

Votre formulaire étant désormais connecté à votre feuille Google Sheets, vous pouvez facilement synchroniser les données dans les deux sens.

➔ La plupart des modifications effectuées dans Formaloo sont automatiquement synchronisées avec la feuille Google Sheets connectée. Si nécessaire, vous pouvez toujours utiliser Re-sync data depuis Active integrations :

➔ Pour transférer vers Formaloo les modifications effectuées directement dans votre feuille Google Sheets, ouvrez le panneau latéral Formaloo et cliquez sur le bouton

.

Attendez la fin de la synchronisation pour voir les modifications reflétées dans Formaloo.

⚠️ Veillez à n’effectuer aucune modification pendant que la synchronisation est en cours.

Synchronisation des nouvelles soumissions :

Formaloo ➔ Google Sheets
Toutes les nouvelles soumissions (envoyées par les répondants, importées ou créées manuellement dans le tableau de bord Formaloo) sont automatiquement synchronisées avec votre feuille Google Sheets.
Google Sheets ➔ Formaloo
Si vous ajoutez une nouvelle ligne directement dans votre feuille Google Sheets, veillez à cliquer sur le bouton
pour synchroniser les données depuis le panneau latéral Formaloo. Une nouvelle soumission sera créée dans Formaloo une fois la synchronisation terminée.

Synchronisation des soumissions supprimées :

Formaloo ➔ Google Sheets
Si vous supprimez une soumission dans Formaloo, la ligne correspondante est automatiquement supprimée de votre feuille Google Sheets.
Google Sheets ➔ Formaloo
Si vous supprimez une ligne dans votre feuille Google Sheets, veillez à cliquer sur le bouton
pour synchroniser les données depuis le panneau latéral Formaloo. La soumission sera supprimée de votre tableau de bord Formaloo une fois la synchronisation terminée.

Synchronisation des modifications des soumissions existantes :

Formaloo ➔ Google Sheets
Toutes les modifications apportées aux soumissions existantes dans Formaloo sont automatiquement synchronisées avec votre feuille Google Sheets.
Google Sheets ➔ Formaloo
Si vous avez effectué des modifications directement dans votre feuille Google Sheets, veillez à cliquer sur le bouton
pour synchroniser les données depuis le panneau latéral Formaloo. Les modifications seront transférées vers Formaloo une fois la synchronisation terminée.

Synchronisation des nouveaux champs de formulaire :

Formaloo ➔ Google Sheets
Si vous ajoutez un nouveau champ à votre formulaire Formaloo, une nouvelle colonne apparaît automatiquement dans votre feuille Google Sheets connectée.
Google Sheets ➔ Formaloo
Si vous ajoutez une nouvelle colonne dans votre feuille Google Sheets, cela ne crée pas de nouveau champ dans votre formulaire Formaloo. Côté Google, la synchronisation bidirectionnelle fonctionne comme une synchronisation des données uniquement.

Synchronisation des champs de formulaire supprimés :

Formaloo ➔ Google Sheets
Si vous supprimez un champ de votre formulaire Formaloo, vous devez resynchroniser manuellement les données (Re-sync data) avec votre feuille Google Sheets pour que la modification soit prise en compte. Contrairement à l’ajout ou à la modification de champs, les suppressions ne sont pas synchronisées automatiquement.
Google Sheets ➔ Formaloo
Vous ne pouvez pas supprimer un champ de formulaire en supprimant une colonne dans Google Sheets. Même si vous cliquez sur
dans votre feuille Google Sheets, la colonne y sera rajoutée tant que le champ existe toujours dans le formulaire connecté.

⚠️ Consignes essentielles pour la synchronisation bidirectionnelle avec Google ⚠️

NE modifiez AUCUNE donnée pendant la synchronisation
Pendant la synchronisation, évitez toute modification de la feuille afin de prévenir d’éventuelles erreurs.
NE modifiez PAS les noms de colonnes
Les noms de colonnes de votre feuille doivent rester exactement tels qu’ils ont été configurés. Renommer des colonnes peut perturber la synchronisation.
NE modifiez PAS les colonnes système
Évitez de modifier les données des colonnes Formaloo, indispensables au processus de synchronisation :
- Generated Files
- Submitted at
- Formaloo Record ID
ÉVITEZ d’ajouter des données au-delà de la colonne « Formaloo Record ID »
Les données supplémentaires saisies au-delà de cette colonne risquent de ne pas se synchroniser correctement et de perturber les mises à jour des données.

🚫 Types de champs non pris en charge par la synchronisation Google Sheets

La plupart des champs Formaloo peuvent être synchronisés avec Google Sheets. Toutefois, les champs en lecture seule suivants ne sont pas pris en charge par la synchronisation Google Sheets :

Nouvelle page (New Page)
Intégration (Embed)
Contenu (Content)
Séparateur de section (Section Divider)
Vidéo (Video)

Options supplémentaires de synchronisation bidirectionnelle

➔ Vous pouvez remettre en forme votre feuille Google Sheets à tout moment depuis le panneau latéral Formaloo :

Comme Formaloo n’a pas accès aux options de mise en forme de Google Sheets, les données nouvellement synchronisées ou les champs ajoutés peuvent parfois désorganiser la mise en page de la feuille.

Utilisez le

bouton du panneau latéral Formaloo. Il vous permet d’appliquer manuellement un style cohérent à votre feuille, afin qu’elle reste claire et lisible, sans affecter le processus de synchronisation.

➔ Vous pouvez toujours vérifier le statut de votre dernière synchronisation :

Cliquez sur l’

icône du panneau latéral Formaloo pour consulter les détails de la synchronisation la plus récente et vérifier que les modifications ont bien été appliquées.

Comment configurer la synchronisation bidirectionnelle entre Formaloo et Google Sheets