Customizing django modelform select dropdown

I am working on a parcel delivery app

here is the model:

here is the rendered page

which does not tell a deliveryagent anything about the task at hand.

i will prefer to render this dropdown like this:

Can anyone help please?

Welcome @momospix-creator !

Please do not post images of code, templates, or other text information here. Post the actual text of the code within your message.

When posting code or other preformatted text here, enclose that text between lines of three backtick - ` characters. This means you’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code properly formatted.

Also, instead of (or perhaps in addition to) posting the desired display image, it would be helpful if you identified specifically what fields you want displayed on the page, and explain what you want those elements to do.

Sorry I’m new here , just getting started actually, will i have to re-post?

``` class DeliveryItem(models.Model):
    delivery_item = models.ManyToManyField(Order, related_name='item')
    delivery_agent = UserForeignKey(auto_user_add=True, related_name='delivery_agent', on_delete = models.CASCADE)``
```class DeliveryItemForm(ModelForm):
    
        
    class Meta:
        model = DeliveryItem
        fields = [
            'delivery_item',
            #'delivery_agent'
        ]``
```{% block content %}
    
    <div class="mt-32"></div>
    
        {% for item in order_items %}
            <div class=" mx-auto col-span-8 bg-zinc-600 w-2xl border-2 border-gray-700 rounded-2xl m-8 p-4  grid grid-cols-12 ">
                <div class="col-span-4 ">
                    <img class="w-40 h-40 border-2 border-gray-100 rounded-2xl object-cover" src="{{item.image.url}}" alt="">
                </div>
                
                
                   
                
                <div id="item" class="col-span-7">
                    
                    <h1 class="text-xs text-white font-semibold">Order title: <span class="text-sm font-extrabold">{{item.description}}</span></h1>
                    <h1 class="text-xs text-white font-semibold">Order type: <span class="text-sm font-extrabold">{{item.category}}</span></h1>
                    <h1 class="text-xs text-white font-semibold">Order destination: <span class="text-sm font-extrabold">{{item.parcel_destination}}</span></h1>
                    <h1 class="text-xs text-white font-semibold">Your phone: <span class="text-sm font-extrabold">{{item.sender_phone_number}}</span></h1>
                    <h1 class="text-xs text-white font-semibold">Destination phone number: <span class="text-sm font-extrabold">{{item.receiver_phone_number}}</span></h1>
                    <h1 class="text-xs text-white font-semibold">Your Order id: <span class="text-sm font-extrabold">{{item.id|slice:":8"}}</span></h1>
                    <h1 class="text-xs text-white font-semibold">Your Order status: <span class="text-sm font-extrabold">{{item.order_status }}</span></h1>
                    <h1 class="text-xs text-white font-semibold">Your Order will be delivered: <span class="text-sm font-extrabold">{{item.delivery_date }}</span></h1>
                    
                    
                </div>
              
                    <button
                   
                    class=" w-full cursor-pointer bg-zinc-300 border-2 border-gray-500 rounded-lg font-bold text-md p-2 text-white"
                    >
                        <img width="50" height="50" src="https://img.icons8.com/ios/50/hand-cursor.png" alt="hand-cursor"/>
                    </button>  
              
                
                </div>
               
        {% endfor %}


    <div class=" grid items-center justify-center max-w-7xl h-auto mb-7 mx-auto mt-7 bg-gray-300 font-bold text-md shadow-lg shadow-gray-600 rounded-2xl p-6 text-black">
        <form class="min-w-lg" action="." hx-post = "{% url "add_task" %}">
            {% csrf_token %}
            {{task_form|crispy}}
            <div id= "orderitem" class="mt-3"></div>
            <button class=" w-full cursor-pointer bg-zinc-700 border-2 border-gray-500 rounded-lg font-bold text-md p-2 text-white" value="save" type="submit" method="post" >Submit</button>
        </form>
    </div>
</div>
{% endblock content %}``

It needs to be posted with three backticks - and don’t escape them.
Example:

# The line above this is ```
def function():
    return none
# The line after this is ```

Also, make sure there aren’t any extraneous blank lines and that the formatting is correct - it’s best to just copy/paste the code from your code editor into the post.

No worries, this post is good enough - we’ll work through the formatting issues.

If you’ve got the pencil icon in the menu below the post (perhaps shown by the
... icon), you can edit an exist message.