Change form structure and add relevant CSS rules

2 files changed, 10 insertions, 8 deletions

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index afd10207..a7b659c3 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -212,7 +212,11 @@ text-align: center;
   width: 100%;
 }
 
-.form_field_label,.form_field_input {
+.form_field_input {
+  margin-bottom: 10px;
+}
+
+.form_field_label {
   margin-bottom: 4px;
 }
 
diff --git a/mediagoblin/templates/mediagoblin/utils/wtforms.html b/mediagoblin/templates/mediagoblin/utils/wtforms.html
index 6a86fd24..39dca7cc 100644
--- a/mediagoblin/templates/mediagoblin/utils/wtforms.html
+++ b/mediagoblin/templates/mediagoblin/utils/wtforms.html
@@ -18,18 +18,16 @@
 
 {# Generically render a field #}
 {% macro render_field_div(field) %}
-  <div class="form_field_box">
-    <div class="form_field_label">{{ _(field.label.text) }}</div>
-    <div class="form_field_input">{{ field }}</div>
+  <p class="form_field_label"><label for="{{ field.name }}">{{ _(field.label.text) }}</label></p>
+  <div class="form_field_input">
+    {{ field }}
     {%- if field.errors -%}
       {% for error in field.errors %}
-        <div class="form_field_error">
-          {{ error }}
-        </div>
+        <p class="form_field_error">{{ error }}</p>
       {% endfor %}
     {%- endif %}
     {% if field.description -%}
-      <div class="form_field_description">{{ _(field.description) }}</div>
+      <p class="form_field_description">{{ _(field.description) }}</p>
     {%- endif %}
   </div>
 {%- endmacro %}