Django Error message displays behind text box

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