siga como ta na documentação:
coloque isso no seu 'head'
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js'></script>
no seu input vai ficar assim:
<input id="cpf" name="cpf" type="text" class="cpf" value="{variavel cpf}">
e no final coloca isso
<script>
$(document).ready(function(){
$('.date').mask('00/00/0000');
$('.time').mask('00:00:00');
$('.date_time').mask('00/00/0000 00:00:00');
$('.cep').mask('00000-000');
$('.phone').mask('(91) 00000-0000');
$('.phone_with_ddd').mask('(00) 0000-0000');
$('.phone_us').mask('(000) 000-0000');
$('.mixed').mask('AAA 000-S0S');
$('.cpf').mask('000.000.000-00', {reverse: true});
$('.cnpj').mask('00.000.000/0000-00', {reverse: true});
$('.money').mask('000.000.000.000.000,00', {reverse: true});
$('.money2').mask("#.##0,00", {reverse: true});
$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
translation: {
'Z': {
pattern: /[0-9]/, optional: true
}
}
});
$('.ip_address').mask('099.099.099.099');
$('.percent').mask('##0,00%', {reverse: true});
$('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});
$('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});
$('.fallback').mask("00r00r0000", {
translation: {
'r': {
pattern: /[\/]/,
fallback: '/'
},
placeholder: "__/__/____"
}
});
$('.selectonfocus').mask("00/00/0000", {selectOnFocus: true});
});
</script>
ou tente isso:
$string = "33322255588";
$string1 = substr("$string", 0, 3);
$string2 = substr("$string", 3, 3);
$string3 = substr("$string", 6, 3);
$string4 = substr("$string", 9, 10);
echo $string1.'.'.$string2.'.'.$string3.'-'.$string4;
pra salvar no banco vc tem q tirar a formatação então vc pode fazer isso:
$string = "333.222.555-88";
$result = explode('.', $string );
$result2 = explode('-', $result[2] );
$result3 = $result[0].$result[1].$result2[0].$result2[1];
echo $result3;