Graphic customization

You want to save your consent register but you also want the checkbox to fit with your graphical charter ? No problem !

1. Video presentation

2. Concrete Example

You have a contact form that collects personal datas such as name, first name, or mail, and you want this from to be in accordance with reglementation and to fill your consent register.

But you also want the checkboxes to fit with your graphical charter to not ruin the user experience ?

No problem, here is how .

You have this type of form and checkboxes will feed internal/external tools to process newsletters, client tracking etc

Simply configure your checkbox in Axeptio back office then integrate them in custom mode on your website as shown before.

Create a Marketing checkboxCase 1 : Create a new Axeptio checkbox

You can now choose the design you like by adapting the CSS

You will be able to configure it as you like by modifying the CSS and HTML, here is an example :

.formulaire-demo label{
    cursor: pointer;  
    display: inline;
  }
  
  /*hide existing checkbox*/
  .formulaire-demo1 .AxeptioConsentCheckbox input[type=checkbox], .formulaire-demo2 .AxeptioConsentCheckbox input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
  }
  
  /*new checkbox design*/
  .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;
  }
  
  /*new checkbox design CHECKED*/
  .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;
 	 }
  }
  
  /*new text design*/
  .formulaire-demo1 .AxeptioConsentDetailsText {
    font: 15px Arial;
  }
  
  /*new link design*/
  .formulaire-demo1 .AxeptioConsentDetailsLink {
    font: bold 11px Arial;
  	text-decoration: none;
  	background-color: #EEEEEE;
  	color: #333333;
  	padding: 2px 6px 2px 6px;
    margin-bottom: -6px;
  }

When you call the function axeptio.createConsentCheckbox, here is the code generated by Axeptio

<div class="formulaire-demo formulaire-demo1">
<div class="ConsentCheckbox__ConsentCheckboxStyle-n0ywli-0 gctuyJ AxeptioConsentCheckbox">
	<label>
  	<input type="checkbox" required="required">
		<span class="AxeptioConsentDetailsText">I agree to receive to newsletter</span>&nbsp;
  </label>
	<a href="#showConsentDetails" class="AxeptioConsentDetailsLink">know more</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">I agree to receive the newsletter</span>&nbsp;
  </label>
	<a href="#showConsentDetails" class="AxeptioConsentDetailsLink">know more</a> 
</div>
</div>

Congrats ! You can now adjust checkboxes to your graphic style