I'm new to dev, just learning it as we speak. I've yet to learn PHP and JavaScript/JQuery so I'm having trouble with my contact form on my site.
The JavaScript seems to be working, but the PHP action isn't. It's open script I've pulled from the web, so I'm sure the actions are missing some code and since I have no idea what I'm looking at, I'm completely lost. Any help would be amazing.
<!-- FORM -->
<form id="form" form role="form" action="contact_form.php" method="post">
<p id="returnmessage"></p>
<br/>
<label>Name: <span>*</span></label>
<br/>
<input type="text" id="name" placeholder="Name"/><br/>
<br/>
<label>Email: <span>*</span></label>
<br/>
<input type="text" id="email" placeholder="Email"/><br/>
<br/>
<textarea id="message" placeholder="Message......."></textarea><br/>
<br/>
<input type="button" id="submit" value="Send"/>
<br/>
</form>
PHP
<?php
//Fetching Values from URL
$name = $_POST['name1'];
$email = $_POST['email1'];
$message = $_POST['message1'];
$contact = $_POST['contact1'];
//sanitizing email
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
//After sanitization Validation is performed
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
if (!preg_match("/^[0-9]{10}$/", $contact)) {
echo "<span>* Please Fill Valid Contact No. *</span>";
} else {
$subject = $name;
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "
";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "
";
$headers .= 'From:' . $email. "
"; // Sender's Email
$headers .= 'Cc:' . $email. "
"; // Carbon copy to Sender
$template = '<div style="padding:50px; color:white;">Hello ' . $name . ',<br/>'
. '<br/>Thank you...! For Contacting Us.<br/><br/>'
. 'Name:' . $name . '<br/>'
. 'Email:' . $email . '<br/>'
. 'Contact No:' . $contact . '<br/>'
. 'Message:' . $message . '<br/><br/>'
. 'This is a Contact Confirmation mail.'
. '<br/>'
. 'We Will contact You as soon as possible .</div>';
$sendmessage = "<div style=\"background-color:#7E7E7E; color:white;\">" . $template . "</div>";
// message lines should not exceed 70 characters (PHP rule), so wrap it
$sendmessage = wordwrap($sendmessage, 70);
// Send mail by PHP Mail Function
mail(ash.cruikshank@gmail.com, $subject, $sendmessage, $headers);
echo "Your Query has been received, We will contact you soon.";
}
} else {
echo "<span>* invalid email *</span>";
}
JAVASCRIPT
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$("#returnmessage").empty(); //To empty previous error/success message.
//checking for blank fields
if(name==''||email==''||contact=='')
{
alert("Please Fill Required Fields");
}
else{
// Returns successful data submission message when the entered information is stored in database.
$.post("contact_form.php",{ name1: name, email1: email, message1:message, contact1: contact},
function(data) {
$("#returnmessage").append(data);//Append returned message to message paragraph
if(data=="Your Query has been received, We will contact you soon."){
$("#form")[0].reset();//To reset form fields on success
}
});
}
});
});
Your first problem is that you are not naming any of your variables from your html form. PHP needs these to be able to process the information. For instance:
<input type="text" id="name" placeholder="Name"/>
Needs to have a name field (not just the id, type, and placeholder). Here is how it should look to match the post variables in your PHP script:
<input type="text" id="name" name="name1" placeholder="Name"/>
You should do this with the rest of the HTML inputs as well. Make sure they match the variable in the POST in the php form (that's the one that is called $_POST[''] in the PHP script) This will solve your first problem.
Also, as is mentioned in the comments, especially when developing your code, it's a very good idea to put error reporting in the top of your code to catch any problems. You can get some very information errors if you put this at the top of your code:
<?php error_reporting(E_ALL); ini_set('display_errors', 1); ?>
Note, it's also probably a good idea to save the email address in a variable, rather than hard-coding it.
As for the sendmessage variable, you will need to concatenate the variables like this (as is mentioned above in the comments), otherwise the second $sendmessage variable will overwrite the second one. (note the . just before the = on the second row)
$sendmessage = "<div style=\"background-color:#7E7E7E; color:white;\">" . $template . "</div>";
$sendmessage .= wordwrap($sendmessage, 70);
However, you might want to clean it up a little just to make sure it works. Before you star trying to concatenate two items into one variable try something like this as a plain text message in just one variable. It should send through fine, and then you can worry about the formatting later once you understand how it works.
I recommend reading up on some tutorials as well (http://w3schools.com is pretty good for learning), but this sort of thing you are doing is a good place to start. If you run into more troubles, try stripping down the code to its bare minimum (e.g. remove the HTML segments from the email; just send it as plain text first to make sure that is working and after that put it back in, remove the regex check, and the javascript until you have the form working, and then bit by bit adding the pieces back in. This way you'll get a better understanding how the pieces work).
Change
$name = $_POST['name1']; $email = $_POST['email1']; $message = $_POST['message1']; $contact = $_POST['contact1'];
to
$name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $contact = $_POST['contact'];
And give name attribute (name="name", name="email" ..)to each inputs.
It will be work.