Writing a Django Form while keeping HTML styling

Question

I have a Django form that I have created manually in order to keep the format of the styling, but I realized that the form is compromised of several inputs and manually is taking too long to change each.

I am also able to generate the form automatically using {{ form.as_p }} but I lose the HTML style format that I have below. Is there an easy way to make it instead of manually changing each input?

This is the original HTML template that I am trying to keep

        </button>
          <div class="form-outline mb-4">
            <input
              type="text"
              id="businessName"
              class="form-control"
              name="businessName"
            />
            <label class="form-label" for="typeText"
              >Legal Business Name</label>
          </div>

Here is the working Django form:

      {% if submitted %}
      Your forms has been submitted
      {% else %}
      <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <!-- Submit button -->
        <button
          type="submit"
          class="btn btn-primary btn-block mb-4"
          id="btn"
        >
          Submit
        </button>

      </form>

Here is the views.py

def add_form(request):
    submitted=False
    if request.method == 'POST':
        form = infoForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/?submitted=True')
    else:
        form = infoForm()
        if 'submitted' in request.GET:
            submitted=True
    return render(request, 'template/template.html',{'form':form, 'submitted':submitted})

Here is the form

class infoForm(ModelForm):
    class Meta:
        model = Info
        fields = ['businessName']

Here is what I have tried:

                    <div class="form-outline mb-4">
                        <input type="text" class="form-control" name="businessName" {% if form.is_bound %}value="{{ form.businessName.value }}"{% endif %}>
                        <label class="form-label">Legal Business Name</label>
                    </div>
                    {% for err in form.businessName.errors %}
                        <small class="text-danger mb-2 ml-2">{{ err }}</small>
                    {% endfor %}

My Question: How to keep the same HTML styling while making it easy by using {{ form.as_p }}?

What is the required input for attributes in this case?

https://stackoverflow.com/questions/401025/define-css-class-in-django-forms?answertab=active#tab-top — SANGEETH SUBRAMONIAM, Jul 21 '21 at 02:37

SANGEETH SUBRAMONIAM · Accepted Answer · 2021-07-21T04:15:24.253

This will be the quickest way to apply custom styling to the django forms so that you let the django take care of processing the form while still using your preferred css styling...

Taken from my answer to: How to markup form fields with in Django

class MyForm(forms.Form):
    myfield = forms.CharField(widget=forms.TextInput(attrs={'class': 'myfieldclass'}))

or

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['myfield'].widget.attrs.update({'class': 'myfieldclass'})

or

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

originally answered

EDIT 1 : Adding Label styling

1 set the class by the above mentioned method eg:

self.fields['some_field'].widget.attrs.update({'class': 'some_class'})`

2 Select the label of that class and style them

.that_some_class label{
    font-size: large;
}

added in edit... note that the style is applied to all label at once.. which will be ok for most of the cases.. If you want to select a specific label, you have to render of each form attribute to style out individually — SANGEETH SUBRAMONIAM, Jul 21 '21 at 04:16

Writing a Django Form while keeping HTML styling

1 Answers1