Create Contact Form (CSS, JQuery & AJAX)Demonstration how to create a css form contact form and jquery ajax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Contact Form (CSS, JQuery & AJAX)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(){
var str = $("form").serialize();
$.ajax({
type: "POST",
url: "contacts.php",
data: str,
success: function(msg){
if(msg == 'OK')
{
$("#note").html('<div class="notification_ok">Your message has been sent. Thank you!</div>');
$("#fields").hide();
}else{
$("#note").html(msg);
}
}
});
return false;
});
});
</script>
</head>
<body>
<div id="main">
<h2>Contact Form (JQuery & AJAX)</h2>
<div id="note"></div>
<form action="">
<fieldset><legend>Contact form</legend>
<p>
<label for="name">Name</label>
<input type="text" name="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" size="30" />
</p>
<label for="subject">Subject</label>
<input type="text" name="subject" size="30" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" rows="10" cols="30"></textarea>
</p>
<p class="submit">
<button type="submit" name="submit">Send Message</button>
</p>
</fieldset>
</form>
</div>
<style>
body{
background:#fbf9ee;
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
}
.notification_ok
{
border: 1px #567397 solid;
height: auto;padding:10px;
width: 90%
padding: 8px;
background: #f5f9fd;
text-align: center;
-moz-border-radius: 5px;
}
.notification_error
{
border: 1px solid #A25965;
height: auto;padding:10px;
width: 90%;
padding: 4px;
background: #F8F0F1;
text-align: left;
-moz-border-radius: 5px;
}
#main{
float:left;
display:inline;
width:610px;
margin-left:2px;
padding-bottom:1em;
}
form{
margin:1.5em 0;
padding-top:.5em;
}
fieldset{
margin:0;
padding:0;
border:none;
}
legend{
display:none;
}
label{
float:left;
width:120px;
}
input, textarea{
width:250px;
border:1px solid #dbd3b6;
padding:5px;
}
textarea{
height:120px;
overflow:auto;
}
form p{
clear:both;
margin:0;
padding:8px 0;
}
button{
border:none;
padding:5px 15px;
margin:0;
float:left;
background:#2c728a;
color:#fff;
font-weight:bold;
font-size:15px;
cursor:pointer;
margin-left:120px;
}
</style>
</body>
</html>
<?php
//contacts.php
function ValidateEmail($email)
{
$regex = "([a-z0-9_\.\-]+)". # name
"@". # at
"([a-z0-9\.\-]+){2,255}". # domain & possibly subdomains
"\.". # period
"([a-z]+){2,10}"; # domain extension
$eregi = eregi_replace($regex, '', $email);
return empty($eregi) ? true : false;
}
$post = (!empty($_POST)) ? true : false;
if($post)
{
$name = stripslashes($_POST['name']);
$email = trim($_POST['email']);
$subject = stripslashes($_POST['subject']);
$message = htmlspecialchars($_POST['message']);
$error = '';
// Check name
if(!$name)
{
$error .= 'Please enter your name.<br />';
}
// Check email
if(!$email)
{
$error .= 'Please enter an e-mail address.<br />';
}
if($email && !ValidateEmail($email))
{
$error .= 'Please enter a valid e-mail address.<br />';
}
// Check message (length)
if(!$message || strlen($message) < 15)
{
$error .= "Please enter your message. It should have at least 15 characters.<br />";
}
if(!$error){
echo 'OK';
} else{
echo '<div class="notification_error">'.$error.'</div>';
}
}
?>
