3 Replies Latest reply on Jan 3, 2014 2:29 PM by Sonia Kelly

    Two column form conflict

    Sonia Kelly
      Hi,

      I'm having a problem creating a two column form, and placing a label above a group of form fields in that two column form. To create the two column form, I used the community resource here: http://community.marketo.com/MarketoResource?id=kA650000000GttkCAC

      I then used this resource to add labels above a group of form fields: http://community.marketo.com/MarketoResource?id=kA650000000GtrACAS

      For some reason, the second label will not move to the correct position: http://heavycivil.trimble.com/connect.html
      "What Can We Help You With?" should appear before "Software Solutions" in the form.

      Here is my code:
      // Set up landing page

      <style type='text/css'>
      form.lpeRegForm li.mktField {
      float: left;
      width:300px;
      clear: none;
      height: 45px;
      }

      form.lpeRegForm ul {
      width:900px;
      }

      #mktFrmButtons {
      clear: both;
      }

      </style>

      // Move error messages

      <style type="text/css">
      span.mktFormMsg
      {
      left: 0px !important;
      top: 15px !important;
      }
      </style>

      // Add Section Breaks and Labels

      <script type="text/javascript" src="/js/public/jquery-latest.min.js"></script>
      <script type="text/javascript">
        $jQ = jQuery.noConflict();
        $jQ(document).ready(function(){
      $jQ('#FirstName').parents('li').before("<div style='padding-bottom:20px;font-weight:bold;'>Your Information</div>");
        });
            $jQ('#Software_solutions__c').parents('li').css('clear','both');
      $jQ('#Zip_Postal_Code__c').parents('li').css('margin-bottom','80px');
          $jQ('#Software_solutions__c').parents('li').before("<div style='padding-bottom:20px;font-weight:bold;'>What Can We Help You With?</div>");
      </script>

      <style>
      .mktInput input, .mktInput select, .mktInput textarea  {
      border-top: 1px solid #D4D2D2 !important;
      border-right: 3px solid #D4D2D2 !important;
      border-bottom: 3px solid #D4D2D2 !important;
      border-left: 1px solid #D4D2D2 !important;
      border-radius: 8px !important;
      -webkit-border-radius: 8px !important;
      -moz-border-radius: 8px !important;
      color: #303030 !important;
      padding: 7px !important;
      margin: 0px !important;
      border-top-left-radius: 8px 8px;
      border-top-right-radius: 8px 8px;
      border-bottom-right-radius: 8px 8px;
      border-bottom-left-radius: 8px 8px;
      }
      </style>


      I really don't know where to go from here, but I'm not a javascript expert - thanks in advance for your help!

      Sonia
        • Re: Two column form conflict
          Sonia Kelly
          Hi again,

          I've decided to fudge it - I'll leave a section break in the form and then put the text in the space. Here's a screenshot of what the page looks like with the above error, though, in case anyone can figure out what I did wrong.

          0EM50000000RLTk
          • Re: Two column form conflict
            Sonia, I'm no javascript expert either, but on looking at this I would question the need for the section marked with strike through characters. Just an idea to try.

            ...
            // Add Section Breaks and Labels

            <script type="text/javascript" src="/js/public/jquery-latest.min.js"></script>
            <script type="text/javascript">
              $jQ = jQuery.noConflict();
              $jQ(document).ready(function(){
            $jQ('#FirstName').parents('li').before("<div style='padding-bottom:20px;font-weight:bold;'>Your Information</div>");
              });
                  $jQ('#Software_solutions__c').parents('li').css('clear','both');
            $jQ('#Zip_Postal_Code__c').parents('li').css('margin-bottom','80px');

                $jQ('#Software_solutions__c').parents('li').before("<div style='padding-bottom:20px;font-weight:bold;'>What Can We Help You With?</div>");
            </script>

            • Re: Two column form conflict
              Sonia Kelly
              Thanks, Jerry - I will try it and report back if it works. :)