How to use CSS on the Django ModelForms?

Question

I'm developing a small app and using Django ModelForms. I'm unable to provide any kind of styling to the form.

Can someone tell me if there is a way to customize this form?

My current template

{% extends 'base.html' %}
{% block content %}
    <!--begin::Portlet-->
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h3 class="kt-portlet__head-title">
                New Customer
                </h3>
            </div>
        </div>
        <!--begin::Form-->
        <form class="kt-form">
            <div class="kt-portlet__body">

                <div class="form-group">
                    {{ form }}
                </div>
            </div>
            <div class="kt-portlet__foot">
                <div class="kt-form__actions">
                    <button type="submit" class="btn btn-primary">Submit</button>
                    <button type="reset" class="btn btn-secondary">Cancel</button>
                </div>
            </div>
        </form>
        <!--end::Form-->
    </div>
    <!--end::Portlet-->
    <h2>New Customer</h2>
    <form method="POST" class="kt-form">{% csrf_token %}
        {{ form }}
        <button type="submit" class="save btn btn-default">Add Customer</button>
    </form>
{% endblock %}

Please do not just post images; where is your code? We can't help if you don't provide a [mcve]. Additionally, note that you've used "modal" in the title and "model" in the question; these are two different things — roganjosh, Apr 04 '20 at 12:50
Thank you for the suggestions. I have modified the question. — aditya, Apr 04 '20 at 12:52
Kindly check out [How to style django forms](https://stackoverflow.com/q/5827590/9456405) — Muhammed Sidan, Apr 04 '20 at 13:40

score 0 · Answer 1 · answered Apr 04 '20 at 16:09

0

You can do it like this

Example code:

from django import forms
class YourForm(forms.Form):
    name = forms.CharField(required=True,widget=forms.TextInput(attrs={
        'placeholder': 'Enter Your Name',
        'class':'input100', #your class name
        'name':'name',
        'id':'id_name_field' #your id

        }))

answered Apr 04 '20 at 16:09

Areeba Seher

90
8

This makes sense! Thanks a ton – aditya Apr 04 '20 at 16:10

How to use CSS on the Django ModelForms?

1 Answers1