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="[email protected]">
              <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?

Answer 1

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'})

Answer 2

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

Answer 3

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'})

Answer 4

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();