I am not able to edit this 'contact us' form code work and deliver messages to my mail-box.
Say I wanted to get messages delivered to my email: doherty#noob.com, how do I edit this code do the task?
<div class="conatct-form">
<ul class="form">
<li>
<input type="text" class="text" value="Name*" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name*';}" >
</li>
<li>
<input type="text" class="text" value="Email*" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email*';}" >
</li>
<li>
<textarea value="Message*:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Message*';}">Message*</textarea>
</li>
<div class="sub-button">
<input type="submit" value="SEND">
</div>
</ul>
</div>
I've optimized your code and added some PHP code
PHP code
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
if (isset($name, $email, $message)) {
// Insert into database
$query = mysql_query("INSERT INTO contacts ...");
if ($query) {
// send email using phpmailer, sendmail, ...
mail($mail, 'Subject', $message, '...');
}
}
?>
HTML
<form id="contact-form" method="post">
<ul>
<li>
<!--
Substituting the code below
<input type="text"
value="Name *"
onfocus="this.value=''"
onblur="if (this.value == '') {this.value = 'Name *'}" />
use the placeholder attribute instead
-->
<input type="text" name="name" placeholder="Name *" />
</li>
<li>
<input type="text" name="email" placeholder="Email *" />
</li>
<li>
<textarea name="message" placeholder="Message *"></textarea>
</li>
<li>
<input type="submit" value="Send" />
</li>
</ul>
</form>
You need to wrap your HTML inputs in a element in order for proper form to work.
Thus, you'll need the following tag:
<form action='url_to_submit_to' method='POST' enctype='application/x-www-form-urlencoded'>
<!-- Rest of your code here -->
</form>
See the Mozilla documentation for more details on the format and arguments of the <form> tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
Here submit is not happening because the content is not wrapped inside a form tag.
All the content should be wrapped inside tag which has action attribute to some php/java file which validate the data passed by user and commits to database.
Please check form tag on mdn for more information.
rather than you using
if (isset($name, $email, $message)) {...}
there HTML5 'required' will be better in your tags. e.g
Also, you submit type needs to have a name. the name will be used to process your form.
contact.php page. the form below processes itself since the method is its name, contact.php.
<form id="contact-form" method="post" action="contact.php" >
<input type="text" name="name" placeholder="Name" />
<input type="text" name="subject" placeholder="Subject *" />
<input type="text" name="email" placeholder="Email *" />
<textarea name="message" placeholder="Message *"></textarea>
<input type="submit" value="Send" name="send"/>
</form>
<?php
if (isset($_POST['send'])) {
$to = "youremail#something.com";
$subject = $_POST['subject'];
$message = $_POST['message'];
$from = $_POST['email'];
$headers = "From: $from $name";
$sent = mail($to,$subject,$message,$headers);
if ($sent) {
echo "<p style = 'color: #00ff00;'>Message was sent.</p>";
}
else {
echo "<p style = 'color: #ff0000;'>Message was not sent.</p>";
}
}
?>
Related
I have built this contact form for my website
but I am not getting the name in the email the contact form sends to me.
Also the contact form is super slow and I get the emails after a long delay of about 5-10 minutes every time I send a lead in the contact form.
Is this something I can fix?
I am using word press. Is it the problem/.
<div class="span4" id="fc">
<?php
$action = ( array_key_exists( 'action', $_REQUEST) ? $_REQUEST['action'] : "" );
if ($action=="") /* display the contact form */
{
?>
<h6 class="form_head">לפרטים / רכישה חייגו : 077-41-800-74 או מלאו את הטופס</h6>
<form class="cf" action="" method="POST" enctype="multipart/form-data">
<input type="hidden" name="action" value="submit">
<div class="half right cf">
<input type="text" id="input-name" placeholder="שם*" name="name" required>
<input type="email" id="input-email" placeholder="אימייל" name="email" >
</div>
<div class="half left cf">
<input type="text" id="input-subject" placeholder="פלאפון*" name="message" required>
<input type="submit" value="קבל מידע נוסף" id="input-submit" name="submit">
</div>
</form>
<?php
}
else /* send the submitted data */
{
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$message=$_REQUEST['message'];
if (($name=="")||($message==""))
{
}
else{
$from="From: $name<$email>\r\nReturn-path: $email";
$subject="Message sent using your contact form";
mail("xxx#gmail.com", $subject, $message, $from);
header('Location: http://newoffice.co.il/%D7%AA%D7%95%D7%93%D7%94-%D7%A9%D7%A4%D7%A0%D7%99%D7%AA-%D7%90%D7%9C%D7%99%D7%A0%D7%95/');
exit();
}
}
?>
</div>
I'm creating a mobile app using onsen-ui framework and phonegap. I want to add an In-App "contact us" form, where a user can submit a form and on successful submission the form will be sent to email#domain.com.
In index.html I added
<script type="text/ons-template" id="contact.html">
<ons-navigator title="Navigator" var="sNavigator">
<ons-page id="page-contact">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="setHome();">
<ons-icon icon="fa-chevron-left"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center white">
<span id="search-text" class="trn" data-trn-key="contact">Contact Us</span>
</div>
</ons-toolbar>
<div class="home-header">
<img src="css/images/banner.png" alt="" title="">
<p class="center trn" data-trn-key="contact">We respond to messages in the order received</p>
</div>
<form id="frm-contact" class="frm-contact" method="post">
<div class="wrapper">
<div class="field-wrapper">
<input type="text" name="first_name" class="first_name text-input text-input--underbar has_validation"
placeholder="First Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="text" name="last_name" class="last_name text-input text-input--underbar has_validation"
placeholder="Last Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="number" name="contact_phone" class="contact_phone text-input text-input--underbar has_validation"
placeholder="Mobile Phone" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="email" name="email_address" class="email_address text-input text-input--underbar has_validation"
placeholder="Email address" value="" data-validation="email" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="text" name="subject" class="subject text-input text-input--underbar has_validation"
placeholder="Subject" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<textarea style="width:100%;height:80px" name="message" class="message text-input text-input--underbar has_validation"
placeholder="Your Message" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" ></textarea>
</div>
<p class="small-font-dim trn" data-trn-key="create_account_terms">
Please note all fields are mandatory, you should fill in all before submission.</p>
</div>
<button class="button green-btn button--large trn" onclick="contact();" data-trn-key="contact" >
Submit Now!
<div class="search-btn"><ons-icon icon="fa-chevron-right"></ons-icon></div>
</button>
</form>
</ons-page>
</ons-navigator>
</script>
Then I'm validating the form in the .js file and calling the API function
case "page-contact":
translatePage();
translateValidationForm();
$(".full_name").attr("placeholder", getTrans("Full Name",'full_name') );
$(".last_name").attr("placeholder", getTrans('Last Name','last_name') );
$(".contact_phone").attr("placeholder", getTrans('Mobile Phone','contact_phone') );
$(".email_address").attr("placeholder", getTrans('Email address','email_address') );
$(".subject").attr("placeholder", getTrans('Subject','subject') );
$(".message").attr("placeholder", getTrans('Your Message','message') );
break;
Here I'm doing the validation and calling the API from the webserver:
function contact()
{
$.validate({
form : '#frm-contact',
borderColorOnError:"#FF0000",
onError : function() {
},
onSuccess : function() {
var params = $( "#frm-contact").serialize();
params+="&device_id="+ getStorage("device_id");
callAjax("contact",params);
return false;
}
});
}
At the webserver end the PHP code includes
public function actionContact($to='',$from='',$subject='',$body='')
{
$from1=Yii::app()->functions->getOptionAdmin('global_admin_sender_email');
if (!empty($from1)){
$from=$from1;
}
$email_provider=Yii::app()->functions->getOptionAdmin('email_provider');
if ( $email_provider=="smtp"){
$smtp_host=Yii::app()->functions->getOptionAdmin('smtp_host');
$smtp_port=Yii::app()->functions->getOptionAdmin('smtp_port');
$smtp_username=Yii::app()->functions->getOptionAdmin('smtp_username');
$smtp_password=Yii::app()->functions->getOptionAdmin('smtp_password');
$mail=Yii::app()->Smtpmail;
Yii::app()->Smtpmail->Host=$smtp_host;
Yii::app()->Smtpmail->Username=$smtp_username;
Yii::app()->Smtpmail->Password=$smtp_password;
Yii::app()->Smtpmail->Port=$smtp_port;
$mail->SetFrom($from, '');
$mail->Subject = $subject;
$mail->MsgHTML($body);
$mail->AddAddress($to, "");
if(!$mail->Send()) {
//echo "Mailer Error: " . $mail->ErrorInfo;
return false;
}else {
//echo "Message sent!";
return true;
}
} elseif ( $email_provider=="mandrill"){
$api_key=Yii::app()->functions->getOptionAdmin('mandrill_api_key');
try {
require_once 'mandrillapp/Mandrill.php';
$mandrill = new Mandrill($api_key);
$message = array(
'html' => $body,
'text' => '',
'subject' => $subject,
'from_email' => $from,
//'from_name' => 'Example Name',
'to' => array(
array(
'email' => $to,
//'name' => 'Recipient Name',
'type' => 'to'
)
)
);
$async = false;
$ip_pool = '';
$send_at = '';
$result = $mandrill->messages->send($message, $async, $ip_pool, $send_at);
//dump($result);
if (is_array($result) && count($result)>=1){
if ($result[0]['status']=="sent"){
return true;
}
}
} catch(Mandrill_Error $e) {
//echo 'A mandrill error occurred: ' . get_class($e) . ' - ' . $e->getMessage();
}
return false;
}
$body = $_POST['first_name']. ' ' .$_POST['last_name']. ' ' .$_POST['contact_phone']. ' ' .$_POST['message'];
$to = 'info#domain.com';
$from = $_POST['email_address'];
$headers = "From: $from\r\n";
$headers .= "Content-type: text/html; charset=UTF-8\r\n";
$subject = $_POST['subject'];
$message =<<<EOF
$body
EOF;
if (!empty($to)) {
if (#mail($to, $subject, $message, $headers)){
return true;
}
}
return false;
}
The form is sending the email, however if there is no/null data I can't get the information submitted.
Please advise, thank you.
Based on what you posted, there was an error regarding the device ID. Specifically, the function getStorage was undefined. The code posted below works fine and was able to send all the fields via post to my test PHP page and send an email. Granted, I didn't use a complex PHP processor as you have, but it works!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
<title>Onsen UI 2.0 Quickstart</title>
<script src="components/loader.js"></script>
<script src="lib/onsenui/js/onsenui.js"></script>
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function contact()
{
var params = $( "#frm-contact").serialize();
console.log(params);
}
</script>
</head>
<body>
<ons-page id="page-contact">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="setHome();">
<ons-icon icon="fa-chevron-left"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center white">
<span id="search-text" class="trn" data-trn-key="contact">Contact Us</span>
</div>
</ons-toolbar>
<div class="home-header">
<img src="css/images/banner.png" alt="" title="">
<p class="center trn" data-trn-key="contact">We respond to messages in the order received</p>
</div>
<form id="frm-contact" class="frm-contact" method="post">
<div class="wrapper">
<div class="field-wrapper">
<input type="text" name="first_name" class="first_name text-input text-input--underbar has_validation"
placeholder="First Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="text" name="last_name" class="last_name text-input text-input--underbar has_validation"
placeholder="Last Name" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="number" name="contact_phone" class="contact_phone text-input text-input--underbar has_validation"
placeholder="Mobile Phone" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="email" name="email_address" class="email_address text-input text-input--underbar has_validation"
placeholder="Email address" value="" data-validation="email" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<input type="text" name="subject" class="subject text-input text-input--underbar has_validation"
placeholder="Subject" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" >
</div>
<div class="field-wrapper">
<textarea style="width:100%;height:80px" name="message" class="message text-input text-input--underbar has_validation"
placeholder="Your Message" value="" data-validation="required" data-validation-error-msg="this field is mandatory!" ></textarea>
</div>
<p class="small-font-dim trn" data-trn-key="create_account_terms">
Please note all fields are mandatory, you should fill in all before submission.</p>
</div>
<button class="button green-btn button--large trn" onclick="contact();" data-trn-key="contact" >
Submit Now!
<div class="search-btn"><ons-icon icon="fa-chevron-right"></ons-icon></div>
</button>
</form>
</ons-page>
</body>
</html>
PHP:
<?php
$to = 'test#test.com';
$from = $_REQUEST['email_address'];
$message = $_REQUEST['message'];
$subject = $_REQUEST['subject'];
$header = "From: <".$email_address.">" ."\r\n";
$send = #mail($to, $subject, $message, $header);
if(!$send){
die();
}
?>
Also, do note that I didn't send your other fields [first_name, last_name, contact_phone] but they can be added anywhere. Lastly, this is by no means a secure method of sending mail, but something thrown together to prove that Onsen does not interfere with the sending of mail via an HTML form with jQuery.
Edit: Although this is branching from the actual question, based on your comments, I would highly recommend reading some of these:
https://codereview.stackexchange.com/questions/19365/is-this-a-secure-and-best-practice-php-mail-function
Secure php email script
What is the best way to send a secure email in PHP
For GOOGLERS:
Thanks to #munsterlander I was able to resolve the issue by replacing the $_POST to $_GET which helped doing the whole process in the way needed.
$body = $_GET['first_name']. ' ' .$_GET['last_name']. ' ' .$_GET['contact_phone']. ' ' .$_GET['message'];
$to = 'info#domain.com';
$from = $_GET['email_address'];
$headers = "From: $from\r\n";
$headers .= "Content-type: text/html; charset=UTF-8\r\n";
$subject = $_GET['subject'];
$message =<<<EOF
$body
EOF;
User enters their name here as part of a form.
<p>Name <font color="red">(required) </font> <input name="flname" required="required" placeholder="Your Name" </p>
This solution currently provides a way of providing a sample text that can also be edited, and the PHP can run inside it, unlike <textarea>. However, my problem is that unlike <textarea>, I cannot seem to get the <div contenteditable... to submit its information to the email php file I have set up on the server. Anyone have any idea how I'd implement this.
<div contenteditable="true" name="message" required="" placeholder="Your Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p>
<p> Kind Regards, </p>
<script type="text/javascript"> document.write(document.getElementById('flname').id);</script>
</div>
<div align="center">
# Update 2:
Hi,
Thank you both for your quick resposnes.
I tried to implement your solution here:
<div align="left">
<form action="form.php" method="post" enctype="multipart/form-data">
<p>Name <font color="red">(required) </font> <input name="flname" required="required" placeholder="Your Name" </p>
<p>Email <font color="red">(required) </font> <input name="emailfrom" type="email" required="required" placeholder="Your Email"> </p>
<p>Address <font color="red">(required) </font> <input name="address" type="name" required="required" placeholder="Address"> </p>
<p>City <font color="red">(required) </font> <input name="city" type="name" required="required" placeholder="City"> </p>
<p>Postcode <font color="red">(required) </font> <input name="postcode" type="name" required="required" placeholder="Postcode"> </p>
<p>What is 2+2? <font color="red">(required) </font> <input name="human" required placeholder="Type Here"> </p>
<p> <b> You can edit the text below as much or as little as you wish </b> </p>
<div contenteditable="true" required="" placeholder="Your Message" >Dear <?php echo "$mptitle $mpsecondname" ?>, <p> Please support us... </p> <p> Kind Regards, </p>
</div>
<input type=hidden name=userContent id=userContent>
<script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
</script>
<div align="center">
<input id="cancel" name="cancel" type="submit" value="Cancel" />
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
</div>
PHP:
<?php
ini_set('display_errors',1); error_reporting(E_ALL);
include('mplookup.php');
$name = $_POST['flname'];
$email = $_POST['emailfrom'];
$message = $_POST['userContent'];
$address = $_POST['address'];
$city = $_POST['city'];
$postcode = $_POST['postcode'];
$human = $_POST['human'];
$to = "";
$body = $message;
$subject = 'From: $email \r\n : Sisi\'s visit to the UK: Sent using EG4DEMUK\'s Tool ';
?>
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $email))
{
echo '<p>Thank you for your email!</p>';
} else {
echo '<p>Oops! An error occurred. Try sending your message again.</p>';
}
}
?>
However, the emails outputed look like this
From: Hassan Ismail
E-Mail:
Message
Thanks in advance
A <div> is not a form element, so it won't be submitted. You need to implement an event listener on the submit event of the form that picks up the content of the <div> and puts it in a form element. Add a hidden <input> to the form for the purpose.
Here's a simple example:
<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
<input type=hidden name=userContent id=userContent>
<input type=submit name=submit value="Send!">
</form>
<script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
</script>
var el=document.getElementById('userForm');
el.addEventListener('submit', function() {
var elInput=document.getElementById('userContent');
var elDiv=document.getElementById('divContent');
elInput.value = elDiv.innerHTML;
});
<div id=divContent style="width:400px; height=200px;overflow:auto" contenteditable>Some content</div>
<form id=userForm>
<input type=hidden name=userContent id=userContent>
<input type=submit name=submit value="Send!">
</form>
<script>
getElementById('flname') ... is it clearly written in the name of the method that themethod gets an element by its Id, but not by his name. Use getElementsByName or set an id to you input tag. your input tag is not closed too ... don't use font - it is obsolete. if you want to submit tag content, use ajax, or setup a hidden field somwhere in the code, then use submit handler to set it with the content of the div before the actual submit.
<div id="yourdivid">....</div>
<input id="submitarea" type="hiden" name="submitarea">
$(function() {
$('#yourformid').submit( function() {
$('#submitarea').val($('#yourdivid').html());
});
});
I am using javascript to check whether username and password are not empty. If one of these is empty, javascript alert is displayed and PHP script should not work, that is username and password validation should not occur and login page should be displayed once again. Is there any simple code to do this?
Nobody need to build whole form. I have already build login form and PHP script for its validation, I just want to know is there any method or function in PHP to stop script on entering empty username/password and submitting
Try This
Php Code :
<p>
<label for="first">User Name:</label>
<input type="text" name="First Name" id="first" />
</p>
<p>
<label for="last">Password:</label>
<input type="text" name="Last Name" id="last" />
</p>
<input type="submit" name="Submit" id="button2" value="Submit" onClick="javascript:verify()"/>
JavaScript Code :
function verify() {
if (document.getElementById('first').value=="") {
alert("Please Enter Your Name");
return false;
}
else if (document.getElementById('last').value=="") {
alert("Please Enter Your Password");
return false;
}
else {
document.form.submit();
}
}
Working Model : http://jsfiddle.net/NWWL4/24/
It took me awhile to get this right. I have my form in my html index
page. On a closed question here, I read this couldn't be done.
This php works VERY well with my form.
It generates a Javascript alert for good and bad results and
links back to the index page in either instance.
If you look at the 2nd echo, you'll see where you can redirect to
another page. I just loaded same page to clear form.
If you want to see the ccs, just ask.
PHP:
<?php
if(isset($_POST['submit'])) {
$to = "admin#blahblah.com";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$subject_field = $_POST['subject'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field:\n Subject: $subject_field\n Message: $message\n";
}
if(empty($name_field) || empty($email_field) || empty($subject_field) || empty($message)) {
echo '<script type="text/javascript">alert("There is a problem, please check the fields");window.history.go(-1);</script>';
}
else {
if(mail($to, $subject_field, $body)) {
echo '<script type="text/javascript">alert("Message successfully sent");window.location = "https://www.blahblah.com/";</script>';
}}
exit;
?>
html:
<div class="clear"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<form role="form" action="php\mailer.php" method="post" id="form">
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Your Name" maxlength="30">
</div>
<div class="form-group">
<input name="email" type="text" class="form-control" id="email" placeholder="Your Email" maxlength="30">
</div>
<div class="form-group">
<input name="subject" type="text" class="form-control" id="subject" placeholder="Your Subject" maxlength="40">
</div>
<div><input type="submit" name="submit" class="btn btn-primary" value="Send Message"></input></div>
</div>
<div class="col-md-9">
<div class="txtarea">
<textarea name="message" rows="10" class="form-control" id="message"></textarea>
</form>
<div class="clear"></div>
<div class="col-lg-12" style="text-align:center">
<a class="btn btn-large btn-contact-link" href="#blahblah_home">Home</a>
So I have the JavaScript code which validates the first name field, I am adding more validation once I have worked this out.
So basically if the field is not filled in, return false.
If it is return true and continue to email.php to send the email. Only problem is its not sending the email to the set address. I am confused as to where I have gone wrong.
The JavaScript is working when the field is empty, and when it has an input. Help.
PS: I have removed email address for privacy purposes.
JavaScript on contact.html:
<script>
function validateForm() {
if (document.forms['email'].fname.value == ""){
alert("First name must be filled out");
return false;
}
else{
alert("Thank you! Your message was recieved!");
return true;
}
};
</script>
Html form on contact.html
<form id="email" name="email" onsubmit="return validateForm(this)" action="email.php" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value=""/>
</div>
</form>
Php in email.php
<?php
if(isset($_POST['email'])) {
// Email and subject.
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
//mail
mail($email_to, $email_subject, $email_content);
}
//return to contact page after submit.
header("location:contact.html");
?>
In your form id="email" is conflicting with input id="email"
You can use HTML5 attributes for form validation (in HTML5 supported browsers)
http://www.the-art-of-web.com/html/html5-form-validation/#.UnDpBHMW3eU
Code
<?php
if(isset($_POST['submit'])) {
print_r($_POST);
die;
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
mail($email_to, $email_subject, $email_content);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function validateForm() {
var error = false;
var error_string = 'Please correct the following errors:\n\n';
if (document.getElementById('fname').value == ""){
error_string += "--> First name must be filled out.\n";
error = true;
}
if (document.getElementById('lname').value == ""){
error_string += "--> Last name must be filled out.\n";
error = true;
}
if (document.getElementById('email').value == ""){
error_string += "--> Email must be filled out.\n";
error = true;
}
if(error){
alert(error_string);
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return validateForm(this)" action="" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</form>
</body>
</html>
I just showed you how client side validation works and form is posting correctly.. You should always use server side validation..
Try
document.forms["email"]["fname"].value
instead
document.forms['email'].fname.value
Also you can get field this way:
document.getElementById('fname').value