Hello everybody,

I have tried for almost two days to make an in-line text in the input forms via the <label> tag. It would work if it wasn't for the extra <div> placed around the input, textarea, etc.

My question is, what can I do about it?
Is it possible to change the form that contour is rendering to a more usable html output?

else...

I have started up with my label, input stuff - and maybe it's just me that f***s up in the code.

Here is the jQuery I tried using for the inline form label output:

$(document).ready(function(){
   $("label.fieldLabel + div input.text").each(function (type) {
      Event.observe(window, 'load', function () {
         setTimeout(function(){
            if (!input.value.empty()) {
               input.previous().addClassName('has-text');
            }
         }, 200);
      });
    
      $(this).focus(function () {
         $(this).prev("label.fieldLabel").addClass("focus");
      });
   
      $(this).keypress(function () {
         $(this).prev("label.fieldLabel").addClass("has-text").removeClass("focus");
      });
   
      $(this).blur(function () {
         if($(this).val() == "") {
            $(this).prev("label.fieldLabel").removeClass("has-text").removeClass("focus");
         }
      });
   });
});

and css goes here.

.forsidepopup .contourPageName {
    font-size: 11px;
    line-height: 1.5em;
    margin: 0;
}

.forsidepopup fieldset {
    margin: 0;
    padding: 0;
}

.forsidepopup legend {
    margin: 0;
    padding: 0 0 10px 0;
    color: #6f9d67;
    width: 220px;
}

#contour label.fieldLabel {
    padding-left: 6px;
    font-weight: normal;
    font-size: 12px;
    font-family: "Helvetica Neue";
    opacity: 0.75;
    -webkit-transition: opacity 0.15s linear;
    color: #000;
}

#contour label { position: relative; z-index: 1; } /* Used in jQuery */
#contour input.text { position: relative; z-index: 2; } /* Used in jQuery */

#contour label.focus { opacity: 0.35; } /* Used in jQuery */
#contour label.has-text { opacity: 0.0; -webkit-transition-duration: 0s; } /* Used in jQuery */

label.fieldLabel + div input.text {
   margin-top: -22px;
} /* Used in jQuery */

#contour input {
    padding: 2px 5px;
    width: 110px;
    border-bottom: 1px solid #e3e9ef;
    border-bottom: 1px solid #e3e9ef;
    border-bottom: 1px solid #e3e9ef;
    border-top: 1px solid #abadb3;
}

#contour textarea {
    padding: 2px 5px;
    width: 110px;
    height: 90px;
    border-bottom: 1px solid #e3e9ef;
    border-bottom: 1px solid #e3e9ef;
    border-bottom: 1px solid #e3e9ef;
    border-top: 1px solid #abadb3;
}

#contour select {
    width: 100px;
    padding: 2px 0 2px 5px;
    border-bottom: 1px solid #e3e9ef;
    border-bottom: 1px solid #e3e9ef;
    border-bottom: 1px solid #e3e9ef;
    border-top: 1px solid #abadb3;
}

#contour input.contourSubmit {
    width: 80px;
    color: #fff;
    background: #08893f; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#119d4c', endColorstr='#017733'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#119d4c), to(#017733)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #119d4c,  #017733); /* for firefox 3.6+ */
    border-bottom: 1px solid #0e2508;
    border-left: 1px solid #538648;
    border-right: 1px solid #204d17;
    border-top: 1px solid #8fb588;
    -moz-border-radius: 3px;
    -webkit-border-radius:3px; /* bottom left corner */
     border-radius: 3px;
    position: absolute;
    right: 20px;
    bottom: 15px;
}

#contour input.contourSubmit:hover {
    color: #fff;
    background: #017733; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#017733', endColorstr='#62AF6D'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#017733), to(#62AF6D)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #017733,  #62AF6D); /* for firefox 3.6+ */
}

#contour .contourField {
    position: relative;
    float: left;
    margin: 0 5px 0 0;    
}

The rest of the form is build in Contour so it should look like all the others out there. I really hope someone can help me out here.

Kind regards,

Niels