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?

stackoverflow.com/questions/401025/…

SANGEETH SUBRAMONIAM
– SANGEETH SUBRAMONIAM

2021-07-21 02:37:55 +00:00
Commented Jul 21, 2021 at 2:37 — SANGEETH SUBRAMONIAM
– SANGEETH SUBRAMONIAM, Commented Jul 21, 2021 at 2:37

SANGEETH SUBRAMONIAM · Accepted Answer · 2021-07-21 04:15:24Z

1

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;
}

edited Jul 21, 2021 at 4:15

answered Jul 21, 2021 at 2:29

SANGEETH SUBRAMONIAM

1,0741 gold badge9 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Etchosh Over a year ago

How about the label how can i add class to it?

SANGEETH SUBRAMONIAM Over a year ago

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

Collectives™ on Stack Overflow

Writing a Django Form while keeping HTML styling

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related