Comment modifier les styles avec du css dans un Google Form
"pouvoir mettre deux champs ou plus sur la même ligne pour gagner de la place"- Google Docs Editors Community
On vous a demandé d'adapter un formulaire au design de votre organisation. Or les options de thème de Google Forms ont leurs limites. Vous pouvez changer l'image d'en-tête, les couleurs et les polices, mais les questions restent sur une seule colonne. La barre de titre et les espacements restent tels que Google les a définis. Intégrer le formulaire sur votre site web n'aide pas, car le CSS de votre site ne peut pas atteindre l'intérieur de l'iframe. Avec Formfacade, vous pouvez passer le formulaire sur deux colonnes, régler ses couleurs et ajouter votre propre CSS pour le reste.
Voici trois façons de changer l'apparence d'un formulaire Google Forms, avec les limites de chacune.
Le besoin :
Pendant la crise du COVID-19, le Centre of Small & Medium Enterprises organise régulièrement des formations en ligne pour aider les PME à se préparer, elles et leurs employés, aux mesures de sécurité à la réouverture. Le centre voulait créer un formulaire d'inscription aux formations propre et simple, comme celui-ci.
1. Personnalisez le thème dans Google Forms
Google Forms vous permet de choisir une image d'en-tête, une couleur de thème, une couleur de fond et des polices. La limite : les questions restent sur une seule colonne et vous ne pouvez pas modifier la barre de titre, les espacements ni le bouton à part. Si vous intégrez le formulaire sur votre site web, le CSS de votre site ne peut pas atteindre l'intérieur de l'iframe.
2. Créez votre propre formulaire HTML
Écrivez sur votre site web un formulaire HTML qui envoie chaque réponse à votre formulaire Google Forms, en utilisant l'entry ID de chaque question.
La limite : vous devez trouver chaque entry ID, mettre le code à jour dès que le formulaire change et gérer vous-même les erreurs.
3. Utilisez Formfacade et votre propre CSS
Formfacade les aide à donner à ce formulaire Google Forms l'apparence qu'ils avaient imaginée.
Je vais vous montrer la transformation du formulaire, avec un guide détaillé étape par étape. Suivez-moi pour personnaliser le formulaire et ajouter du CSS à ses éléments afin de reproduire le style.
Étape 1 : préparer le formulaire pour la personnalisation
- Cliquez sur Créez votre formulaire, nommez votre formulaire, cliquez sur Build form puis sur Proceed.
- Cliquez sur l'onglet "Preview"
2. Cliquez sur l'onglet "LAYOUT" dans la barre latérale et sélectionnez "Comfortable" pour passer à une mise en page sur 2 colonnes. Cliquez sur "Apply to this form".
3. Dans la même barre latérale, cliquez sur l'onglet "THEME" pour changer les couleurs du formulaire. Le bouton "Apply to all forms" applique les couleurs à tous vos formulaires.
4. Regardez votre formulaire se transformer avec Formfacade et comparez-le avec le formulaire d'exemple.
Presque terminé, non ? Mais attendez !
Il reste quelques petits ajustements à faire sur le titre
- Le titre doit être en rouge cramoisi - code hexadécimal #DC143C ou rgb(220,20,60)
- Le titre doit avoir un fond en bande blanche qui s'étend d'un bord à l'autre.
- La description doit rester en noir. Et être centrée.
- Les marges intérieures (padding) doivent être ajustées partout.
5. Utilisons "Inspecter" pour voir quel CSS convient.
6. J'ai fait ces ajustements dans "Inspecter" et je suis arrivé au code CSS ci-dessous.
.ff-title {
color:#DC143C !important;
padding: 20px !important;
background-color: white;
position: relative;
transform: translateX(-4%);
width: 109%;
}
.ff-description {
padding-top: 20px !important;
align: center !important;
}
.ff-form {
padding: 0px 30px !important;
}
.ff-compose {
padding: 0px !important;
background: none !important
}
.ff-section {
padding-top: 0px !important;
}7. Ajoutons maintenant le code à mon formulaire. Je clique sur "EDIT", sur le titre du formulaire, puis sur l'icône ⚙️ et sur l'onglet "Advanced" pour l'ajouter dans "Custom CSS". Cliquez sur "Save".
8. Regardez la vidéo ci-dessous pour voir comment le formulaire se transforme quand j'ajoute le code règle par règle.
Et voici le formulaire final. Superbe, non ?
Que pensez-vous de ce genre de personnalisation ? Montrez-nous vos créations en nous écrivant à support@formfacade.com.
Bonus !
Voici un tableau qui compare les personnalisations possibles avec Google Forms et avec Formfacade.
1. Repérez dans ce tableau la personnalisation que vous voulez pour votre formulaire ou votre champ.
2. Cliquez sur l'article lié pour suivre un tutoriel détaillé étape par étape et obtenir le design voulu.
Donnez à votre formulaire Google Forms une belle allure sur votre site web. Bonne création !
| Formulaire | Google Forms | Formfacade |
|---|---|---|
| Mise en page | Une colonne standard | Plusieurs colonnes |
| Couleur de fond/du thème | Oui | Oui |
| Couleur du bouton | Non | Oui |
| Champs du formulaire | Non | Oui |
| Modifier les réglages de police | ||
| Couleur de police | ? | Non |
| Style de police | Oui | Oui |
| Styles CSS avancés | Non | Oui |
| Champs | ||
| Modifier le texte indicatif | Non | Oui |
| Apparence (masqué/lecture seule) | Non | Oui |
| Changer le nom de la question ? | Non | Oui |
| Préremplissage | Oui | Oui |
| Champs calculés | Non | Oui |
| Personnalisation avancée (mise en forme du texte - gras, italique) | Non | Oui |
| Suivi des conversions | Non | Oui |
| Intégration Hotjar | Non | Oui |
| Envoi de fichiers | Drive, connexion requise | Oui |
Résumé
Le thème de Google Forms change les couleurs et les polices, mais pas la mise en page ni les espacements. Le CSS de votre site web ne peut pas atteindre un formulaire dans une iframe. Avec Formfacade, vous changez la mise en page et les couleurs et ajoutez votre propre CSS pour ajuster le reste. Créez votre formulaire et suivez les étapes ci-dessus. Si vous avez des questions, écrivez à l'assistance.
Dernière mise à jour :