Styling Django CreateView Form

Question

I want to design the form like option B Which shown in Image but not able to get the result My form looks like A. I am not using any Form or ModelForm just using CreateView. I also don't want to modify my Views or add any FormClass so please let me how can i get the Result.

Here is my Model

class InfluencerModel(models.Model):
    full_name = models.CharField(max_length=255, null=False, blank=False)
    email = models.EmailField(max_length=255, null=False, blank=False)
    contact_number = models.CharField(max_length=10, null=False, blank=False)
    instagram_id   = models.CharField(max_length=50, null=False, blank=False)
    message = models.TextField(null=True, blank=True)
    visited_on = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.email

    def get_absolute_url(self):
        return reverse("influencers")

Views.py

class InfluencersPageView(CreateView):
    model = InfluencerModel
    template_name = 'home/influencers.html'
    fields = ['full_name', 'email', 'contact_number', 'instagram_id', 'message']

    def get_context_data(self, *args, **kwargs):
        context = super(InfluencersPageView, self).get_context_data(*args, **kwargs)
        return context

Here is Template

<form action="" role="form" class="php-email-form" method="post"> {% csrf_token %}
  <div class="row">
    <div class="col-md-6 form-group">
      {{ form.full_name.errors }}
      {{form.full_name|as_crispy_field}}
    </div>

    <div class="col-md-6 form-group mt-3 mt-md-0">
         {{ form.email.errors }}
         {{form.email|as_crispy_field}}

    </div>


  <div class="form-group col-md-6">
    {{ form.contact_number.errors }}
    {{form.contact_number|as_crispy_field}}
  </div>

  <div class="form-group col-md-6">
    {{ form.instagram_id.errors }}
    {{form.instagram_id|as_crispy_field}}
  </div>

      </div>



  <div class="form-group mt-3" rows="7">
    {{ form.message.errors }}
    {{form.message|as_crispy_field}}

  </div>

   <div class="text-center">
    <button type="submit" class="btn btn-outline-secondary" style="background-color:#FF512F; color: white">Send Message</button>
 </div>

</form>

Answer 1

I got the result using form-control

Here is my Updated CSS

.form-group {
   color: #333333;
}



.map_main{

    margin-top:100px;
    margin-left: 12%;

}
.contact_section {
    /* margin-left: 75%;*/
    /*margin-right:75%;*/

    width: 100%;
    float: right;
    background-color: #b1f5a3;
    /*background-image: url(../images/contact-bg.png);*/
    height: auto;
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: 90px;
    padding-top:70px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    
}
.mail_sectin{
    width: 100%;
    float: left;
}
.contact_text{
    width: 100%;
    float: left;
    font-size: 46px;
    color: #333333;
    font-weight:bold;

}
.email-bt {
    color: #989696;
    width: 100%;
    height: 55px;
    font-size: 18px;
    padding: 20px;
    margin-top: 25px;
    border: 0px;
    border-radius: 5px;
}
input.email-bt::placeholder {
    color: #989696;
}
.massage-bt {
    color: #989696;
    width: 100%;
    height: 150px;
    font-size: 18px;
    padding: 50px 20px 10px 20px;
    margin-top: 25px;
    border: 0px;
    border-radius: 5px;
}
textarea#comment::placeholder {
    color: #989696;
}
.send_bt {
    width: 100%;
    float: left;
    margin-top: 50px;
}
.send_bt a{
    width: 30%;
    float: left;
    font-size: 20px;
    color: #989696;
    text-align: center;
    border: 2px solid #ffffff;
    padding: 10px 0px;
    font-weight: bold;
}
.send_bt a:hover{
    color: #989696;
    background-color: #ffffff;
}
.image_9 {
    width: 100%;
    float: left;
    padding-top: 83px;
}
.input-group {
    width: 45%;
    float: right;
}

.form-control {
    display: block;
    /* width: 100%; */
    padding: 0px 15px 10px 0px;
    font-size: 18px;
    /* line-height: 1.5; */
    color: #333333;
    background-color: white;
    /* background-clip: padding-box; */
    border-bottom: 1px solid #fff !important;
    border-radius: 20px;
    /* transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
    border: 20px;
    border-color: blue;
}
.form-control:focus {
            border-color: orangered;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
.input-group-text {
    padding: 0px;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: transparent;
    border: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #fff;
    text-transform: uppercase;
}
.input-group-text a{
    color: #ffffff;
}
.input-group>.custom-file,
.input-group>.custom-select,
.input-group>.form-control {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0px;
    background: transparent !important;
    border-bottom: 1px solid #ffff;
}




.btn {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: #F75404;
  color: #FFFFFF;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: bold;
  border-radius: 0.375rem;
  border: none
}

.btn:hover {
  background-color: #D1410C;
}