Form Customization

Django Model Customize html Form

app/models.py

from django.db import models

class Contact(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    message = models.TextField()

app/forms.py

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    message = forms.CharField(widget=forms.Textarea(attrs={'class': 'custom-class'}))

    class Meta:
        model = Contact
        fields = ['name', 'email', 'message']
        widgets = {
        'name': forms.TextInput(attrs={'class': 'form-control'}),
        'email': forms.TextInput(attrs={'class': 'form-control'}),
        
    }

app/views.py

from django.shortcuts import render
from django.http import HttpResponse
from .forms import ContactForm


def contact_view(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponse('success')
    else:
        form = ContactForm()
    return render(request, 'contact.html', {'form': form})

app/templates/contact.html

        <H1>Stacked Form </h1>
        <form method="post">
            <div data-gb-custom-block data-tag="csrf_token"></div>
            <div>
            <label for="{{ form.name.id_for_label }}">Name:</label>
            {{ form.name }}
            </div>
            <div>
            <label for="{{ form.email.id_for_label }}">Email:</label>
            {{ form.email }}
            </div>
            <div>
            <label for="{{ form.message.id_for_label }}">Message:</label>
            {{ form.message }}
            </div>
            <button type="submit">Submit</button>
        </form>

Screenshots

App Screenshot