Comment personnaliser le style du bouton d'envoi de fichiers avec du CSS ?

Quand vous mettez un formulaire sur votre propre site, le bouton d'envoi doit ressembler à vos autres boutons. Google Forms garde son propre style pour le bouton d'envoi de fichiers et n'a pas de place pour vos styles. Un Google Form intégré se trouve dans un iframe que le CSS de votre site ne peut pas atteindre. Avec Formfacade, vous écrivez du CSS pour la classe addfile dans l'onglet Advanced des paramètres du formulaire : fond, bordure, police et couleur. Le bouton d'envoi de votre formulaire s'adapte et les réponses arrivent toujours dans votre Google Form.

C'est parti. Créez votre formulaire et suivez les étapes ci-dessous.

Comment écrire le CSS personnalisé ?

  • Sur la page qui s'ouvre, nommez votre formulaire, cliquez sur Create form et cliquez sur Proceed.
  • Si la page demande "Do you want to preview this form?", cliquez sur No.
Les onglets Edit, Preview, Share et Responses, avec Edit mis en évidence
  • Dans la page Edit, cliquez sur le titre du formulaire, puis sur l'icône d'engrenage.
Le titre du formulaire dans l'onglet EDIT, avec EDIT, le titre et son engrenage mis en évidence
  • Sélectionnez l'onglet Advanced et ajoutez le CSS personnalisé.
Les paramètres du formulaire avec l'onglet Advanced et la case Custom CSS mis en évidence
  • Vous pouvez changer la couleur de fond, la bordure, la police, la couleur du texte, etc. en appliquant des styles CSS à la classe "addfile" comme ci-dessous, puis cliquez sur le bouton Save.
La case Custom CSS avec des styles pour la classe addfile et le bouton Save mis en évidence
Le bouton d'envoi de votre formulaire prend vos styles.

Résumé

Google Forms n'offre aucun moyen de changer le style de son bouton d'envoi, qui détonne donc sur votre site. Avec Formfacade, vous écrivez du CSS pour la classe addfile dans les paramètres Advanced du formulaire et le bouton prend vos styles. Créez votre formulaire et suivez les étapes ci-dessus. Pour toute question, écrivez à l'assistance.

Dernière mise à jour :