How to make Fully functional Contact Form in php using mail() function ?

Description: In this example I’m gonna show you guys how to make fully functional contact form in php using mail() function. And in this example we also cover how to change the placeholder color, how to make captcha code and then will verify if the captcha code is same as you typed in.

I make this contact form for the holding page for my client  the kensington dentist, London.

And most important thing is this contact form is build in Zurb Foundation to make it fully responsive you guys can also use twitter bootstrap….

This example includes 4 different files:-
1. index.php   (In which we make our form)
2. send.php   (through which we’ll send the form it includes mail() function)
3. foundation.css  (its a zurb foundation css file to make the form responsive)
4. app.css  (this will be our custom stylesheet where we’ll give styling to input types and to the placeholders)

————————————————————————————————-
1. index.php

<?php
//  For captcha 
$aa = md5( time() * microtime() );
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contact form</title>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=0"/>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,100italic,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="app.css"/>
<link rel="stylesheet" type="text/css" href="foundation.css"/>
</head>
<body>
   
       
                           
                   
                       
                                                   
                       
                                                    
                    </div>                                         
                       
                                                 
                       
                                                    
                    </div>                 </div>                                 
                   
                                           
                </div>                
                    
                        " readonly />                    
                </div>                
                    
                                                 
                </div>                
                   
                                           
                </div>                 
                   
                       

                       

                   
                </div>             </form>         </div>     </div> </div> </body> </html>

2. send.php

<?php
    if($_REQUEST['captcha'] != $_REQUEST['check'])
       {
            header("Location: index.php?error=The characters you entered didn't match the word verification. Please try again.");
       }
    else
       {
            $myemail = "mukul.soni0007@gmail.com";  /*ENTER THE EMAIL ADDRESS WHERE YOU WANT TO RECIEVE THE MAILS. In this case I set it to my personal gmail account. You can also make it dynamic by using $_REQUEST['the name of the field'] */
           
           $name = $_POST['fname'];
           $sname = $_POST['sname'];
           $subject = "Contact Form Submission";    /* Or you can make it dynamic by using $_POST['name of the field'] */
           $email = $_POST['mail'];
           $message = $_POST['message'];
           $tel = $_POST['tel'];
           
           $message="
           Name : $name $sname
           E-mail : $email
           Subject : $subject
           Telephone : $tel
           Message : 
           $message
           ";
           
           /* Send the message using mail() function */
           if(mail ($myemail, $subject, $message))
           {
           
           /* Redirect visitor to the page you guys want */
           header("Location: index.php?success=Thanks! We'll get back to you soon");
           exit(); 
           }
           else{
           /*If any error then throw an error.*/
               echo "Some error Occured !";
               exit();
           } 
       }
?>

3. foundation.css

You guys will find foundation.css here

4. app.css

.cb
{
    border:1px solid #000;
}
.posts-contact ::-webkit-input-placeholder {
   color: #24292d;
    opacity: 0.7;
}

.posts-contact :-moz-placeholder { 
   color:  #24292d;  
}

.posts-contact ::-moz-placeholder { 
   color:  #24292d;  
}

.posts-contact :-ms-input-placeholder {  
   color:  #24292d;  
}

.posts-contact
{
    
    max-width:504px;
    margin:34px auto;
    margin-bottom:0px;
    
}
#captcha
{
    background-color:#fff;
    font-size: 20px;
    font-weight:bold;
    text-shadow: 2px 0px 5px #5ca8fe;
    font-family:'Lato', sans-serif;
    color:rgba(0,0,0,0.5);
    letter-spacing: 10px;
}
.posts-contact input[type="text"],
.posts-contact input[type="tel"],
.posts-contact input[type="email"],
.posts-contact textarea
{
    background-color:#fff;
    box-shadow: 0px 0px 0px;
    text-shadow: none;
    color:rgba(0,0,0,0.75);
    font-family:'Lato', sans-serif;
    border:1px solid #c7c7c7;
    letter-spacing: 1px;
}
textarea
{
    font-family:'Lato', sans-serif;
}
input[type='submit']
{
    background-color:#75b4e2;
    width:171px;
    height:48px;
    border:1px solid #4484b4;
    color:#fff;
    font-family:'Lato', sans-serif;
    font-weight:bold;
    margin-top:28px;
}
input[type='submit']:hover
{
    cursor:pointer;
}
#error
{
    color:#f00;
    font-size:17px;
    padding: 5px;
    font-family: "Lato",sans-serif;
}
#success
{
    color:#2add37;
    font-size:17px;
    padding:5px;
    font-family: "Lato",sans-serif;
}

