From e2c404ff69ecb20d5f61b7f6d70eb78e0c6c661d Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 17 Apr 2015 08:45:39 -0400
Subject: [PATCH] Update the template and stylesheet for the forms

Update the form template (from troutcreek) which has only one columns.
Update the stylesheet so form has max width of 600px and is centered.
---
 Toolkit/Contacts/templates/contactForm.html | 26 +++++++++++++--------
 css/contactform.css                         |  4 ++++
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/Toolkit/Contacts/templates/contactForm.html b/Toolkit/Contacts/templates/contactForm.html
index 34f1676..cf4c42f 100644
--- a/Toolkit/Contacts/templates/contactForm.html
+++ b/Toolkit/Contacts/templates/contactForm.html
@@ -1,4 +1,4 @@
-
+<div id="contact">
     {form.javascript:h}
     {form.outputHeader():h}
     {form.hidden:h}
@@ -16,14 +16,14 @@
             {else:}
                 {if:elem.isButton()}
                     {if:elem.notFrozen()}
-                        <div class="medium-6 small-12 columns">{elem.html:h}</div>
-                    
+                        <div class="small-11 small-centered columns">{elem.html:h}</div>
+
                     {end:}
                 {else:}
                     {if:elem.error}
-                        <div class="medium-6  small-12 columns error">
+                        <div class="small-11 small-centered columns error">
                     {else:}
-                        <div class="medium-6  small-12 columns">
+                        <div class="small-11 small-centered columns">
                         {end:}
                     {if:elem.isType(#textarea#)}
                         {if:elem.required}<label class="req">{else:}<label>{end:}
@@ -32,21 +32,23 @@
                             {elem.label:h}
                     {else:}
                         {if:elem.isType(#CAPTCHA_Image#)}
-                                {if:elem.required}<label>{else:}<label class="req">{end:}
+                                {if:elem.required}<label>{else:}<label class="req glmCaptchaImg">{end:}
                                 {if:elem.required}<span class="req">*</span>{end:}
                             {elem.label:h}
 
                         {else:}
                             {if:elem.isType(#group#)}
                                 {if:element.isName(#interest#)}
+                                    {element.label:h}<br>
                                 {else:}
                                     {if:elem.required}<label class="req">{else:}<label>{end:}
                                     {if:elem.required}<span class="req">*</span>{end:}
                                     {elem.label:h}<br>
                                 {end:}
                             {else:}
-
+                                {if:!element.isType(select)}
                                     {if:elem.required}<label class="req">{else:}<label>{end:}
+                                {end:}
                                     {if:elem.required}<span class="req">*</span>{end:}
                                     {elem.label:h}
 
@@ -60,11 +62,13 @@
                     {end:}
 
                     {if:elem.isType(#group#)}
-
                         <div class="row collapse">
+                            <div class="small-11 columns">
+                                <b>{elem.label:h}</b>
+                            </div>
 
                             {foreach:elem.elements,gitem}
-                            <div class="small-12 columns">
+                            <div class="small-11 small-centered medium-6 medium-uncentered columns">
                                 {gitem.html:h}{if:gitem.required}<div class="req">*</div>{end:}
                                 {if:elem.separator}{elem.separator:h}{end:}
                             </div>
@@ -83,7 +87,9 @@
                             </span>
                         {end:}
                     {end:}
+                                {if:!element.isType(select)}
                                     </label>
+                                {end:}
                             {if:elem.error}<small class="error">{elem.error}</small>{end:}
                                 </div> <!-- end for columns -->
                 {end:}
@@ -101,4 +107,4 @@
 	{if:form.requirednote}
     <div>{form.requirednote:h}</div>
     {end:}
-
+</div>
diff --git a/css/contactform.css b/css/contactform.css
index c065208..b898456 100644
--- a/css/contactform.css
+++ b/css/contactform.css
@@ -109,3 +109,7 @@ table tr.req td.instructioncell {
     width: auto;
     float: none;
 }
+#contact {
+    max-width: 600px;
+    margin: 0 auto;
+}
-- 
2.17.1