Django Error message displays behind text box - django

Question

I have a custom error validation displayed, however, the message is displayed behind the next input box.
How can I change the error message to either be a popup, or the message display inside the text box, or some other way that I can see the text?
This is my forms.py
class ProductForm(ModelForm):
prod_code = forms.CharField(label=False,error_messages={'unique': 'This is unique'})
prod_descr = forms.CharField(label=False)
supplier = forms.ChoiceField(choices=suppliers, label=False, required=False)
list_price = forms.DecimalField(label=False, required=False)
serialsed_item = forms.ChoiceField(choices=YesNo, label=False, required=False)
category = forms.ChoiceField(choices=categories, label=False, required=False)
class Meta:
model = Product
fields = '__all__'
helper = FormHelper()
helper.layout = Layout(Field('text_input', css_class='form-control-lg'),)
def __init__(self, *args, **kwargs):
super(ProductForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_show_labels = False
This is my template :
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block page_head %}Add Product{% endblock %}
{% block navbar %}
<navbar class="mr-auto">
<div class="container-fluid">
<ul class="nav navbar-expand">
<li>
<button type="submit" form="p-form" class="btn btn-outline-secondary">Add Product</button>
<button class="btn btn-outline-secondary" onclick="document.location='{% url 'prodlist' %}'">Close Without Saving</button>
</li>
</ul>
</div>
</navbar>
{% endblock %}
{% block content %}
<form id="p-form" action="{% url 'newproduct' %}" method="post">
<!--
{{form.prod_code|as_crispy_field}}
{{form.prod_descr|as_crispy_field}}
{{form.supplier|as_crispy_field}}
{{form.list_price|as_crispy_field}}
{{form.category|as_crispy_field}} -->
{% csrf_token %}
<div class="container-fluid ">
<div class="row">
<div class="col-6 ">
<div class="row">
<div class="col-3">Product Code</div>
<div class="col-8" >{{form.prod_code|as_crispy_field}}</div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-3">Prod Descr</div>
<div class="col-8">{{form.prod_descr|as_crispy_field}}</div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-3">Supplier</div>
<div class="col-8">{{form.supplier|as_crispy_field}}</div>
<div class="col-1"></div>
</div>
</div>
<div class="col-6 ">
<div class="row ">
<div class="col-4">List Price</div>
<div class="col-8">{{form.list_price|as_crispy_field}}</div>
</div>
<div class="row">
<div class="col-4">Serialsed Item</div>
<div class="col-8">{{form.serialsed_item|as_crispy_field}}</div>
</div>
<div class="row">
<div class="col-4">Category</div>
<div class="col-8">{{form.category|as_crispy_field}}</div>
</div>
</div>
</div>
</div>
</form>
{% endblock content %}
Error message :
Error message