Use Foundation markup on form

Style the form with markup from Foundation form

diff --git a/Toolkit/Contacts/ContactUs.php b/Toolkit/Contacts/ContactUs.php
index 7bd7f3a..f5abf5d 100755 (executable)
--- a/Toolkit/Contacts/ContactUs.php
+++ b/Toolkit/Contacts/ContactUs.php
@@ -555,7 +555,8 @@ class Toolkit_Contacts_ContactUs
             'type'    => 'submit',
             'req'     => false,
             'name'    => 'submit_rmv',
-            'display' => 'Submit Form'
+            'display' => 'Submit Form',
+            'opts'    => array('class' => 'button')
         );
 
         $this->setupElements($e);

diff --git a/Toolkit/Contacts/templates/contactForm.html b/Toolkit/Contacts/templates/contactForm.html
index 2f2f84a..23108fd 100644 (file)
--- a/Toolkit/Contacts/templates/contactForm.html
+++ b/Toolkit/Contacts/templates/contactForm.html
@@ -1,71 +1,77 @@
-<div id="contact">
+
     {form.javascript:h}
     {form.outputHeader():h}
     {form.hidden:h}
     {hidden}
-    <table>
+
     {foreach:form.sections,sec}
-    <tr>
-        <td class="header" colspan="2">
-        <b>{sec.header:h}</b></td>
-    </tr>
+    {if:sec.header}
+    <fieldset>
+            <legend>{sec.header:h}</legend>
+    {end:}
+                    <div class="row">
         {foreach:sec.elements,elem}
             {if:elem.style}
               {elem.outputStyle():h}
             {else:}
                 {if:elem.isButton()}
                     {if:elem.notFrozen()}
-                    <tr>
-                        <td class="labelcell">&nbsp;</td>
-                        <td class="fieldcell">{elem.html:h}</td>
-                    </tr>
+                        <div class="medium-6 small-12 columns">{elem.html:h}</div>
+                    
                     {end:}
                 {else:}
-                    <tr>
+                    {if:elem.error}
+                        <div class="medium-6  small-12 columns error">
+                    {else:}
+                        <div class="medium-6  small-12 columns">
+                        {end:}
                     {if:elem.isType(#textarea#)}
-                        <td colspan="2">
+                        {if:elem.required}<label class="error">{else:}<label>{end:}
+
                             {if:elem.required}<span class="req">*</span>{end:}
-                            {if:elem.error}<div class="req">{end:}
-                            {elem.label:h}<br>
-                            {if:elem.error}</div>{end:}
+                            {elem.label:h}
                     {else:}
                         {if:elem.isType(#CAPTCHA_Image#)}
-                            <td class="labelcell captcha">
+                                {if:elem.required}<label>{else:}<label class="error">{end:}
                                 {if:elem.required}<span class="req">*</span>{end:}
-                                {if:elem.error}<div class="req">{end:}
-                                {elem.label:h}
-                                {if:elem.error}</div>{end:}
-                            </td>
-                            <td class="fieldcell">
+                            {elem.label:h}
+
                         {else:}
                             {if:elem.isType(#group#)}
-                                <td colspan="2">
+                                {if:element.isName(#interest#)}
+                                {else:}
+                                    {if:elem.required}<label class="error">{else:}<label>{end:}
                                     {if:elem.required}<span class="req">*</span>{end:}
-                                    {if:elem.error}<div class="req">{end:}
                                     {elem.label:h}<br>
-                                    {if:elem.error}</div>{end:}
+                                {end:}
                             {else:}
-                                <td class="labelcell">
+
+                                    {if:elem.required}<label class="error">{else:}<label>{end:}
                                     {if:elem.required}<span class="req">*</span>{end:}
-                                    {if:elem.error}<div class="req">{end:}
                                     {elem.label:h}
-                                    {if:elem.error}</div>{end:}
-                                </td>
+
                                 {if:elem.isName(#interest#)}
-                                    <td class="fieldcell checkbox">
+
                                 {else:}
-                                    <td class="fieldcell">
+
                                 {end:}
                             {end:}
                         {end:}
                     {end:}
-                    {if:elem.error}<div class="error">{elem.error}</div>{end:}
+
                     {if:elem.isType(#group#)}
-                        {foreach:elem.elements,gitem}
-                            {gitem.label:h}
-                            {gitem.html:h}{if:gitem.required}<div class="req">*</div>{end:}
-                            {if:elem.separator}{elem.separator:h}{end:}
-                        {end:}
+
+                        <div class="row collapse">
+
+                            {foreach:elem.elements,gitem}
+                            <div class="small-12 columns">
+                                {gitem.html:h}{if:gitem.required}<div class="req">*</div>{end:}
+                                {if:elem.separator}{elem.separator:h}{end:}
+                            </div>
+                            {end:}
+
+                        </div>
+
                     {else:}
                         {elem.html:h}
                         {if:elem.isName(#captcha_rmv#)}
@@ -77,16 +83,22 @@
                             </span>
                         {end:}
                     {end:}
-                </td>
-              </tr>
+                                    </label>
+                            {if:elem.error}<small class="error">{elem.error}</small>{end:}
+                                </div> <!-- end for columns -->
                 {end:}
             {end:}
         {end:}  <!-- end for foreach:sec.element,elem -->
+                    </div> <!-- end for row -->
+
+    {if:sec.header}
+    </fieldset>
+    {end:}
     {end:} <!-- end for foreach:form.section,sec -->
 
-               </table>
+
        </form>
        {if:form.requirednote}
     <div>{form.requirednote:h}</div>
     {end:}
-</div>
+