How to assign HTML Form fields to DJANGO Model Forms without using ModelForm

I am trying to make pretty looking HTML form where each fields are formatted with some validation and icons. Once these fields are submitted I want to save to Model instance using either using Model form or some other approach which allows to make this operation smooth.

Here is my code snippet: model.py:

class Client(Model):    
    client_id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    first_name = models.CharField(max_length=256)
    last_name = models.CharField(max_length=256)
    date_of_birth = models.DateField(blank=True, null=True)
    email = models.EmailField(null=True)

form.py:

class ClientNewForm(forms.ModelForm):
    class Meta:
        model = Client    
        fields = "__all__"

view.py (I know this is wrong but need help to figure out what's the best way to do this):

class ClientCreateView(CreateView):
    model=Client
    form_class = ClientNewForm
    template_name = 'Client/client_new.html'
    
    context_object_name = 'client' # refer the object as patient in template
    success_url = reverse_lazy('WebApp:clients')

        
    def form_valid(self, form):
        model = form.save(commit=False)
        #model.submitted_by = self.request.user
        model.save()
        messages.success(self.request, "The Client is created successfully.")
        return super(ClientCreateView, self).form_valid(form)

Template:

<div class='row'>
    <div class="col-md-8 col-sm-8 col-xs-12">
        <div class="x_panel">
        <div class="x_title">
            <h2>NEW REGISTRATION</h2>
        </div>
        <div class="x_content">
            <form class="form-horizontal form-label-left input_mask" action="" method="post"> 
                {%  csrf_token %}
                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left" id="in-fn" placeholder="First Name" name="first_name">
                    <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                </div>

                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left" id="in-ln" placeholder="Last Name" name="last_name">
                    <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                </div>

                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left"  id="in-dob" name="date_of_birth" placeholder="Date of Birth (mm/dd/yyyy)" >
                    <span class="fa fa-calendar form-control-feedback left" aria-hidden="true"></span>
                </div>

                <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                    <input type="text" class="form-control has-feedback-left" id="in-email" placeholder="Email" name="email">
                    <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
                </div>

                <div class="form-buttons">
                    <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-9">
                    <a href="{% url 'WebApp:clients' %}" type="button" class="btn btn-round btn-danger">Cancel</a>
                    <a href="{% url 'WebApp:client-new' %}" type="button" class="btn btn-round btn-warning">Reset</a>
                    <input type="submit" value="Save" class="btn btn-round btn-success"/>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

So I need help from Django Experts to make this work properly. If possible can you please help me to figure out following:

  1. Can I make each Django Field as individual formatting filed (I like to format each fields better than crispy forms)? (I am using gentelella templates).
  2. What would be best way to get each fields assign back to model fields and save in database? Current approach I am taking is Django Model form but I am not sure if this right approach for me to achieve what I am trying to do.

Really appreciate your help and consideration.

Thank You.

Back to Top