Add and style selected fields separately

Instead of using the default as_p method to render form fields, you can add them separately in the template. This will enable you to format and position each field according to your specific requirements.

forms.py

This is the same form we've already used in our project

from django import forms
from django.contrib.auth.forms import UserChangeForm
from django.contrib.auth.models import User
from tinymce.widgets import TinyMCE
from captcha.fields import CaptchaField

from .models import DBSpecies, DBFossil, Profile, DBFossilGathering, DBEvent, FossilEvent

class FormSpecies(forms.ModelForm):
    captcha = CaptchaField()
    class Meta:
        model = DBSpecies
        fields = "__all__"
        exclude = ("species_owner", )
        widgets = {
            'species_name':forms.TextInput(attrs={'class':'form-control', 'placeholder':'Species name (required)'}),
            'species_image':forms.FileInput(attrs={'class':'form-control'}),
            'species_description':forms.Textarea(attrs={'class':'form-control'}),
            'species_is_archived':forms.CheckboxInput(attrs={'class': 'form-check-input'}),
        }
    
    def __init__(self, user, *args, **kwargs):
        super(FormSpecies, self).__init__(*args, **kwargs)

species_add.html template

<h2 class="text-center">Option 1: form as_p</h2>

    <div class="container" style="max-width: 700px;">
        <div class="card mt-3 text-center">
            <h5 class="card-header">Add a new species</h5>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    {{ form_species_add.as_p }}
                    {{ form_species_add.media }}
                    <button class="save btn btn-sm btn-outline-secondary" type="submit">Add</button> <a class="btn btn-sm btn-outline-secondary" href="{% url 'homepage' %}">Cancel</a>
                </form>
            </div>
        </div>
    </div>
    
    

<h2 class="text-center">Option 2: add individual fields separately</h2>

<div class="container" style="max-width: 700px;">
    <div class="card mt-3 text-center">
        <h5 class="card-header">Add a new species</h5>
        <div class="card-body">
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form_species_add.media }}
                {{ form_species_add.species_name }}
                <div class="row mt-3">
                    <div class="col col-4"><strong>File</strong>{{ form_species_add.species_image }}
                        <br><br>{{ form_species_add.species_is_archived }} archived
                        <br><br>{{ form_species_add.captcha }}
                    </div>
                    <div class="col col-8"><strong>Description</strong>{{ form_species_add.species_description }}</div>
                </div>
                <br>
                <button class="save btn btn-sm btn-outline-secondary" type="submit">Add</button> <a class="btn btn-sm btn-outline-secondary" href="{% url 'homepage' %}">Cancel</a>
            </form>
        </div>
    </div>
</div>