Note:-
1. Please whenever you use this contact form please change the email address inside send.php file which is wrapped in $myemail variable otherwise I’ll get all your mails.
2. It is possible that you can not find the mail in your inbox. So don’t forget to check spam folder
3. Keep all 4 files in the same folder.
4. You need a server to check this. Without server its just a static contact form. It will work only online.
If you want to see the live example of this form you can go to my testing server i.e jaiupur4ever .

To watch the video of php mail function

Advertisements

Web addict is company now :)

Hi folks,
Recently we registered our company Web Addict. Where you can see our various work for companies, Beauty products, Startup and personal portfolio. You can just hire us in an attractive price based on your requirement..

Feel free to have to look on webaddict.in

How to change the background color automatically with CSS3 animation ?

Description:- In this example I’m gonna show you guys how you can easily animate your background and texts without using WOW.js but using CSS3 animation properties.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style>
*{padding:0px; margin:0px;}
body{
 width:100%;
 background:rgba(51,51,51,1);
 position:relative;
 animation-name:demo;
 animation-direction:alternate reverse;
 animation-duration:10s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}
@keyframes demo
{
    0%{background:rgba(51,51,51,1); height:1000px; left:0px; top:0px;}
    25%{background:rgba(0,102,153,1);left:0px;  top:0px;}
    50%{background:rgba(0,204,204,1); left:0px;top:0px;}
    75%{background:rgba(153,204,0,1); left:0px;  top:0px;}
    100%{background:rgba(51,51,51,1); left:0px; top:0px;}
    
}

.box > h1{font-family:Roboto; font-weight:300; font-size:36px; color:rgba(255,255,255,1);margin-left:500px;
margin-top:250px; animation:text .9s 1 ease alternate; position:relative; float:left; } 

@keyframes text
{
    0%{margin-left:0px;}
    25%{margin-left:500px; transform:rotate(0deg);}
    50%{margin-left:500px; transform:rotate(10deg);}
    75%{margin-left:500px; transform:rotate(-10deg);}
    100%{margin-left:500px; transform:rotate(0deg);}
}

.box2 > h1{font-family:Roboto; font-weight:300; font-size:26px; color:rgba(255,255,255,1);
 animation:sectext 3s 1 ease-in alternate; position:fixed; top:320px; margin-left:620px; opacity:1;} 

@keyframes sectext
{
    0%{opacity:0;}
    100%{opacity:1;}
}


</style>
</head>

<body>

<div class="box">
<h1>Keyframe Animation</h1>
</div>

<div class="box2">
<h1>By CSS3</h1>
</div>
</body>
</html>

 

How to make Vertical Drop-Down Navigation using HTML, CSS3 and jQuery ?

Description:- In today’s example I’m gonna show you how to make vertical drop-down navigation menu. You can use it in your site or in your admin dashboard like I did. So for this we need to download jquery file so go to http://code.jquery.com/jquery-1.11.3.min.js and download it and save it in your folder.

So, here is the finish product’s images in first image you can see only 5 menus with down arrow but after click on courses link it expands and the sub menus of courses will appear with the arrow facing to the upper direction.

pic1

pic2

Code is below just change the names of list items and use it or play with the colors or do whatever you want to do peeps.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(e) {
$(".course-sub").click(function(e){
$(this).toggleClass("roll");
});
});

