Fixed form styling

artel/dynamic_forms/forms.py

@@ -1,4 +1,9 @@
 from django import forms
+from dynamic_forms.widgets import (
+    CheckboxSelectMultiple,
+    CheckboxInput,
+    RadioSelect
+)
 
 
 class MultipleFileInput(forms.ClearableFileInput):
@@ -27,11 +32,11 @@ class DynamicForm(forms.Form):
         "email": forms.EmailField(max_length=255, widget=forms.EmailInput(attrs={"class": "form-control"})),
         "number": forms.IntegerField(widget=forms.NumberInput(attrs={"class": "form-control"})),
         "url": forms.URLField(max_length=255, widget=forms.URLInput(attrs={"class": "form-control"})),
-        "checkbox": forms.BooleanField(required=False, widget=forms.CheckboxInput(attrs={"class": "form-control"})),
-        "checkboxes": forms.MultipleChoiceField(required=False, widget=forms.CheckboxSelectMultiple(attrs={"class": "form-control"})),
+        "checkbox": forms.BooleanField(required=False, widget=CheckboxInput(attrs={"class": "form-check"})),
+        "checkboxes": forms.MultipleChoiceField(required=False, widget=CheckboxSelectMultiple(attrs={"class": "form-check"})),
         "dropdown": forms.ChoiceField(widget=forms.Select(attrs={"class": "form-control"})),
         "multiselect": forms.MultipleChoiceField(widget=forms.SelectMultiple(attrs={"class": "form-control"})),
-        "radio": forms.ChoiceField(widget=forms.RadioSelect(attrs={"class": "form-control"})),
+        "radio": forms.ChoiceField(widget=RadioSelect(attrs={"class": "form-control"})),
         "date": forms.DateField(widget=forms.DateInput(attrs={"class": "form-control"})),
         "datetime": forms.DateTimeField(widget=forms.DateTimeInput(attrs={"class": "form-control"})),
         "hidden": forms.CharField(widget=forms.HiddenInput()),

artel/dynamic_forms/templates/forms/email_form_page.html

@@ -7,6 +7,7 @@
     <h1>{{ page.title }}</h1>
     <p class="meta">{{ page.date }}</p>
     {% if form %}
+        {{form.errors}}
         <div>{{ page.intro|richtext }}</div>
         <form enctype="multipart/form-data" action="{% pageurl page %}" method="POST">
             {% csrf_token %}
@@ -19,7 +20,9 @@
                     <small id="emailHelp" class="form-text text-muted">
                         {% trans field.help_text %}
                     </small>
-
+                    {% if field.error %}
+                        {{error}}
+                    {% endif %}
                 </div>
             {% endfor %}
             <div class="text-end mt-3">

artel/dynamic_forms/templates/widgets/checkbox.html

@@ -0,0 +1,7 @@
+<div class="form-check">
+  <input class="form-check-input" type="checkbox" id="{{ widget.attrs.id }}"
+    name="{{ widget.name }}">
+  <label class="form-check-label" for="{{ widget.attrs.id }}">
+    {{ widget.name }}
+  </label>
+</div>

artel/dynamic_forms/templates/widgets/checkbox_multiple.html

@@ -0,0 +1,14 @@
+{% for group, options, index in widget.optgroups %}
+    {% if group %}
+        <label>{{ group }}</label>
+    {% endif %}
+    {% for option in options %}
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" value="{{ option.value }}" id="{{ option.attrs.id }}"
+            name="{{ option.name }}">
+            <label class="form-check-label" for="{{ option.attrs.id }}">
+                {{ option.value }}
+            </label>
+        </div>
+    {% endfor %}
+{% endfor %}

artel/dynamic_forms/templates/widgets/radio_multiple.html

@@ -0,0 +1,15 @@
+{% for group, options, index in widget.optgroups %}
+    {% if group %}
+        <label>{{ group }}</label>
+    {% endif %}
+    {% for option in options %}
+        <div class="form-check">
+            <input class="form-check-input" type="radio" 
+            value="{{ option.value }}" id="{{ option.attrs.id }}" 
+            name="{{ option.name }}">
+            <label class="form-check-label" for="{{ option.attrs.id }}">
+                {{ option.value }}
+            </label>
+        </div>
+    {% endfor %}
+{% endfor %}

artel/dynamic_forms/widgets.py

@@ -0,0 +1,13 @@
+from django import forms
+
+
+class CheckboxInput(forms.CheckboxInput):
+    template_name = "widgets/checkbox.html"
+
+
+class CheckboxSelectMultiple(forms.CheckboxSelectMultiple):
+    template_name = "widgets/checkbox_multiple.html"
+
+
+class RadioSelect(forms.RadioSelect):
+    template_name = "widgets/radio_multiple.html"