Versions:
MODx Revolution 2.0.8-pl (traditional)
FormIt 1.5.4 pl
The labels are hidden with CSS, the values are displayed in the field and automatically cleared onFocus and onBlur. When I fill out the form, everything works fine, the form sends, the confirmation and errors show up when they’re suppose to, but when there is an error, it doesn’t keep the user’s input; It reverts back to the default value.
(The javascript in there is just to clear out the forms when the user clicks on them. I usually link an external .js to the form, but I figured I’d put the script in there just in case there’s something about it. Doubt it. I’ve been using the script for years.)
[[!FormIt?
&hooks=`spam,email`
&emailTpl=`contact-report`
&emailTo=`[email protected]`
&emailFrom=`[[+email]]`
&emailFromName=`[[+full-name]]`
&emailSubject=`Message from Contact Us Form`
]]
<script type="text/javascript">
function clickClear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = "";
} else if (thisfield.value == ""){
thisfield.value = defaulttext;
}
}
</script>
[[+fi.success:if=`[[+fi.success]]`:eq=`1`:then=`<h6>Thank you! Your message has been sent.</h6>`]]
[[!+fi.error_message:notempty=`<h6>Please fill out all required (*) fields.</h6>`]]
<form action="[[~[[*id]]]]" method="post">
<input type="hidden" name="nospam:blank" value="" />
<fieldset class="inputs">
<div class="form-field">
<label for="full-name">Full Name: </label>
<input type="text" [[!+fi.error.full-name:notempty=`class="error"`]] name="full-name:required" id="full-name" value="[[+fi.full-name:default=`Full Name (*)`]]" onfocus="clickClear(this, 'Full Name (*)')" onblur="clickClear(this, 'Full Name (*)')" />
</div>
<div class="form-field">
<label for="company">Company:</label>
<input type="text" name="company" id="company" value="[[+fi.company:default=`Company`]]" onfocus="clickClear(this, 'Company')" onblur="clickClear(this, 'Company')" />
</div>
<div class="form-field">
<label for="telephone">Telephone:</label>
<input type="text" name="telephone" id="telephone" value="[[+fi.telephone:default=`Phone Number`]]" onfocus="clickClear(this, 'Phone Number')" onblur="clickClear(this, 'Phone Number')" />
</div>
<div class="form-field">
<label for="email">Email Address: </label>
<input type="text" name="email:required" id="email" [[!+fi.error.email:notempty=`class="error"`]] value="[[+fi.email:default=`Email Address (*)`]]" onfocus="clickClear(this, 'Email Address (*)')" onblur="clickClear(this, 'Email Address (*)')" />
</div>
</fieldset>
<fieldset class="textarea">
<div class="form-field">
<label for="comments">Questions or Comments </label>
<textarea name="comments" id="comments" cols="30" rows="10" onfocus="clickClear(this, 'Your Questions or Comments (*)')" onblur="clickClear(this, 'Your Questions or Comments (*)')">[[+fi.comments:default=`Your Questions or Comments (*)`]]</textarea>
<input type="submit" class="submitbtn" name="submit" id="submit" value="Submit" />
</div>
</fieldset>
<div class="clear"></div>
</form>
