Django form: visibly group or separate fields - html

Question

I have a form that I'm displaying within a Django app. This form has a number of fields.
To make the UI more intuitive, I would like to display the fields not simply one after the other, but instead grouped into sections - be it within a box or by separating the sections with a horizontal line or larger spacing or custom text etc.
My main interest is having the subgroups visibly separated from each other. Being able to use some text (basically a label without an attached field) as section devider would be a welcome bonus.
How can I achieve this?
Current example code:
forms.py:
from django import forms
class MyForm(forms.Form):
color1 = forms.CharField()
items_color1 = forms.CharField()
# some devider here
color2 = forms.CharField()
items_color2 = forms.CharField()
mypage.html:
<table>
{{ form.as_table }}
<tr>
<td> </td>
<td><input type="submit" value="Submit" id="form_field" name="submit_btn"></td>
</tr>
</table>
(I'm pretty new to Django. My previous GUI experience is mainly with PyQt5.)

Answer 1

You are luck, my friend.
Take a look at Django Crispy Forms. Using this product, you can programmatically control the layout of your form from within the Form definition.
Once you install Django Crispy Forms into your virtual environment, you'll have to add a line to your settings file to be able to use it:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.humanize',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
...
'crispy_forms',
...
]
After you do that, you'll be able to use django crispy forms in your application.
The example form that you posted could look like this inside of your forms.py file:
from django import forms
from crispy_forms.bootstrap import FormActions
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Field, HTML, Layout, Submit
class MyForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.helper = FormHelper(self)
self.fields['color1'].label = 'Color 1:'
self.fields['items_color1'].label = 'Color 1 Items:'
self.fields['color2'].label = 'Color 2:'
self.fields['items_color2'] = 'Color 2 Items:'
# You can dynamically adjust your layout
self.helper.layout = Layout(Field('color1),
Field('items_color1),
HTML(<hr>),
Field('color2'),
Field('items_color2),
FormActions(Submit('save', 'Save changes')))
You would style it in your CSS.
Here are some nice examples using Django Crispy Forms.