如何在不修改CreateView及添加FormClass的情况下调整Django表单为样式B？

需求说明 #

希望将表单调整为样式B（参考表单样式对比图），当前表单呈现为样式A。仅使用CreateView，不修改Views代码或添加FormClass，仅通过模板调整实现。

现有代码 #

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代码 #

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>

修改方案 #

核心思路是替换as_crispy_field的自动渲染，手动构建表单字段结构，以此完全控制标签与输入框的排版，匹配样式B的布局。具体操作如下：

1. 去掉|as_crispy_field过滤器，手动编写每个字段的标签、输入框和错误提示HTML
2. 利用Bootstrap的网格类（如form-group row、col-form-label）实现标签与输入框同行的布局
3. 保留错误信息的显示逻辑，确保表单验证提示正常展示

修改后的模板代码 #

<form action="" role="form" class="php-email-form" method="post"> {% csrf_token %}
  <div class="row">
    <!-- 姓名字段 -->
    <div class="col-md-6 mb-3">
      <div class="form-group row">
        <label for="{{ form.full_name.id_for_label }}" class="col-sm-4 col-form-label">{{ form.full_name.label }}</label>
        <div class="col-sm-8">
          {{ form.full_name|add_class:"form-control" }}
          {% if form.full_name.errors %}
            <div class="invalid-feedback d-block">
              {{ form.full_name.errors.0 }}
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- 邮箱字段 -->
    <div class="col-md-6 mb-3">
      <div class="form-group row">
        <label for="{{ form.email.id_for_label }}" class="col-sm-4 col-form-label">{{ form.email.label }}</label>
        <div class="col-sm-8">
          {{ form.email|add_class:"form-control" }}
          {% if form.email.errors %}
            <div class="invalid-feedback d-block">
              {{ form.email.errors.0 }}
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- 联系电话字段 -->
    <div class="col-md-6 mb-3">
      <div class="form-group row">
        <label for="{{ form.contact_number.id_for_label }}" class="col-sm-4 col-form-label">{{ form.contact_number.label }}</label>
        <div class="col-sm-8">
          {{ form.contact_number|add_class:"form-control" }}
          {% if form.contact_number.errors %}
            <div class="invalid-feedback d-block">
              {{ form.contact_number.errors.0 }}
            </div>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- Instagram ID字段 -->
    <div class="col-md-6 mb-3">
      <div class="form-group row">
        <label for="{{ form.instagram_id.id_for_label }}" class="col-sm-4 col-form-label">{{ form.instagram_id.label }}</label>
        <div class="col-sm-8">
          {{ form.instagram_id|add_class:"form-control" }}
          {% if form.instagram_id.errors %}
            <div class="invalid-feedback d-block">
              {{ form.instagram_id.errors.0 }}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <!-- 消息字段 -->
  <div class="form-group row mb-3">
    <label for="{{ form.message.id_for_label }}" class="col-sm-2 col-form-label">{{ form.message.label }}</label>
    <div class="col-sm-10">
      {{ form.message|add_class:"form-control" }}
      {% if form.message.errors %}
        <div class="invalid-feedback d-block">
          {{ form.message.errors.0 }}
        </div>
      {% endif %}
    </div>
  </div>

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

补充说明 #

• 若未安装django-widget-tweaks，需先执行pip install django-widget-tweaks并将其添加到项目的INSTALLED_APPS中，才能使用|add_class过滤器给输入框添加样式类；如果不想依赖该库，也可以手动渲染输入框：

  <input type="text" name="{{ form.full_name.name }}" id="{{ form.full_name.id_for_label }}" class="form-control" value="{{ form.full_name.value|default_if_none:'' }}">
  

• 可根据样式B的实际需求调整网格类的数值（如col-sm-4、col-sm-8），修改标签和输入框的宽度比例
• 此方案完全无需修改View代码或添加FormClass，仅通过模板调整即可实现样式切换

内容的提问来源于stack exchange，提问作者Rahul Verma