I'm creating a website with a Page Builder made for the Greater Southern Tier Districts.
I tried to create a contact form, but I can't figure out how to make the form send the message to my email.
Contact Form:
<divz id="p473I"><!--NEW ID-->
<script>
$(document).ready(function(){
$('#send_message').click(function(e){
//Stop form submission & check the validation
e.preventDefault();
// Variable declaration
var error = false;
var name = $('#name').val();
var email = $('#email').val();
var message = $('#message').val();
var txtInput = $('#txtInput').val();
// Form field validation
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(500);
}else{
$('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('@') == '-1'){
var error = true;
$('#email_error').fadeIn(500);
}else{
$('#email_error').fadeOut(500);
}
if(message.length == 0){
var error = true;
$('#message_error').fadeIn(500);
}else{
$('#message_error').fadeOut(500);
}
if(txtInput.length == 0){
var error = true;
$('#txtInput_error').fadeIn(500);
}else{
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
$('#txtInput_error').fadeOut(500);
}else{
$('#txtInput_error').fadeIn(500);
var error = true;
}
}
if(error == false){
// Disable submit button just after the form processed 1st time successfully.
$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
$.post("http://pages.gstboces.org/page/sendMail.cfm", $("#contact_form").serialize(),function(result){
//Check the result set
if(result == 'sent'){
//If the email is sent successfully, remove the submit button
$('#submit').remove();
//Display the success message
$('#mail_success').fadeIn(500);
}else{
//Display the error message
$('#mail_fail').fadeIn(500);
// Enable the submit button again
$('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
}
});
}
});
//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ "";
var b = Math.ceil(Math.random() * 9)+ "";
var c = Math.ceil(Math.random() * 9)+ "";
var d = Math.ceil(Math.random() * 9)+ "";
var e = Math.ceil(Math.random() * 9)+ "";
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
});
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
alert(str1);alert(str2);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(" ").join("");
}
</script>
<style>
.error{display:none;padding:10px;margin:0 0 5px 0;color:#D8000C;font-size:12px;background-color:#FFBABA;}
.success{display:none;padding:10px;color:#044406;font-size:12px;background-color:#B7FBB9;}
</style>
<div class="item contact" id="contact2">
<div class="container">
<div class="col-md-4 col-md-offset-2">
<h4>Contact me</h4>
<p>
Click "Content" above and then you can click here to edit this text.
</p>
<p class="small">
Thank you
</p>
</div><!-- ./col-md-4 -->
<div class="col-md-4 col-offset-2">
<h4>Get in touch</h4>
<form role="form" action="sendMail.cfm" name="contactForm" id="contact_form" enctype="text/plain" method="post">
<div id="name_error" class="error">Please enter your name.</div>
<div class="form-group">
<input type="text" class="form-control input-lg" id="name" name="name" placeholder="Your name *">
</div>
<div id="email_error" class="error">Please enter your valid E-mail ID.</div>
<div class="form-group">
<input type="email" class="form-control input-lg" id="email" name="email" placeholder="Your email *">
</div>
<div id="message_error" class="error">Please enter your message.</div>
<div class="form-group">
<textarea class="form-control" rows="4" id="message" name="message" placeholder="Add comment..."></textarea>
</div>
<div id="mail_success" class="success">Your message has been sent successfully.</div>
<div id="mail_fail" class="error">Sorry, error occured this time sending your message.</div>
<div>
<font color="#DD0000">Enter Code ></font>
<span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px">94145</span>
<input type="hidden" id="txtCaptcha" value="94145">
<input type="text" name="txtInput" id="txtInput" size="15">
<div id="txtInput_error" class="error">Please enter code shown.</div>
</div>
<p id="submit">
<button type="submit" id="send_message" class="btn btn-primary btn-embossed btn-lg btn-wide"><span class="fui-mail"></span> Submit</button> </p>
</form>
</div><!-- /.col-md-4 -->
</div><!-- /.container -->
</div><!-- /.item -->
<p align="right"><a href="#top" style="text-decoration:underline;">Top</a></p> </divz><!--NEW ID-->
Here's the actual site:
http://pages.gstboces.org/StudHaven
