[FIXED] Django - Customize Form, Specifically how fields look

Issue

I have a form class which has several fields. One of them is the first and last name field. My goal is to modify my form in my html file so that it can take in input and pass it into a model object. However, I want this to not change how my form displays. The problem is that the fields show up differently when I use django's template language.

I tried to modify the first name field with django's template language by replacing the following bootstrap code with django template language code:

<div class="form-group col-md-12">

<label for="{{ form.first_name.id_for_label }}">First Name</label>

<input type="text" class="form-control" id="first_name" placeholder="Ex. John"> </div>

has been changed to:

<div class="form-group col-md-12">

{{ form.first_name.label_tag }}

{{ form.first_name }} </div>

This does not work. I want the first name field to display the same as the last name field. How can I do this?

My full code right now:

<div class="form-row">
            {{ form.first_name.errors }}
            <div class="form-group col-md-12">
                <!--<label for="{{ form.first_name.id_for_label }}">First Name</label>-->
                <!--<input type="text" class="form-control" id="first_name" placeholder="Ex. John">-->
                {{ form.first_name.label_tag }}
                {{ form.first_name }}
            </div>


        </div>

        <div class="form-row">
            <div class="form-group col-md-12">
                <label for="last_name">Last Name</label>
                <input type="text" class="form-control" id="last_name" placeholder="Ex. Doe">
            </div>
        </div>

Solution

You want to display first name field to display the same as the last name field then you need to render both of the fields with same style of code.

forms.py

from django import forms
from django.core.validators import RegexValidator


class UserForm(forms.Form):
    first_name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': "first name"}), required=True, max_length=50, validators=[ RegexValidator('^[a-zA-Z ]*$', message='Please enter only alphabetical letters')], label=u'First Name')
    last_name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'last name'}), required=True, max_length=50,validators=[RegexValidator('^[a-zA-Z ]*$', message='Please enter only alphabetical letters')],label=u'Last Name')

    class Meta():
        fields = ['first_name', 'last_name']

views.py

from django.shortcuts import render
def render_form(request):
    form = UserForm(request.POST or None)
    return render(request, 'form.html', {'form': form})

form.html

    {% for field in form %}
    <div class="form-group col-md-6">
        <label class="col-form-label font-weight-normal">
            {{ field.label  }}
            {% for error in field.errors %}
                <strong class="text-danger font-weight-normal" style="padding-left: 5px">*{{ error|escape }}</strong>
            {% endfor %}
        </label>
        <div>
            <input name="{{ field.name }}" class="form-control"  type="text" value="{{ field.value|default_if_none:'' }}"
                   placeholder="{{field.field.widget.attrs.placeholder}}">
        </div>
    </div>
   {% endfor %}

In label <div> you will see labels and any errors occur while form submitting and input <div> will show first and last name fields with placeholder.

Answered By - Sohaib