Personnalisation Graphique

Vous souhaitez stocker le registre de consentement mais vous souhaitez que la check-up respecte votre charte graphique ? Aucun soucis nous avons la solution parfaite.

1. Présentation vidéo

2. Exemple concret

Dans le cas d'un de votre formulaire de contact vous collectez des données personnelles telles que le nom, le prénom, le mail et vous souhaitez que ce formulaire soit conforme à la réglementation et alimente votre registre de traitements.

Par contre, vous souhaitez vraiment que les checkbox correspondent à votre charte graphique afin de ne pas nuire à votre expérience utilisateur ? Aucun soucis nous vous expliquons comment faire en détail. Vous avez un formulaire de ce type et les checkbox vont alimenter des outils internes/externes afin d'effectuer des traitements de suivi de clients, d'envoie de newsletters, d'informations ou autres

Vous avez simplement à parémetrer vos checkbox dans le back office d'Axeptio puis à les intégrer en mode custom sur votre site comme vu précédemment.

Créer une checkbox MarketingCas 1 : Créer une nouvelle checkbox Axeptio

Vous pourrez ensuite choisir le design que vous préférez en adaptant simplement le CSS

Vous pourrez donc la paramétrer comme vous souhaitez en modifiant le CSS et l'HTML, voici un exemple :

.formulaire-demo label{
    cursor: pointer;  
    display: inline;
  }
  
  /*cacher la checkbox existante*/
  .formulaire-demo1 .AxeptioConsentCheckbox input[type=checkbox], .formulaire-demo2 .AxeptioConsentCheckbox input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
  }
  
  /*nouveau design de la checkbox*/
  .formulaire-demo1 .AxeptioConsentCheckbox input[type=checkbox] {
    border-radius: 2px;
    height: 15px;
    width: 15px;
    background: #fff;
    border: 1px solid #ccc;
    margin-right: 6px;
    margin-bottom: -2px;
    cursor: pointer;
  }
  
  /*nouveau design de la checkbox COCHÉE*/
  .formulaire-demo1 .AxeptioConsentCheckbox input[type=checkbox]:checked {
    background: #222;
  	position: relative;
 	 &:before {
  	  font-family: FontAwesome;
  	  content: '\f00c';
  	  display: block;
  	  color: grey;
  	  font-size: 13px;
  	  position: absolute;
 	 }
  }
  
  /*nouveau design du texte*/
  .formulaire-demo1 .AxeptioConsentDetailsText {
    font: 15px Arial;
  }
  
  /*nouveau design du lien*/
  .formulaire-demo1 .AxeptioConsentDetailsLink {
    font: bold 11px Arial;
  	text-decoration: none;
  	background-color: #EEEEEE;
  	color: #333333;
  	padding: 2px 6px 2px 6px;
    margin-bottom: -6px;
  }

Lorsque vous appelez la fonction axeptio.createConsentCheckbox, voici le code généré par Axeptio

<div class="formulaire-demo formulaire-demo1">
<div class="ConsentCheckbox__ConsentCheckboxStyle-n0ywli-0 gctuyJ AxeptioConsentCheckbox">
	<label>
  	<input type="checkbox" required="required">
		<span class="AxeptioConsentDetailsText">J'accepte de recevoir la newsletter</span>&nbsp;
  </label>
	<a href="#showConsentDetails" class="AxeptioConsentDetailsLink">en savoir plus</a> 
</div>
</div>
<div class="formulaire-demo formulaire-demo2">
<div class="ConsentCheckbox__ConsentCheckboxStyle-n0ywli-0 gctuyJ AxeptioConsentCheckbox">
	<label>
  	<input type="checkbox" required="required">
		<span class="AxeptioConsentDetailsText">Je souhaite recevoir la newsletter</span>&nbsp;
  </label>
	<a href="#showConsentDetails" class="AxeptioConsentDetailsLink">tout savoir</a> 
</div>
</div>

Félicitation ! Vous pouvez maintenant adapter les checkbox au style graphique que vous souhaitez obtenir