simple contact form coding in php
contact-view.php
<html>
<head>
<title>Contact Us Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="form-container">
<form name="frmContact" id="" frmContact"" method="post"
action="" enctype="multipart/form-data"
onsubmit="return validateContactForm()">
<div class="input-row">
<label style="padding-top: 20px;">Name</label> <span
id="userName-info" class="info"></span><br /> <input
type="text" class="input-field" name="userName"
id="userName" />
</div>
<div class="input-row">
<label>Email</label> <span id="userEmail-info"
class="info"></span><br /> <input type="text"
class="input-field" name="userEmail" id="userEmail" />
</div>
<div class="input-row">
<label>Subject</label> <span id="subject-info"
class="info"></span><br /> <input type="text"
class="input-field" name="subject" id="subject" />
</div>
<div class="input-row">
<label>Message</label> <span id="userMessage-info"
class="info"></span><br />
<textarea name="content" id="content"
class="input-field" cols="60" rows="6"></textarea>
</div>
<div>
<input type="submit" name="send" class="btn-submit"
value="Send" />
<div id="statusMessage">
<?php
if (! empty($message)) {
?>
<p class='<?php echo $type; ?>Message'><?php echo $message; ?></p>
<?php
}
?>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function validateContactForm() {
var valid = true;
$(".info").html("");
$(".input-field").css('border', '#e0dfdf 1px solid');
var userName = $("#userName").val();
var userEmail = $("#userEmail").val();
var subject = $("#subject").val();
var content = $("#content").val();
if (userName == "") {
$("#userName-info").html("Required.");
$("#userName").css('border', '#e66262 1px solid');
valid = false;
}
if (userEmail == "") {
$("#userEmail-info").html("Required.");
$("#userEmail").css('border', '#e66262 1px solid');
valid = false;
}
if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
{
$("#userEmail-info").html("Invalid Email Address.");
$("#userEmail").css('border', '#e66262 1px solid');
valid = false;
}
if (subject == "") {
$("#subject-info").html("Required.");
$("#subject").css('border', '#e66262 1px solid');
valid = false;
}
if (content == "") {
$("#userMessage-info").html("Required.");
$("#content").css('border', '#e66262 1px solid');
valid = false;
}
return valid;
}
</script>
</body>
</html>
index.php
<?php
if(!empty($_POST["send"])) {
$name = $_POST["userName"];
$email = $_POST["userEmail"];
$subject = $_POST["subject"];
$content = $_POST["content"];
$conn = mysqli_connect("localhost", "root", "test", "blog") or die("Connection Error: " . mysqli_error($conn));
mysqli_query($conn, "INSERT INTO tblcontact (user_name, user_email,subject,content) VALUES ('" . $name. "', '" . $email. "','" . $subject. "','" . $content. "')");
$insert_id = mysqli_insert_id($conn);
//if(!empty($insert_id)) {
$message = "Your contact information is saved successfully.";
$type = "success";
//}
}
require_once "contact-view.php";
?>
STYLE.CSS
body {
font-family: Arial;
width: 600px;
}
.form-container {
background: #f1ecdf;
border: #e2ddd2 1px solid;
padding: 20px;
border-radius: 2px;
}
.input-row {
margin-bottom: 20px;
}
.input-row label {
color: #75726c;
}
.input-field {
width: 100%;
border-radius: 2px;
padding: 10px;
border: #e0dfdf 1px solid;
box-sizing: border-box;
margin-top: 2px;
}
.span-field {
font: Arial;
font-size: small;
text-decoration: none;
}
.btn-submit {
padding: 10px 60px;
background: #9e9a91;
border: #8c8880 1px solid;
color: #ffffff;
font-size: 0.9em;
border-radius: 2px;
cursor: pointer;
}
.errorMessage {
background-color: #e66262;
border: #AA4502 1px solid;
padding: 5px 10px;
color: #FFFFFF;
border-radius: 3px;
}
.successMessage {
background-color: #9fd2a1;
border: #91bf93 1px solid;
padding: 5px 10px;
color: #3d503d;
border-radius: 3px;
cursor: pointer;
font-size: 0.9em;
}
.info {
font-size: .8em;
color: #e66262;
letter-spacing: 2px;
padding-left: 5px;
}
send_contact_mail.php
<?php
if(!empty($_POST["send"])) {
$name = $_POST["userName"];
$email = $_POST["userEmail"];
$subject = $_POST["subject"];
$content = $_POST["content"];
$toEmail = "admin@phppot_samples.com";
$mailHeaders = "From: " . $name . "<". $email .">\r\n";
if(mail($toEmail, $subject, $content, $mailHeaders)) {
$message = "Your contact information is received successfully.";
$type = "success";
}
}
require_once "contact-view.php";
?>
contact-view.php
<html>
<head>
<title>Contact Us Form</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="form-container">
<form name="frmContact" id="" frmContact"" method="post"
action="" enctype="multipart/form-data"
onsubmit="return validateContactForm()">
<div class="input-row">
<label style="padding-top: 20px;">Name</label> <span
id="userName-info" class="info"></span><br /> <input
type="text" class="input-field" name="userName"
id="userName" />
</div>
<div class="input-row">
<label>Email</label> <span id="userEmail-info"
class="info"></span><br /> <input type="text"
class="input-field" name="userEmail" id="userEmail" />
</div>
<div class="input-row">
<label>Subject</label> <span id="subject-info"
class="info"></span><br /> <input type="text"
class="input-field" name="subject" id="subject" />
</div>
<div class="input-row">
<label>Message</label> <span id="userMessage-info"
class="info"></span><br />
<textarea name="content" id="content"
class="input-field" cols="60" rows="6"></textarea>
</div>
<div>
<input type="submit" name="send" class="btn-submit"
value="Send" />
<div id="statusMessage">
<?php
if (! empty($message)) {
?>
<p class='<?php echo $type; ?>Message'><?php echo $message; ?></p>
<?php
}
?>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function validateContactForm() {
var valid = true;
$(".info").html("");
$(".input-field").css('border', '#e0dfdf 1px solid');
var userName = $("#userName").val();
var userEmail = $("#userEmail").val();
var subject = $("#subject").val();
var content = $("#content").val();
if (userName == "") {
$("#userName-info").html("Required.");
$("#userName").css('border', '#e66262 1px solid');
valid = false;
}
if (userEmail == "") {
$("#userEmail-info").html("Required.");
$("#userEmail").css('border', '#e66262 1px solid');
valid = false;
}
if (!userEmail.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
{
$("#userEmail-info").html("Invalid Email Address.");
$("#userEmail").css('border', '#e66262 1px solid');
valid = false;
}
if (subject == "") {
$("#subject-info").html("Required.");
$("#subject").css('border', '#e66262 1px solid');
valid = false;
}
if (content == "") {
$("#userMessage-info").html("Required.");
$("#content").css('border', '#e66262 1px solid');
valid = false;
}
return valid;
}
</script>
</body>
</html>
index.php
<?php
if(!empty($_POST["send"])) {
$name = $_POST["userName"];
$email = $_POST["userEmail"];
$subject = $_POST["subject"];
$content = $_POST["content"];
$conn = mysqli_connect("localhost", "root", "test", "blog") or die("Connection Error: " . mysqli_error($conn));
mysqli_query($conn, "INSERT INTO tblcontact (user_name, user_email,subject,content) VALUES ('" . $name. "', '" . $email. "','" . $subject. "','" . $content. "')");
$insert_id = mysqli_insert_id($conn);
//if(!empty($insert_id)) {
$message = "Your contact information is saved successfully.";
$type = "success";
//}
}
require_once "contact-view.php";
?>
STYLE.CSS
body {
font-family: Arial;
width: 600px;
}
.form-container {
background: #f1ecdf;
border: #e2ddd2 1px solid;
padding: 20px;
border-radius: 2px;
}
.input-row {
margin-bottom: 20px;
}
.input-row label {
color: #75726c;
}
.input-field {
width: 100%;
border-radius: 2px;
padding: 10px;
border: #e0dfdf 1px solid;
box-sizing: border-box;
margin-top: 2px;
}
.span-field {
font: Arial;
font-size: small;
text-decoration: none;
}
.btn-submit {
padding: 10px 60px;
background: #9e9a91;
border: #8c8880 1px solid;
color: #ffffff;
font-size: 0.9em;
border-radius: 2px;
cursor: pointer;
}
.errorMessage {
background-color: #e66262;
border: #AA4502 1px solid;
padding: 5px 10px;
color: #FFFFFF;
border-radius: 3px;
}
.successMessage {
background-color: #9fd2a1;
border: #91bf93 1px solid;
padding: 5px 10px;
color: #3d503d;
border-radius: 3px;
cursor: pointer;
font-size: 0.9em;
}
.info {
font-size: .8em;
color: #e66262;
letter-spacing: 2px;
padding-left: 5px;
}
send_contact_mail.php
<?php
if(!empty($_POST["send"])) {
$name = $_POST["userName"];
$email = $_POST["userEmail"];
$subject = $_POST["subject"];
$content = $_POST["content"];
$toEmail = "admin@phppot_samples.com";
$mailHeaders = "From: " . $name . "<". $email .">\r\n";
if(mail($toEmail, $subject, $content, $mailHeaders)) {
$message = "Your contact information is received successfully.";
$type = "success";
}
}
require_once "contact-view.php";
?>
No comments:
Post a Comment