Стилизация формы Django CreateView

Я хочу создать форму, подобную варианту B, который показан на изображении, но не могу получить результат Моя форма выглядит как A. Я не использую ни Form, ни ModelForm, только CreateView. Я также не хочу изменять мои Views или добавлять какой-либо FormClass, поэтому, пожалуйста, сообщите мне, как я могу получить результат.

enter image description here

Вот моя модель

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

Вот шаблон

<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>

Похоже, вы используете пакет crispy forms. Убедитесь, что он загружен над любой формой, где вы его используете, например так:

{% load crispy_forms_tags %}

{{form.some_field|as_crispy_field}}

Кроме того, есть еще несколько способов добиться желаемого результата - применить к полям формы пользовательский CSS. Например, если вы используете bootstrap, 

<style>
.form-control {
    background-color: rgb(200,200,200);
}
.form-control:focus {
    background-color: yellow; 
}
</style>

... даст вам несколько различных стилей для вводимых данных. Наконец, вы можете использовать класс формы и изменять высоту текстовых полей прямо в виджете поля, например:


class SomeFormClass(forms.ModelForm):

    class Meta:
       model = MyModelClass
       fields = ['message'] # add more as needed

    message = forms.CharField(required=False, widget=forms.Textarea(attrs={"rows":3, "cols":20})) # rows is adjusting the height of the message field.

Это лишь несколько способов стилизации вводимых данных.

Я получил результат, используя form-control

Вот мой обновленный CSS

Вернуться на верх