Comment on page
Graphic customization
You want to save your consent register but you also want the checkbox to fit with your graphical charter ? No problem !
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.
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>
</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>
</label>
<a href="#showConsentDetails" class="AxeptioConsentDetailsLink">know more</a>
</div>
</div>
Congrats ! You can now adjust checkboxes to your graphic style