将 Bootstrap 与摘要电子邮件表单 Wagtail 结合使用

Question

我想用我的形式 wagtail 进行引导。

from django.db import models
from modelcluster.fields import ParentalKey
from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel, FieldRowPanel
from wagtail.contrib.forms.models import AbstractFormField, AbstractEmailForm
from wagtail.fields import RichTextField

from wagtailcaptcha.models import WagtailCaptchaEmailForm


class FormField(AbstractFormField):
page = ParentalKey("ContactPage", on_delete=models.CASCADE, related_name="form_fields")


class ContactPage(WagtailCaptchaEmailForm):
    # Hérite de AbstractEmailForm
    template = "contact/contact_page.html"
    intro = RichTextField(blank=True)
    thank_you_text = RichTextField(blank=True)

content_panels = AbstractEmailForm.content_panels + [
    FieldPanel('intro'),
    InlinePanel('form_fields', label="Champs du formulaire"),
    FieldPanel('thank_you_text'),
    MultiFieldPanel([
        FieldRowPanel([
            FieldPanel('from_address', classname="col-6"),
            FieldPanel('to_address', classname="col-6"),
        ]),
        FieldPanel('subject')
    ], heading="Configurations des adresses"),
]

在我的html中：

 <form method="post">
            {% csrf_token %}
            {{ form.as_p }}

            <input type="submit" value="Envoyer" class="btn btn-success btn-sm">
        </form>

请问如何将 bootstrap 与此 wagtail 表单一起使用？

我想直接在我的模型中尝试类名，但它似乎不起作用。还有别的方法吗？

谢谢

Answer 1

我使用以下模板而不是内置的渲染方法。我不喜欢复选框和验证码的格式：

    <form action="{% pageurl page %}" enctype="multipart/form-data" method="POST">
      {% csrf_token %} 
      
      {% for hidden_field in form.hidden_fields %} 
        {{ hidden_field }} 
      {% endfor %} 
      {% if form.errors or form.non_field_errors %}
        <div class="alert alert-danger" role="alert">
          {{ self.form_error_warning }}
        </div>            
      {% endif %}
      {% if form.non_field_errors %}
        <div class="alert alert-danger" role="alert">
          {% for error in form.non_field_errors %} {{ error }} {% endfor %}
        </div>
      {% endif %}

      <div class="form-group">
        {% for field in form.visible_fields %} 
          {% field_class field as field_class %}
          {# Check box not displaying correctly by default, use case here #}
          {% if field_class == "checkbox" %}
            <div class="form-check mt-4 ml-1">
              {% if form.is_bound %} 
                {% if field.errors %} 
                  {% render_field field class="form-check-input is-invalid form-check-input-sm" %} 
                {% else %} 
                  {% render_field field class="form-check-input is-valid form-check-input-sm" %} 
                {% endif %} 
              {% else %} 
                {% render_field field class="form-check-input form-check-input-sm" %} 
              {% endif %} 
              <div class="font-label pt-0 pb-1">
                {{ field.label_tag }}
              </div>
            </div>
          {% else %}
            <div class="font-label pt-2 pb-1">
              {% if field.name != "wagtailcaptcha" %}{{ field.label_tag }}{% endif %}
            </div>
            {% if form.is_bound %} 
              {% if field.errors %} 
                {% render_field field class="form-control is-invalid form-control-sm" %} 
              {% else %} 
                {% render_field field class="form-control is-valid form-control-sm" %} 
              {% endif %} 
            {% else %} 
              {% if field.name == "wagtailcaptcha" %}
                {% render_field field %} 
              {% else %}
                {% render_field field class="form-control form-control-sm" %} 
              {% endif %}
            {% endif %} 
          {% endif %}
          {% if field.errors or field.help_text %}
            <div class="row">
              {% if field.name == "wagtailcaptcha" %}
                {% if field.errors %}
                  <ul class="list-unstyled pl-3">
                    {% for error in field.errors %}
                      <small class="text-danger">
                        <li>{{ error }}</li>
                      </small>
                    {% endfor %}
                  </ul>
                {% endif %}
              {% else %}
                <div {% if field.errors %}class="col"{% else %}class="col-auto"{% endif %}>
                  {% if field.help_text %}
                    <small class="form-text text-muted">{{ field.help_text|linebreaksbr }}<br>&nbsp;</small>
                  {% else %}
                    <small>&nbsp;</small>
                  {% endif %}
                </div>
                <div {% if field.errors %}class="col-auto text-right"{% else %}class="col"{% endif %}>
                  {% if field.errors %}
                    <ul class="list-unstyled">
                      {% for error in field.errors %}
                        <small class="text-danger">
                          <li>{{ error }}</li>
                        </small>
                      {% endfor %}
                    </ul>
                  {% endif %}
                </div>
              {% endif %}
            </div>
          {% endif %} 
        {% endfor %}
      </div>
      <button class="btn btn-primary btn-lg" type="submit">{{ page.submit_button_text }}</button>
    </form>

渲染出如下内容：