Here’s a contact form setup I use.
Snippet call:
[!checkField!]
<p>
<span class="Normal">Your ideas and suggestions are welcome!</span>
</p>
[!eForm? &formid=`CommentEn` &tpl=`CommentFormEn` &to=`[email protected]` &subject=`Contact Form Submission` &replyto=`Email` &report=`CommentReport` &eformOnValidate=`checkField`!]
Note the checkField snippet before the eForm snippet.
The checkField snippet (this makes sure the field is empty)
function checkField(&$fields,&$vMsg,&$rMsg) {
if(!empty($fields['Last__Name'])) {
return false;
} else {
return true;
}
}
The CommentForm chunk (this is a multilanguage site, so I have En and De versions)
[+validationmessage+]
<form id="CommentEn" action="[~[*id*]~]" method="post">
<fieldset class="fields">
<label for="Email">Your email:<span class="required">*</span></label>
<input type="text" name="Email" id="Email" class="text" eform="Email:email:1" />
<label for="Name">Name:<span class="required">*</span></label>
<input type="text" name="Name" id="Name" class="text" eform="Name::1" />
<input type="text" name="Last__Name" id="LastName" size=30 autocomplete="off" eform="LastName::0" />
<label for="Subject">Subject:<span class="required">*</span></label>
<input type="text" name="Subject" id="Subject" class="text" eform="Subject::1" />
<label for="Comments">Comments:<span class="required">*</span></label>
<textarea name="Comments" id="Comments" class="textarea" eform="Comments::1" /></textarea><br />
<input type="submit" name="submit" id="submit" class="button" value="Send" />
</fieldset>
</form>
The report chunk:
<strong>Contact / Comments</strong>
<p><strong>Name:</strong> [+Name+]</p>
<p><strong>Email:</strong> [+Email+]</p>
<p><strong>Subject:</strong> [+Subject+]</p>
<p><strong>Comments:</strong> [+Comments+]</p>
And the CSS to style it all, plus hide the "security" field:
#center form {
margin:20px 0 20px 20px;
}
#center fieldset{
border:none;
padding:10px;
margin:20px 0;
}
#center legend {
font-weight:bold;
}
#center label {
width:150px;
margin-left:10px;
text-align:left;
}
#center fieldset.radiofields label{
width:150px;
margin:0 5px;
}
#center fieldset.radiofields input.radio{
margin-right:5px;
}
#center input.text, #center textarea {
display:block;
margin-left:10px;
margin-bottom:10px;
width:300px;
}
#center form br {
clear:left;
line-height:1px;
}
#center input.button {
font-size:1.2em;
margin-left:150px;
padding:2px;
color: #ffffff;
background: #000060;
border: 1px solid #000060;
text-align:center;
display: inline;
}
div.errors{
color:red;
padding:6px 10px;
margin-left:15px;
}
span.required{
color:red;
}
#CommentEn #LastName, #CommentDe #LastName{
position:absolute;
text-decoration:underline;
background-color:#CC0000;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
☆ A M B ☆
