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.

diff --git a/Toolkit/Contacts/templates/contactForm.html b/Toolkit/Contacts/templates/contactForm.html
index 34f1676..cf4c42f 100644 (file)
--- 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 (file)
--- 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;
+}