Mask input

_head.html

{% load static %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/js/scripts.js' %}">

dashboard.html

{% extends 'base.html' %}
{% block title %}Cadastrar contato | {% endblock %}
{% block content %}
{% include 'parciais/_messages.html' %}

<div class="container">
    <h2 class="mt-3 mb-3">Cadastre seus contatos aqui.</h2>
    <form action="{% url 'dashboard' %}" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <table class="table">
            {{ form }}
            <tr>
                <td>
                    <button type="submit" class="btn btn-primary">Enviar</button>
                </td>
            </tr>
        </table>
    </form>
</div>
{% endblock %}

models.py

from django.db import models
from django.forms import widgets
from django.forms.widgets import TextInput
from contatos.models import Contato
from django import forms

class FormContato(forms.ModelForm):
    class Meta:
        model = Contato
        exclude = ()
        widgets = {
            'telefone': TextInput(attrs={
                'id':'telefone-mask'
            }),
        }

scripts.js

document.getElementById('telefone-mask').addEventListener('blur', function (e) {
    var x = e.target.value.replace(/\D/g, '').match(/(\d{3})(\d{3})(\d{4})/);
    e.target.value = '(' + x[1] + ') ' + x[2] + '-' + x[3];
});