Gérer les styles

Vous pouvez customiser 2 paramètres du bouton de contact généré par Symplicy :

  • le style de bouton
  • le texte affiché dans le bouton

1 Ajouter le script de customisation

Pour les customiser, il faut attacher un objet SymplicyOptions à la window de la page.

Cet objet accepte 2 propriétés, correspondant aux 2 paramètres de customisation :

  • style pour customiser le style
  • locales pour customiser le texte

Pour déclarer ces paramètres, vous devez placer un script avant le script principal :

<script>
  window.SymplicyOptions = {
    styles: {
      // options de style
    },
    locales: {
      // options de texte
    }
  };
</script>

2 Modifier le style

Vous pouvez modifier plusieurs propriétés du bouton, en séparant les paramètres par des virgules :

  • padding l’espace entre les bords et le texte
  • border les bordures
  • borderRadius l’arrondi des contours
  • backgroundColor la couleur du bouton
  • color la couleur du texte
  • fontFamily la police de caractère
  • fontSize la taille du texte
  • fontWeight la graisse du texte

Si vous souhaitez conserver une de ces valeurs par défaut, il vous suffit d’omettre la propriété. La valeur par défaut s’appliquera.

Exemple :

<script>
  window.SymplicyOptions = {
    styles: {
      padding: '8px 12px',
      borderRadius: '4px',
      backgroundColor: '#E68A6F',
      color: '#ffffff',
      fontFamily: 'Source Sans Pro',
      fontSize: '14px',
      fontWeight: '700'
    }
  };
</script>

3 Modifier le texte

Vous pouvez modifier le texte affiché dans le bouton, en séparant les différentes langues par des virgules :

  • en anglais
  • fr français
  • nl néerlandais
  • de allemand
  • es espagnol
  • it italien
  • …

Symplicy identifiera automatiquement la langue de la page et affichera directement la bonne traduction.

 

Note : actuellement, les formulaires sont exclusivement en français, anglais et néerlandais.

 

Exemple :

 

<script>
  window.SymplicyOptions = {
    locales : {
      fr: 'Veuillez répondre à quelques questions',
      en: 'Please answer a few questions',
      nl: 'Beantwoord enkele vragen',
      ...
    }
  };
</script>