I’ve been combing forums for 2 weeks now trying to find a way to have a working contact form on my portfolio site. I couldn’t have fathomed how difficult this task is turning out to be. I’m a competent HTML and CSS developer. PHP, however, is new to me. I’ve been studying up on it at treehouse and understand the basic $_POST, *echo, and !isset commands.
I’m so frustrated after trying many different solutions I just want it to work!!!
I’m fairly certain my HTML is solid but I’ll post that anyways. I’m pretty sure the problem is in the PHP that I have. I’m not married to this solution so if you know of a simpler way to send 3 bits of info (name, email, and message) from a contact form on site to my email inbox I’d love to hear it.
Any help is greatly appreciated
Form HTML
<div class="contact_form">
<div class="touch"> </div>
<form id="contact_me_form" method="post" action="email.php">
<div class="error_contact" id="name_error">Name is Required</div>
<input type="text" placeholder="Your Name (required)" id="name" class="textbox" />
<input type="text" name="email" id="email" placeholder="Your Email (required)" class="textbox email">
<div class="error_contact" id="comment_error">Message is Required</div>
<textarea cols="25" rows="5" name="message" id="comment" class="textbox message" placeholder="Your Message ( Inquiry? , Freelance Work? , or Just to Say Hi...)"></textarea>
<input type="image" src="img/send.png" alt="Send Message" name="submit" class="button submit_btn">
</div>
Also it’s extremely bad practice to name your form inputs with a value of name, the value should be meaningful. For instance name could instead be fullname.
Yes, those errors Chris pointed out are important. It’s also a shame the form has no labels, which is good for accessibility, even if you hide them. The form also includes little or security, which is worth including too. I have a form on my site that people have found handy, so feel free to check that out (link in my signature). It includes security and a honeypot to ward off spam bots.
Thank you both for the warm welcome and tips. As i said PHP is very new to me, so adding security to it is WAY over my head.
My biggest concern is getting it to actually send the data inputed to my email. I fixed the capitalization issue and added the name attribute on my name input but unfortunately it’s still not sending. However, that was somehow interfering w/ my java script which is now working so now at least SOMETHING happens when you click submit I didn’t think the two (PHP and Javascript) would get in eachothers way but apparently they do so I’m posting the relevant Java script as well.
$(function() {
$('.error_contact').hide();
$('.contact_input').css({backgroundColor:"#FFFFFF"});
$('.contact_input').focus(function(){
$(this).css({backgroundColor:"#F4F4F4"});
});
$('.contact_input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".submit_btn").click(function() {
// validate and process form
// first hide any error messages
$('.error_contact').hide();
var name = $("input#name").val();
if (name == "") {
$("#name_error").show();
$("input#name").css({border:"1px solid #B9B925"});
return false;
}
var hasError = false;
var emailReg = /^([\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4})?$/;
var email = $("input#email").val();
if(email == '') {
$("input#email").css({border:"1px solid #B9B925"}).before('<div class="error_contact" id="email_error">Please enter your email address</div>');
hasError = true;
}
else if(!emailReg.test(email)) {
$("input#email").css({border:"1px solid #B9B925"}).before('<div class="error_contact" id="email_error">Enter a valid email address</div>');
hasError = true;
}
if(hasError == true) { return false; }
var comment = $("textarea#comment").val();
if (comment == "") {
$("#comment_error").show();
$("textarea#comment").css({border:"1px solid #B9B925"});
return false;
}
var dataString = '&name=' + name + '&email=' + email + '&comment=' + comment;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
var m = $("#message");
$("input#name").css({border:"1px solid #B5B5B5"});
$("input#email").css({border:"1px solid #B5B5B5"});
$("textarea#comment").css({border:"1px solid #B5B5B5"});
m.animate({
"top": "-73px",
"opacity": "1"
},"fast");
setTimeout(function () {
m.animate({
"top": "-105px",
"opacity": "0"
},"slow");
}, 8000);
}
});
return false;
});
});
Ralph I checked out the Form on your site as well as the _setup.html and a great deal of it confuses me. I’m afraid that if I dropped this PHP for yours that I would screw things up even more then they already are. I understand (or at least think I understand :scratch:) every line in the PHP I’m currently using. Perhaps there is something in my Javascript keeping email.php from running.
I didn’t think the two (PHP and Javascript) would get in eachothers way but apparently they do so I’m posting the relevant Java script as well.