Software Solutions Company

Writing Pad in Django

Jan. 3, 2023
Author: Asif Shahzad | Full Stack Web Developer

Writing using pen is a good experience when the requirment is to save signature or drawing. In this tutorial, jSignature is used to save the signature in database for further use.


1. Installation

pip install django-jsignature


2. Add in

# Add globally



3. Make Model

from django.db import models
from jsignature.fields import JSignatureField

class SignatureModel(models.Model):
    signature = JSignatureField()


4. Add in

class TestForm(forms.ModelForm):
    signature = JSignatureField(widget=JSignatureWidget(jsignature_attrs={'color': '#e0b642', 'height': '200px'}))
    class Meta:
        model = Test
        fields = ['signature']


5.  Add in

def test(request):
    form = TestForm(request.POST or None)
    if form.is_valid():
        signature = form.cleaned_data['signature']

        mydata=Test( signature=signature)  
        my_sig = Test.objects.first()     
    return render(request,'main/test.html',{'form': form,'my_sig':my_sig})


6. Use in your template for entering signature

{{ }}
<form action="" method="post">
    {{ form }}
    <input type="submit" value="Save" />
    {% csrf_token %}


7. Use in template to display signature

{% load jsignature_filters %}

<img src="{{ x.signature|signature_base64 }}" alt="{{ x}}" />


8. Include updated the jQuery library in Head tag

<script src=""></script>


I hope this will help!

Please share this page to friends.

Asif Shahzad | Full Stack Web Developer

Welcome to our Software Solutions Company, where we excel in transforming ideas into tangible realities. We have expertise in developing online management systems, website designing & development, software solutions, mobile app development, e-commerce solutions and graphic designing. We provide 24/7 services.

Popular Posts

Call To Action

Do you Need a website?

Order Now