Styled contact form errors to not bork the layout of the form

Author: estebistec

pythonkc_site/static/screen.css

@@ -265,14 +265,55 @@ section.resources{
     font-size: 80%;
 }
 
-.contact-name { width: 155px; border-color: #87CDED; }
-.contact-email { width: 200px; border-color: #87CDED; }
-.contact-message { width: 521px; border-color: #87CDED; 
-                   font: 13px 'Helvetica Neue',Arial,Helvetica,sans-serif normal; }
-.contact-submit { color: #1B82B3; }
-.contact-form .errorlist { color: #FF0000; display: inline; width: 155px; }
-.contact-form .errorlist li { display: inline; width: 155px; }
+/* The containers are meant to create columns that field errors can fill
+   vertically while the column-width is maintained. */
+.contact-name {
+    width: 157px;
+    border-color: #87CDED;
+}
+.name-container {
+    width: 157px;
+    float: left;
+    padding-right: 3px;
+    margin-right: 1px;
+}
+.contact-email {
+    width: 200px;
+    border-color: #87CDED;
+}
+.email-container {
+    width: 200px;
+    float: left;
+}
+.contact-message {
+    width: 522px; 
+    border-color: #87CDED; 
+    font: 13px 'Helvetica Neue',Arial,Helvetica,sans-serif normal;
+}
+.message-container {
+    width: 522px; 
+    float: left;
+    padding-right: 3px;
+}
+.contact-submit {
+    color: #1B82B3;
+}
+.contact-form .errorlist {
+    color: #FFAFAF; 
+    display: inline; 
+    margin-bottom: 6px;
+}
 
-.contact-form input::-webkit-input-placeholder { background-color: #1B82B3; color: #87CDED; }
-.contact-form textarea::-webkit-input-placeholder { background-color: #1B82B3; color: #87CDED; }
-.contact-form *:-moz-placeholder { background-color: #1B82B3; color: #87CDED; }
+.contact-form *:-moz-placeholder { 
+    background-color: #1B82B3;
+    color: #87CDED;
+}
+/* Combining these as *::-webkit-input-placeholder didn't seem to work...*/
+.contact-form input::-webkit-input-placeholder {
+    background-color: #1B82B3;
+    color: #87CDED;
+}
+.contact-form textarea::-webkit-input-placeholder { 
+    background-color: #1B82B3;
+    color: #87CDED;
+}

pythonkc_site/templates/index.html

@@ -127,15 +127,25 @@ <h1>FOLLOW US</h1>
               enctype="application/x-www-form-urlencoded"
               class="contact-form">
           {% csrf_token %}
-          {{ form.first_name }}
-          {{ form.last_name }}
-          {{ form.email }}
-          {{ form.first_name.errors }}
-          {{ form.last_name.errors }}
-          {{ form.email.errors }}
-          {{ form.message }}
-          {{ form.message.errors }}
-          <input type="submit" value="SUBMIT" class="contact-submit" />
+          <span class="name-container">
+            {{ form.first_name }}
+            {{ form.first_name.errors }}
+          </span>
+          <span class="name-container">
+            {{ form.last_name }}
+            {{ form.last_name.errors }}
+          </span>
+          <span class="email-container">
+            {{ form.email }}
+            {{ form.email.errors }}
+          </span>
+          <span class="message-container">
+            {{ form.message }}
+            {{ form.message.errors }}
+          </span>
+          <div>
+              <input type="submit" value="SUBMIT" class="contact-submit" />
+          </div>
         </form>
       </div>
       </section>