reLEAF Contact Form Snippets
Sidebar Start
<p>Call us at <strong>1-800-555-5555</strong><br>
Email us at info@releaf.org</p>
<img src="images/tree-dirt.jpg" alt="tree in dirt">
Sidebar Complete
<p>Call us at <strong>1-800-555-5555</strong><br>
Email us at <a href="mailto:info@releaf.org">info@releaf.org</a></p>
<img src="images/tree-dirt.jpg" alt="tree in dirt">
Contact Form Start
<form method="post" action="processor.php" id="contactform">
<p><label for="name"><strong>Your Name</strong></label><br>
<input type="text" name="name" id="name"></p>
<p><label for="email"><strong>Your Email</strong></label><br>
<input type="text" name="email" id="email"></p>
<p><label for="phone"><strong>Your Phone</strong></label><br>
<input type="text" name="phone" id="phone"></p>
<p><label for="comments"><strong>Comments</strong></label><br>
<textarea name="comments" id="comments" cols="40" rows="10"></textarea>
</p>
</form>
Contact Form Part 2
<fieldset>
<legend><strong>Contact Method</strong></legend>
<label><input type="radio" name="contactpref" checked value="phone" id="phonecontact"> Phone</label><br>
<label><input type="radio" name="contactpref" value="email" id="emailcontact"> Email</label>
</fieldset>
Contact Form Part 3
<fieldset>
<legend><strong>Interests</strong> <span class="small">(choose at least two)</span></legend>
<label>
<input type="checkbox" name="interests[]" value="newsletter" id="newsletter"> Newsletter
</label><br>
<label>
<input type="checkbox" name="interests[]" value="planting" id="planting"> Planting
</label><br>
<label>
<input type="checkbox" name="interests[]" value="outreach" id="outreach"> Outreach
</label><br>
<label>
<input type="checkbox" name="interests[]" value="action" id="action"> Political Action
</label><br>
<label>
<input type="checkbox" name="interests[]" value="leadership" id="leadership"> Leadership
</label><br>
</fieldset>
Contact Form Part 4
<p><input type="submit" id="submit" name="submit" value="Submit Info"></p>
Form with DIVs in Place
<form method="post" action="processor.php" id="contactform">
<div class="leftside">
<p><label for="name"><strong>Your Name</strong></label><br>
<input type="text" name="name" id="name"></p>
<p><label for="email"><strong>Your Email</strong></label><br>
<input type="text" name="email" id="email"></p>
<p><label for="phone"><strong>Your Phone</strong></label><br>
<input type="text" name="phone" id="phone"></p>
<p><label for="comments"><strong>Comments</strong></label><br>
<textarea name="comments" id="comments" cols="40" rows="10"></textarea>
</p>
</div><!-- end leftside -->
<div class="rightside">
<fieldset>
<legend><strong>Contact Method</strong></legend>
<label>
<input type="radio" name="contactpref" checked value="phone" id="phonecontact"> Phone
</label><br>
<label>
<input type="radio" name="contactpref" value="email" id="emailcontact"> Email
</label>
</fieldset>
<fieldset>
<legend><strong>Interests</strong> <span class="small">(choose at least two)</span></legend>
<label>
<input type="checkbox" name="interests[]" value="newsletter" id="newsletter"> Newsletter
</label><br>
<label>
<input type="checkbox" name="interests[]" value="planting" id="planting"> Planting
</label><br>
<label>
<input type="checkbox" name="interests[]" value="outreach" id="outreach"> Outreach
</label><br>
<label>
<input type="checkbox" name="interests[]" value="action" id="action"> Political Action
</label><br>
<label>
<input type="checkbox" name="interests[]" value="leadership" id="leadership"> Leadership
</label><br>
</fieldset>
<p><input type="submit" id="submit" name="submit" value="Submit Info"></p>
</div><!-- end rightside -->
</form>
Basic Form Styles
form {
font-size:85%;
padding-top:20px;
}
fieldset {
margin-bottom: 1em;
}
.leftside {
width:260px;
float:left;
}
.leftside input, .leftside textarea {
width: 260px;
}
.rightside {
width:200px;
float:right;
}
.small {
font-size:70%;
}
fieldset label {
font-size:90%;
}
Validate function start
$("#contactform").validate({});
Validate function part 2
$("#contactform").validate({
rules: { name: "required", email: {required: true, email: true} }
});
Validate function part 3
$("#contactform").validate({
rules: {
name: "required",
email: {required: true, email: true},
"interests[]": {required: true, minlength: 2}
}
});
Validate phone numbers
$.validator.addMethod("phoneRegex", function(value, element) {
return this.optional(element) || /^?[\d]3?[\s-]?[\d]{3}[\s-]?[\d]{4}$/i.test(value);
}, "Valid U.S. Phone Number please!");
Validate function part 4
$("#contactform").validate({
rules: {
name: "required",
email: {required: true, email: true},
"interests[]": {required: true, minlength: 2},
phone: {required: true, phoneRegex: true}
},
messages: {
name: "Your name is required",
email: {required: "Email is required", email: "Valid email address please"},
phone: {required: "Phone is required", phone: ""},
"interests[]": "Choose at least two interests"
}
});
Complete validator script
$("#contactform").validate({
rules: {
name: "required",
email: {required: true, email: true},
"interests[]": {required: true, minlength: 2},
phone: {required: true, phoneRegex: true}
},
messages: {
name: "Your name is required",
email: {required: "Email is required", email: "Valid email address please"},
phone: {required: "Phone is required", phone: ""},
"interests[]": "Choose at least two interests"
},
errorContainer: "#messagebox",
errorLabelContainer: "#messagebox ul",
wrapper: "li"
});
Message Box HTML
<div id="messagebox">
<h3>Please Fix These Errors</h3>
<ul></ul>
</div>
Message Box Styles
#messagebox {
width:256px;
color: #000;
font-size:80%;
background:#fedbe5;
border:2px solid #900;
padding:3px;
margin-bottom:10px;
display:none;
}
#messagebox li {
list-style-type:disc;
margin-left:20px;
}
input[type="text"].error {
background:#fedbe5;
}
jQuery AJAX functions
$('#contactform').submit(function(event){
if($('#contactform').valid() == true)
{
var dataString = $(this).serialize();
//alert(dataString);
$.ajax({
type: "POST",
url: "processor2.php",
data: dataString,
success: function(data){ $( "#form-feedback" ).html(data); }
});
}
event.preventDefault();
});
Clear form function
// Use this clearForm function to clear the contents of a form after submission.
$.fn.clearForm = function()
{
return this.each(function()
{
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form')
return $(':input',this).clearForm();
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = '';
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
else if (tag == 'select')
this.selectedIndex = -1;
});
};
Full AJAX Script
$('#contactform').submit(function(event){
if($('#contactform').valid() == true)
{
var dataString = $(this).serialize();
//alert(dataString);
$.ajax({
type: "POST",
url: "processor2.php",
data: dataString,
success: function(data){
$( "#form-feedback" ).html(data);
$('#contactform').clearForm();
$("#phonecontact").attr('checked', 'checked');
}
});
}
event.preventDefault();
});