How to custom ModelForm with CSS - Django

Question

I wasn't able to find a way to change the appearance of the created form by using CSS.

Here is the simple code I am using:

create.html

{% block content %}
<h4 class="mb-3">Form Order</h4>
  <form action="." method="post" class="order-form">
    {{ form.as_p }}
    <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
    {% csrf_token %}
  </form>
{% endblock %}

forms.py

from django import forms
from .models import Order

class OrderCreateForm(forms.ModelForm):
    class Meta:
        model = Order
        fields = ['first_name', 'last_name', 'email', 'address', 'postal_code', 'city']

views.py

from django.shortcuts import render
from .models import OrderItem
from .forms import OrderCreateForm
from cart.cart import Cart
from .tasks import order_created


def order_create(request):
    cart = Cart(request)
    if request.method == 'POST':
        form = OrderCreateForm(request.POST)
        if form.is_valid():
            order = form.save()
            for item in cart:
                OrderItem.objects.create(order=order,
                                         product=item['product'],
                                         price=item['price'],
                                         quantity=item['quantity'])
            # clear the cart
            cart.clear()
            return render(request, 'created.html', {'order': order})
            # launch asynchronous task
            order_created.delay(order.id)
    else:
        form = OrderCreateForm()
    return render(request, 'create.html', {'cart': cart,
                                                        'form': form})

I want to customize my forms.py fields with bootstrap css file, like following code

<div class="row">
              <div class="col-md-6 mb-3">
                <label for="firstName">First name</label>
                <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Valid first name is required.
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="lastName">Last name</label>
                <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Valid last name is required.
                </div>
              </div>
            </div>

            <div class="mb-3">
              <label for="email">Email <span class="text-muted"></span></label>
              <input type="email" class="form-control" id="email" placeholder="you@example.com">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>

            <div class="mb-3">
              <label for="address">Address</label>
              <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
              <div class="invalid-feedback">
                Please enter your shipping address.
              </div>
            </div>


            <div class="mb-3">
              <label for="zip">Postal Code</label>
              <input type="text" class="form-control" id="zip" placeholder="" required>
              <div class="invalid-feedback">
                Portal code required.
              </div>
            </div>

So that it can be changed, is there any way that I can call CSS file inside my forms.py file?

Possible duplicate of [Django Forms and Bootstrap - CSS classes and ](https://stackoverflow.com/questions/8474409/django-forms-and-bootstrap-css-classes-and-divs) — Aleksei Maide, Apr 25 '18 at 05:02
This question is about the implementation of bootstrap in ModelForm. The question pointed by Aleksei Maide is about form render tag "{{ form.as_p }}". Therefore, @Sulthon question is not a duplicate. — Willy satrio nugroho, Feb 07 '20 at 06:22

Shishir M · Answer 1 · 2018-04-25T06:19:50.340

2

Try in following way. It should work

from django import forms
from .models import Order


class OrderCreateForm(forms.ModelForm):

    class Meta:
        model = Order

    first_name = forms.TextInput(attrs={'id': 'firstname',  'class':'form-control'})
    lastName = forms.TextInput(attrs={'id': 'lastname',  'class':'form-control'})

edited Apr 25 '18 at 06:19

answered Apr 25 '18 at 05:31

Shishir M

29
1
3

2

"Creating a ModelForm without either the 'fields' attribute or the 'exclude' attribute is prohibited; form OrderCreateForm needs updating." i get this error – Sulthon Maulana Arrasyid Apr 25 '18 at 12:40
To create ModelForm in django, you need to specify fields. Just associate the fields to first_name and lastName. Under the Meta class you can add : fields = ['first_name','lastName']. @Shishir solution works after I add that line. or you can try solution in Jihoon answers by adding vacant fields. – Willy satrio nugroho Feb 07 '20 at 05:34

Roy Martinez · Answer 2 · 2020-03-22T15:56:45.083

The only method that worked for me was:

from django import forms
from .models import Contactt


class Contactf(forms.ModelForm):

    class Meta():
        model = Contactt
        fields = ['email', 'name', 'text']
        widgets = {
            'email': forms.EmailInput(attrs={
            'class': 'form-control',
            'style': 'background-color: black',
            'placeholder': 'Your Email',
            }),
            'name': forms.TextInput(attrs={
            'class': 'form-control',
            'style': 'background-color: black',
            'placeholder': 'Your Name'}),
            'text': forms.Textarea(attrs={
            'rows': 3,
            'style': 'background-color: black',
            'class': 'form-control',
            'placeholder': 'Hello Roylan,'})
         }

Django Documentation for a similar example

score 1 · Answer 3 · answered Nov 16 '18 at 04:54

To answer @Sulthon's question: if all of your fields are custom, you can define the 'fields' attribute as an empty list.

from django import forms
from .models import Order


class OrderCreateForm(forms.ModelForm):

    class Meta:
        model = Order
        fields = []

    first_name = forms.TextInput(attrs={'id': 'firstname',  'class':'form-control'})
    lastName = forms.TextInput(attrs={'id': 'lastname',  'class':'form-control'})

score 0 · Answer 4 · answered Apr 17 '22 at 01:25

A simple way to style the ModelForm appearance would be to call a JQuery function when the page loads which has the commands to add the class "form-control" to each of the inputs. It works on inputs, labels, select, textarea etc and gives the form a uniform look

e.g.

function add_form_controls(){
  $('#firstName').addClass("form-control")
  $('#lastName').addClass("form-control")
  $('#streetAddress').addClass("form-control")
}

add_form_controls();

How to custom ModelForm with CSS - Django

4 Answers4