</script>
<style>
*{padding:0px; margin:0px;}
.nav{width:250px; background:rgba(51,51,51,1);}
.nav a{display:block;padding:10px 0px 10px 20px; text-decoration:none; border-bottom:1px dotted gray;color:#fff; letter-spacing:.2em; text-transform:uppercase; transition:all 0.3s linear;}
.nav a:hover{background:#dd0909;}
.nav li{list-style:none;}
.nav-ul ul{display:none;}
.nav-ul li.roll ul{display:block;}
.arrow:after{content:'\203A'; float:right; margin-right:20px; transform:rotate(90deg); font-size:20px;}
.nav li.tap .arrow:after{content:'\2039';}
.nav-ul ul a:before{content:'\203A'; margin-right:20px;}

</style>
</head>
<body>
<nav class="nav">
<ul class="nav-ul">
<li><a href="#">Home</a></li>
<li class="course-sub"><a href="#">Courses<span class="arrow"></span></a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>

</ul>


</nav>

</body>
</html>

*Note:- Don’t forget to include jQuery file.

How to upload an image and generate thumbnail without refreshing the page using jQuery, ajax and php ?

Description:- After this example you can easily upload the image file in a new and beautiful manner. Say good bye to that old annoying browse button which doesn’t looks cool.

So, for this example follow the instructions carefully and don’t skip any step. But if you do skip then don’t throw shit on me.

Make four folders :-
1. css (in which create a css file and save in it by the name of style.css)
2. img ( Create a folder and name it img and save the two images given below.)
(i)    overlay

(ii)   default

3. Create a folder and name it as ‘js’ Save two js files in it:-
(i) jquery.form   and
(ii) jquery-1.11.2.min

4. create another folder and name it uploades and inside that folder create two more folders:-
(i) medium and
(ii) small

Now you are good to go. Now make three php files and one css file:-
1. functions.php
2. image_upload_demo.php
3. image_upload_demo_submit.php
4. style.css

 

Now copy the code step by step…

Step1.   functions.php

<?php
function createDir($path){
if (!file_exists($path)) {
$old_mask = umask(0);
mkdir($path, 0777, TRUE);
umask($old_mask);
}
}

function createThumb($path1, $path2, $file_type, $new_w, $new_h, $squareSize = ''){
/* read the source image */
$source_image = FALSE;

if (preg_match("/jpg|JPG|jpeg|JPEG/", $file_type)) {
$source_image = imagecreatefromjpeg($path1);
}
elseif (preg_match("/png|PNG/", $file_type)) {

if (!$source_image = @imagecreatefrompng($path1)) {
$source_image = imagecreatefromjpeg($path1);
}
}
elseif (preg_match("/gif|GIF/", $file_type)) {
$source_image = imagecreatefromgif($path1);
}
if ($source_image == FALSE) {
$source_image = imagecreatefromjpeg($path1);
}

$orig_w = imageSX($source_image);
$orig_h = imageSY($source_image);

if ($orig_w < $new_w && $orig_h < $new_h) {
$desired_width = $orig_w;
$desired_height = $orig_h;
} else {
$scale = min($new_w / $orig_w, $new_h / $orig_h);
$desired_width = ceil($scale * $orig_w);
$desired_height = ceil($scale * $orig_h);
}

if ($squareSize != '') {
$desired_width = $desired_height = $squareSize;
}

/* create a new, "virtual" image */
$virtual_image = imagecreatetruecolor($desired_width, $desired_height);
// for PNG background white----------->
$kek = imagecolorallocate($virtual_image, 255, 255, 255);
imagefill($virtual_image, 0, 0, $kek);

if ($squareSize == '') {
/* copy source image at a resized size */
imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $desired_width, $desired_height, $orig_w, $orig_h);
} else {
$wm = $orig_w / $squareSize;
$hm = $orig_h / $squareSize;
$h_height = $squareSize / 2;
$w_height = $squareSize / 2;

if ($orig_w > $orig_h) {
$adjusted_width = $orig_w / $hm;
$half_width = $adjusted_width / 2;
$int_width = $half_width - $w_height;
imagecopyresampled($virtual_image, $source_image, -$int_width, 0, 0, 0, $adjusted_width, $squareSize, $orig_w, $orig_h);
}

elseif (($orig_w <= $orig_h)) {
$adjusted_height = $orig_h / $wm;
$half_height = $adjusted_height / 2;
imagecopyresampled($virtual_image, $source_image, 0,0, 0, 0, $squareSize, $adjusted_height, $orig_w, $orig_h);
} else {
imagecopyresampled($virtual_image, $source_image, 0, 0, 0, 0, $squareSize, $squareSize, $orig_w, $orig_h);
}
}

if (@imagejpeg($virtual_image, $path2, 90)) {
imagedestroy($virtual_image);
imagedestroy($source_image);
return TRUE;
} else {
return FALSE;
}
}
?>

Step2. image_upload_demo.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.form.js"></script>
<script>
$(document).on('change', '#image_upload_file', function () {
var progressBar = $('.progressBar'), bar = $('.progressBar .bar'), percent = $('.progressBar .percent');

$('#image_upload_form').ajaxForm({
beforeSend: function() {
progressBar.fadeIn();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function(html, statusText, xhr, $form) {
obj = $.parseJSON(html);
if(obj.status){
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
$("#imgArea>img").prop('src',obj.image_medium);
}else{
alert(obj.error);
}
},
complete: function(xhr) {
progressBar.fadeOut();
}
}).submit();

});
</script>
</head>

<body>

<div id="imgContainer">
<form enctype="multipart/form-data" action="image_upload_demo_submit.php" method="post" name="image_upload_form" id="image_upload_form">
<div id="imgArea"><img src="./img/default.jpg">
<div class="progressBar">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
<div id="imgChange"><span>Change Photo</span>
<input type="file" accept="image/*" name="image_upload_file" id="image_upload_file">
</div>
</div>
</form>
</div>
</body>
</html>

Step3. image_upload_demo_submit.php

<?php
include('./functions.php');
/*defined settings - start by webtechball*/
ini_set("memory_limit", "99M");
ini_set('post_max_size', '20M');
ini_set('max_execution_time', 600);
define('IMAGE_SMALL_DIR', './uploades/small/');
define('IMAGE_SMALL_SIZE', 50);
define('IMAGE_MEDIUM_DIR', './uploades/medium/');
define('IMAGE_MEDIUM_SIZE', 250);
/*defined settings - end by webtechball*/

if(isset($_FILES['image_upload_file'])){
$output['status']=FALSE;
set_time_limit(0);
$allowedImageType = array("image/gif",   "image/jpeg",   "image/pjpeg",   "image/png",   "image/x-png"  );

if ($_FILES['image_upload_file']["error"] > 0) {
$output['error']= "Error in File";
}
elseif (!in_array($_FILES['image_upload_file']["type"], $allowedImageType)) {
$output['error']= "You can only upload JPG, PNG and GIF file";
}
elseif (round($_FILES['image_upload_file']["size"] / 1024) > 4096) {
$output['error']= "You can upload file size up to 4 MB";
} else {
/*create directory with 777 permission if not exist - start by webtechball*/
createDir(IMAGE_SMALL_DIR);
createDir(IMAGE_MEDIUM_DIR);
/*create directory with 777 permission if not exist - end by webtechball*/
$path[0] = $_FILES['image_upload_file']['tmp_name'];
$file = pathinfo($_FILES['image_upload_file']['name']);
$fileType = $file["extension"];
$desiredExt='jpg';
$fileNameNew = rand(333, 999) . time() . ".$desiredExt";
$path[1] = IMAGE_MEDIUM_DIR . $fileNameNew;
$path[2] = IMAGE_SMALL_DIR . $fileNameNew;

if (createThumb($path[0], $path[1], $fileType, IMAGE_MEDIUM_SIZE, IMAGE_MEDIUM_SIZE,IMAGE_MEDIUM_SIZE)) {

if (createThumb($path[1], $path[2],"$desiredExt", IMAGE_SMALL_SIZE, IMAGE_SMALL_SIZE,IMAGE_SMALL_SIZE)) {
$output['status']=TRUE;
$output['image_medium']= $path[1];
$output['image_small']= $path[2];
}
}
}
echo json_encode($output);
}
?>

Step4. style.css

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
background-color: #FFF;
}
a {
-moz-user-select: none;
color: #1155CC !important;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
#frame1, #frame0 {
background-color: #F7F7F7;
margin: 30px auto auto;
padding: 10px;
width: 750px;
border:1px solid #EEE;
}
#fade {
background: none repeat scroll 0 0 #D3DCE3;
display: none;
height: 100%;
left: 0;
opacity: 0.4;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
#centerBox {
background-color: #FFFFFF;
border: 5px solid #FFFFFF;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
display: none;
max-height: 480px;
overflow: auto;
visibility: hidden;
width: 710px;
z-index: 100;
}
.box1 {
background: none repeat scroll 0 0 #F3F7FD;
border: 1px solid #D3E1F9;
font-size: 12px;
margin-top: 5px;
padding: 4px;
}
.button1 {
background-color: #FFFFFF;
background-image: -moz-linear-gradient(center bottom, #EDEDED 30%, #FFFFFF 83%);
border-color: #999999;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
color: #333333;
cursor: pointer;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
height: 25px;
line-height: 24px;
margin-right: 2px;
min-width: 40px;
padding: 0 16px;
text-align: center;
text-decoration: none;
-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
}
.button1:hover {
text-decoration: underline;
}
.button1:active, .a:active {
position: relative;
top: 1px;
}


#imgContainer {
width: 100%;
text-align: center;
position: relative;
}
#imgArea {
display: inline-block;
margin: 0 auto;
width: 150px;
height: 150px;
position: relative;
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#imgArea img {
outline: medium none;
vertical-align: middle;
width: 100%;
}
#imgChange {
background: url("../img/overlay.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
color: #FFFFFF;
display: block;
height: 30px;
left: 0;
line-height: 32px;
position: absolute;
text-align: center;
width: 100%;
}
#imgChange input[type="file"] {
bottom: 0;
cursor: pointer;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 0;
}
/* Progressbar */
.progressBar {
background: none repeat scroll 0 0 #E0E0E0;
left: 0;
padding: 3px 0;
position: absolute;
top: 50%;
width: 100%;
display: none;
}
.progressBar .bar {
background-color: #FF6C67;
width: 0%;
height: 14px;
}
.progressBar .percent {
display: inline-block;
left: 0;
position: absolute;
text-align: center;
top: 2px;
width: 100%;
}

 Note* :- To run this example link all the files as they are linked by webtechball. Below is the video which shows how to copy and paste and make all the necessary folders for this example… 🙂