Friday, February 21, 2014

How to delete a file using PHP


When I was working with a project with file uploads, I had a thought of deleting those files with php. unlink is used to delete a file from a folder. It takes the file path along with the file name as parameter. This funtion can be simply written as shown below.

unlink("path_to_img/file_name.extension");
For example if you want to delete a text file sample.txt  which inside the folder uploads then you need to use like this unlink("uploads/sample.txt);
You can use the same code to delete any file, just by changing the file extension.

Thank you very much. If you have any doubts just comment below. I'm always happy to help you.

Tags:

How to delete a file using PHP? How to delete a file from a folder using PHP? php code to delete a file

php code to unlink a file. from folder remove file using php .

remove files from folder using php

php script to remove files

php script to delet files

how can i remove file using php

how can i delete a file using php

php delete file

php file delete

php files delete using code

php deletion of a file

file deletion using php

delete an image using php

delete a photo using php

delete photo images with php

php code to delete photos

php photo deleting code

php function to delete photo

php  function to remove images

php function to remove images photos and files

How to delete a file using php

how to delete an image from folder using php

how can i delete photo usnig php


0 comments:

How to connect mysql database using PHP

 We have seen how to fetch youtube videos using simple javascript in our previous tutorial. Today's tutorial is about connecting our database using PHP. Since PHP is a dynamic scripting language and it uses mysql database in the back end to store the data. That means the php file has to be configured to connect the database. This can be done very easily with a simple php code. This tutorial will help you to connect to the database. The database connection needs four parameters to be passed into two functions. mysql_connect() and mysql_select_db() are the two functions to connect to the database.

mysql_connect() function requires three parameters and this function is used to connect to the database. and mysql_select_db() function is used to select the database.

Here is the simple code that you can simply copy and use to connect your database with php.

<?php
$dbhost                            = "localhost"; //host name (usually localhost)
$dbuser                            = "root"; //your database(mysql) user name
$dbpass                            = "database_password"; //your database (mysql) password
$dbname                            = "database_name"; //database name
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname) or die ("Error selecting the database");
?>
Now replace root with your database username database_password with your database password  database_name with your database username. That's it, you are done.

Please don't hesitate to ask your queries. Thank you

0 comments:

Thursday, February 13, 2014

How to fetch youtube video thumbnail title using javascript


 Hi friends, we have discussed about pagination tutorial using PHP and MySql in previous post. In this tutorial I came up with a script to fetch youtube videos on the client side using javascript. Sometimes we need to put video thumbnail and it's title to show as gallery. I worried about fetching videos into my website first. I googled for the code and found youtube API code. Using youtube API we can retrieve upto 50 videos. Youtube API code fetches last 50 videos uploaded by the user through feeds.
Now let me explain you about the javascript code to fetch youtube videos. It contains a small code that fetches the video thumbnails directly from youtube into your site. You just need to put video id into the code. Here in this tutorial I have included CSS styles to give a style to the video thumbnails.

Javascript code with HTML:

<div id="vidC">
<div id="vidThumb">
<script type="text/javascript">
//function to call youtube feeds
  function youtubeFeedCallback(data) {
    var s = '';
   
    s += '<img src="http://i1.ytimg.com/vi/YOUTUBE-VIDEO-ID/mqdefault.jpg"/>'; //fetching the thumbnail image of the video
    s += '<p style="color:white; font-size:13px;"> ' + data.entry.title.$t + '</p>'; //here we get the title of the video
    document.write(s);//writes the above values in HTML
  }
</script>
<!--youtube feeds API-->
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/YOUTUBE-VIDEO-ID?v=2&amp;alt=json-in-script&amp;callback=youtubeFeedCallback"></script>
</div>

 Copy the above code and replace YOUTUBE-VIDEO-ID  with the video ID from youtube.
Ex:
<script type="text/javascript">
//function to call youtube feeds
  function youtubeFeedCallback(data) {
    var s = '';
   
    s += '<img src="http://i1.ytimg.com/vi/mhzyi9nDHFI/mqdefault.jpg"/>'; //fetching the thumbnail image of the video
    s += '<p style="color:white; font-size:13px;"> ' + data.entry.title.$t + '</p>'; //here we get the title of the video
    document.write(s);//writes the above values in HTML
  }
</script>
<!--youtube feeds API-->
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/mhzyi9nDHFI?v=2&amp;alt=json-in-script&amp;callback=youtubeFeedCallback"></script>

If you want to include styles then just copy the below CSS code.
<style>
#vidC {
    width: 282px;
    height: 190px;
    padding: 5px;
    margin-right: 15px;
    background-color: #000000;
    box-shadow:2px 0px 10px #333333;
    margin-bottom: 20px;
    float: left;
}
#vidThumb img{
    width: 282px;
    height: 158px;
    padding: 0;
    border:none;
}
</style>
Put these both blocks of code in a file and save it in HTML. Now the code will fetch the youtube thumbnails along with their titles.
Thank you. Please comment below if you need any help regarding this tutorial.

0 comments:

Wednesday, February 12, 2014

Create simple pagination with PHP and MySQL


Hi friends, todays tutorial is about creating a simple pagination using PHP and MySQL. I am going to explain you about creating a page with PREVIOUS and NEXT links at the bottom of your page with numberings.

Before looking at the code let's discuss about pagination concept. Pagination let's you create links that contains the data which is the continuation of the current item. Whenever there is large amount of data then it looks hard to load the entire data into a single page. Hence, we use the concept of pagination to allow the content to be split into parts and show only some part of the content per each page. This will give your website viewers a great experience and also has an advantage of speed loading of data, inorder to avoid the inconvenience.


You may also like:

Beautiful contact form for websites 

Add Google plus follower widget to blogger 

Stylish sticky menu bar with social icons for footer 

 Make money with facebook 

Add contact form to your blogger blog free 

Get more visitors to your site with SEO

Remove facebook graph search

Trick to find fake accounts on facebook

Get free mobile balance 100% working trick in India only

Speed loading like button for blogger

Delete facebook account permanently 100% working trick

Trick to use facebook on slow internet

How to get more page likes on facebook

How to delete google search history

8 Tricks to reduce load time of your website

3 ways to make money online without investment

5 idiotic ways to promote your blog


I said before that this code is based on PHP and MySQL, hence this code reads the data from the database tables and displays it on our page with pagination links. Since the data is being retrieved from the tables in the database we need to use sql connection mysql_connect() and then we need select database using mysql_select_db(). Let us see briefly how to connect to database using these two functions in PHP.

Code for Database connection:

<?php
$dbhostname               = "host name here"; //replace with your host name usually localhostname
$dbusername               = "database user name"; //replace with your database user name.
$dbpassword              = "database password"; //replace with your password
$dbname                     = "database name"; //replace with your database name

$conn = mysql_connect($dbhostname, $dbusername, $dbpassword) or die ("Database connection failed");
mysql_select_db($dbname) or die ("Database selection failed");
?>
The above code is used for datavase connection. Now let's see the code that is required to generate pagination links.

Code to generate pagination:

<?php
function create_pagination($current_page, $total_pages)
  {
    $create_page_links = '';
    // generates anchor tag for previous page if this is not first page
    if ($current_page > 1)
    {
      $create_page_links .= '<a href="current-page-name.php?page=' . ($current_page - 1) . '">PREV</a> ';
    }
    // generates page links with numbers till the loop ends
    for ($count = 1; $count <= $total_pages; $count++)
    {
      if ($current_page == $count)
      {
        $create_page_links .= ' ' . $count;
      }
      else
      {
         $create_page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . $count . '"> ' . $count . '</a>';
      }
    }

    // generates anchor tag link for next page if this is not last page
    if ($current_page < $total_pages) {
      $create_page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($current_page + 1) . '">NEXT</a>';
    }
    return $create_page_links;
  }

  // Calculate pagination
  $current_page = isset($_GET['page']) ? $_GET['page'] : 1;
  $results_per_page =15;  // displays number of results per single page replace 15 with number of pages you may want
  $jump = (($current_page - 1) * $results_per_page); //3*2
 $query =  "select * FROM table_name order by id desc";//query to select from table
  $result = mysql_query($query1);

  $total = mysql_num_rows($result); //counts number of rows
  $total_pages = ceil($total / $results_per_page);

  $query =  $query . " LIMIT $jump, $results_per_page";
  $result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
//your code here to retrieve rows
}
?>
<!--creates links to display at bottom with previous, next and page numbers-->
                <div style="float:left; padding:20px">
                <?php
                if ($total_pages > 1)
                  {
                    echo create_pagination($current_page, $total_pages);
                  }
                ?>
                </div>
The above part of the code is to generate pagination links. I have clearly explained within the comments. So please look the code carefully and understand it. The above code is not included with database connection. Hence we can combine both the above codes together as shown below.

Pagination code with database connection:

<?php
$dbhostname               = "host name here"; //replace with your host name usually localhostname
$dbusername               = "database user name"; //replace with your database user name.
$dbpassword              = "database password"; //replace with your password
$dbname                     = "database name"; //replace with your database name

$conn = mysql_connect($dbhostname, $dbusername, $dbpassword) or die ("Database connection failed");
mysql_select_db($dbname) or die ("Database selection failed");
function create_pagination($current_page, $total_pages)
  {
    $create_page_links = '';
    // generates anchor tag for previous page if this is not first page
    if ($current_page > 1)
    {
      $create_page_links .= '<a href="current-page-name.php?page=' . ($current_page - 1) . '">PREV</a> ';
    }
    // generates page links with numbers till the loop ends
    for ($count = 1; $count <= $total_pages; $count++)
    {
      if ($current_page == $count)
      {
        $create_page_links .= ' ' . $count;
      }
      else
      {
         $create_page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . $count . '"> ' . $count . '</a>';
      }
    }

    // generates anchor tag link for next page if this is not last page
    if ($current_page < $total_pages) {
      $create_page_links .= ' <a href="' . $_SERVER['PHP_SELF'] . '?page=' . ($current_page + 1) . '">NEXT</a>';
    }
    return $create_page_links;
  }

  // Calculate pagination
  $current_page = isset($_GET['page']) ? $_GET['page'] : 1;
  $results_per_page =15// displays number of results per single page replace 15 with number of pages you may want
  $jump = (($current_page - 1) * $results_per_page); //3*2
 $query =  "select * FROM table_name order by id desc";//query to select from table
  $result = mysql_query($query1);

  $total = mysql_num_rows($result); //counts number of rows
  $total_pages = ceil($total / $results_per_page);

  $query =  $query . " LIMIT $jump, $results_per_page";
  $result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
//your code here to retrieve rows
}
?>
<!--creates links to display at bottom with previous, next and page numbers-->
                <div style="float:left; padding:20px">
                <?php
                if ($total_pages > 1)
                  {
                    echo create_pagination($current_page, $total_pages);
                  }
                ?>
                </div>
The above code is the final one.Copy the code and use it wherever you want.

Note: Now just make these changes before using the code.

host name here //replace with your host name usually localhostname

database user name //replace with your database user name.

database password//replace with your password

database name //replace with your database name

current-page-name.php  //Replace with the name of the page where this code is being used.

 $results_per_page =15  //change 15 to whatever the number results you may want to display ina single page
 
//your code here to retrieve rows //Code to fetch the rows from a database table

Thanks for reading this articles.
If you still have any queries then please don't hesitate to comment below.

0 comments:

Sunday, February 2, 2014

CSS3 Stylish Contact Form with JQuery toggle and PHP

Hi friends, we have discussed about creating a beautiful contact form before. We also discussed about the importance of a contact form. You must know why a contact form is important. If you are running a business and you own a website for your business then your customers can easily contact you through your website. This will let you get new customers through your business website. There are many chances of losing customers from you if you are not available to your customers. The chance of losing customers can be avoided with a simple contact form. This form is an advanced version of the previous contact form and is having stylish look. You need to think about the UI design of your contact form. Because the great looks of your form can impress your customers much more than the old looks. This form has a JQuery toggle slide down and has designed with CSS3 to add awesome looks to the form.

You may also like:

Beautiful contact form for websites 

Add Google plus follower widget to blogger 

Stylish sticky menu bar with social icons for footer 

 Make money with facebook 

Add contact form to your blogger blog free 

Get more visitors to your site with SEO

Remove facebook graph search

Trick to find fake accounts on facebook

Get free mobile balance 100% working trick in India only

Speed loading like button for blogger

Delete facebook account permanently 100% working trick

Trick to use facebook on slow internet

How to get more page likes on facebook

How to delete google search history

8 Tricks to reduce load time of your website

3 ways to make money online without investment

5 idiotic ways to promote your blog

The form looks as shown in the first image and when you click on the plus button it will slide down and with a form. This leaves much more impression on your business. The messages sent through the form are received directly into your mail.

View Demo


Now let's see the code that is needed for creating this stylish contact form.
First let us look at the HTML code to make a form.

<form action="send-mail.php" method="post">
<div id="custom-form-inner">
<label for="name">Name:</label>
<input type="text" class="field" id="name" name="name" placeholder="Enter your name here">
<label for="email">Email:</label>
<input type="email" class="field" id="email" name="email" placeholder="Enter a valid email address">
<label for="message">Message:</label>
<textarea class="field textarea" id="message" name="msg" placeholder="Type in your message here"></textarea>
<br />
<input type="reset" class="btn" value=" Reset">
<input type="submit" name="send" class="btn" value="Submit">
</div>
</form>
The above code is a simple HTML form with name, email and message fields and two buttons to reset the form and the other is to submit the form. I have shown you just a form in HTML. Just see that to learn how to create a form if you are new to HTML.

Now I want to give you the actual HTML code required to create stylish contact form.

HTML code:

<div class="trickstown">
<span class="close">Close</span>
<div id="trickstown-contact-outer">
<div style=" border-bottom:1px solid #1d1d1d;" id="bioinfo">
<h1>Contact Us</h1><br/>
<h2>Just fill up the form click the send button, we will respond to you shortly.</h2>
<p id="my-tt-message" style="display: block; text-align: center;height: 18px; margin-bottom: 30px; margin-top: 20px;">We are happy to help you always.</p>
<div id="image">
<div id="trickstown-contact-wrap">
<form action="send-mail.php" method="post">
<div id="custom-form-inner">
<label for="name">Name:</label>
<input type="text" class="field" id="name" name="name" placeholder="Enter your name here">
<label for="email">Email:</label>
<input type="email" class="field" id="email" name="email" placeholder="Enter a valid email address">
<label for="message">Message:</label>
<textarea class="field textarea" id="message" name="msg" placeholder="Type in your message here"></textarea>
<br />
<input type="reset" class="btn" value=" Reset">
<input type="submit" name="send" class="btn" value="Submit">
</div>
</form>
</div>
</div>
</div>
<p class="fill-form" style="display: block; "><span>Fill up a form here.</span></p>
<ul id="trickstown-social-icons">
<li><a class="twitter" target="_blank" href="http://www.twitter.com/user-name" title="@trickstown on Twitter">Twitter</a></li>
<li><a class="facebook" target="_blank" href="http://www.facebook.com/user-name" title="Facebook Profile">Facebook</a></li>
<li><a class="google-plus" target="_blank" href="https://plus.google.com/+user-name/" title="Google+ Profile">Google+</a></li>
<li><a class="linkedin" target="_blank" href="http://in.linkedin.com/in/user-name" title="Linkedin Profile">LinkedIn</a></li>
</ul>
<p id="trickstown-info" style="font-size: 14px;line-height: 22px;">We are available on social sites too.</p>
</div>
</div>
Now that you have seen the HTML code for this stylish contact form and in the next step I'll show you the CSS required to apply styles to the form.

CSS Code:

<style>
.trickstown{
background-color:#111111;
margin:0 auto;
margin-top:200px;
width:560px;
padding:10px;
height:320px;
-webkit-box-shadow: 0 1px 2px #666;
box-shadow: 0 1px 2px #666;
}

#trickstown-contact-outer{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
width:450px;
margin:0 auto;
margin-top:80px;
}

#bioinfo{background-color:#111111;
position:relative;
z-index:999;
}

#trickstown-contact-outer h1{color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:32px;
font-weight:700px;
margin:0;
padding:0;
letter-spacing:-1px;
}

#trickstown-contact-outer h2{ color:#FFF;
margin:0;
padding:0;
font-weight:100;
font-size:15px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top:-10px;
margin-bottom:30px;
}

#my-tt-message{font-size: 13px;
line-height: 18px;
width: 375px;
display: block;
margin: 20px auto 30px;
color:#888888
}

.fill-form{font-size: 14px;
font-weight: 700;
color: #fff;
display: inline-block;
text-decoration: none;
line-height: 22px;
cursor: pointer;
margin-right: 10px;
}

#trickstown-contact-outer p {
color: #888888;
}
#trickstown-contact-outer .fill-form span {font-size: 14px;
font-weight: 700;
color: #fff;d
isplay: inline-block;
text-decoration: none;
line-height: 22px;
position: relative;
opacity: .8;
filter: alpha(opacity=80);
cursor: pointer;
margin-right: 10px;
margin-top:20px;}


#trickstown-contact-outer .fill-form span:after {content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz-hFoiGnOZ-ZF-rRy1EzQvYs3irhpWYPyo_i0WN4XjBEOuPCnIBUBOiQMFHm6f37UP1-_fJj_g9CZBN5ZpIoau88zrGUKXR9J_EoEGd_hQk6hoaQSovdCeUCL-eGv3ULse0t5xxF01w/s1600/read-more-plus.png);
position: absolute;
top: 0;
right: -30px;
opacity: .4;
filter: alpha(opacity=40);
}

#trickstown-contact-outer .fill-form span:hover {
border-bottom: 1px solid #fe544a;}

#trickstown-contact-outer .fill-form span:hover:after{opacity:1;
filter:alpha(opacity=100)}

.close {cursor: pointer;
width: 23px;
height: 23px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ8H-WlCLYHX6GHmo5DDUNkexhrJHv2KhLkoMQ7GoMnDyrnwg4OER29A3Y_oFnZLnpx3t8ElaFNM7cF4h5lixX0ykAe1pv-loBakvoPU7Uf9caI4G3VL5VZmwlk2ky5XumPXIdREGSiQ/s1600/profile-close.png) no-repeat;
opacity: .2;
filter: alpha(opacity=20);
text-indent: -9999px;
float:right;d
isplay:none;
}

.close:hover{opacity:1;
filter:alpha(opacity=100)}

#image{ display:none;
 position:relative;}

#trickstown-social-icons {
position: relative;
top: -97px;
list-style: none;
margin: 0 auto 50px;
padding: 0;
width: 125px;
text-align: center;}

#trickstown-social-icons li a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigR6CQ9AENc6jsyjgQfNEIdmRr30U6k3gVHJi2WokvgLmw1_kP982nL3OrY5JpJ0N5DT_4G45YawsK8_3Zupm4HXdQbafSex7ZI5qA125yZ7Ft9A2FCVRHwdcvPXt4gVb6_cuU4U6fmA/s1600/social-icons.png) no-repeat;

text-indent: -9999px;
margin: 0 5px 5px 0;
width: 26px;
height: 26px;
opacity: .9;
filter: alpha(opacity=90);
float:left;
}

#trickstown-social-icons .twitter {
background-position: -54px -80px;
}

#trickstown-social-icons .facebook {
background-position: -27px 0;
}

#trickstown-social-icons .google-plus {
background-position: -54px -26px;
}

#trickstown-social-icons .linkedin {
background-position: -54px -53px;
}

#trickstown-info{display:none;}



#trickstown-contact-wrap:before, #trickstown-contact-wrap:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#trickstown-contact-wrap:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}
#trickstown-contact-wrap .btn {
   margin-top: 10px;
   margin-left:auto;
   margin-right:auto;
   padding: 7px 25px;
   cursor: pointer;
   color: #fff;
   font: bold 13px Tahoma, Verdana, Arial;
   text-transform: uppercase;
   overflow: visible; /* IE6/7 fix */
   border: 0;
   background-color: #557f9d;
   background-image: -moz-linear-gradient(#227bb9, #557f9d);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#227bb9), to(#557f9d));
   background-image: -webkit-linear-gradient(#227bb9, #557f9d);
   background-image: -o-linear-gradient(#227bb9, #557f9d);
   background-image: -ms-linear-gradient(#227bb9, #557f9d);
   background-image: linear-gradient(#227bb9, #557f9d);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#227bb9', EndColorStr='#557f9d');
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   text-shadow: 0 1px 0 rgba(0,0,0,.3);
   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
}

#trickstown-contact-wrap .btn:hover {
   background-color: #557f9d;
   background-image: -moz-linear-gradient(#557f9d, #a5b8da);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#557f9d), to(#a5b8da));
   background-image: -webkit-linear-gradient(#557f9d, #a5b8da);
   background-image: -o-linear-gradient(#557f9d, #a5b8da);
   background-image: -ms-linear-gradient(#557f9d, #a5b8da);
   background-image: linear-gradient(#557f9d, #a5b8da);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#557f9d', EndColorStr='#a5b8da');
}

#trickstown-contact-wrap .btn:active {
   background: #64799e;
   position: relative;
   top: 2px;
   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

#trickstown-contact-wrap form {
   background: #fff;
   height: auto;
   min-height:400px;
}

#trickstown-contact-wrap #custom-form-inner {
   margin: 0 auto;
   padding-top: 35px;
   padding-bottom: 40px;
   margin-bottom:20px;
  
}

#trickstown-contact-wrap label {
   font: bold 18px/25px Corbel, Arial, Helvetica;
   text-shadow: 0 1px 0 #fff, 0 2px 0 #ccc;
   float: left;
   margin-right: 10px;
   width: 120px;
}

#trickstown-contact-wrap .field {
   font: 15px Arial, Helvetica;
   padding: 5px;
   margin: 0 0 20px 0;
   border: 1px solid #b9bdc1;
   width: 75%;
   color: #797979;
   -moz-box-shadow: 0 2px 4px #bbb inset;
   -webkit-box-shadow: 0 2px 4px #bbb inset;
   box-shadow: 0 2px 4px #bbb inset;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

#trickstown-contact-wrap .field:focus {
   background-color: #F6F5F4;
   border-color:rgb(12, 155, 126);
box-shadow:0 0 4px rgb(12, 155, 126);
 -webkit-box-shadow:0 0 4px rgb(12, 155, 126);
  -moz-box-shadow:0 0 4px rgb(12, 155, 126);
}

#trickstown-contact-wrap .textarea {
   height:auto;
   min-height:100px;
   max-width:75%;
}
</style>
The above code is to apply styles to the contact form. This is  a CSS3 code to bring you out the awesome look for a contact form.

Now we have discussed about the HTML and CSS codes required for the form. Now we have to look at JQuery code to apply toggle slide effect to the contact form.

JQuery Code:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>

$(document).ready(function(){
   
   
    $('.fill-form').click(function(){
       
        $(this).slideUp(300);
       
        $('#my-tt-message').slideUp(300);
       
        $('.trickstown').animate({height: "250px",marginTop: "250px"}, 500, function(){
           
            $(this).delay(400).animate({height: "780px",marginTop: "80px",marginBottom: "80px"}, 500);
           
            $('#bioinfo').delay(250).animate({marginTop: "-30px"}, 500);
           
            $('.close').delay(50).fadeIn('slow');
           
            $('#image').delay(1000).fadeIn('slow');
           
            $('#trickstown-social-icons').delay(1000).slideDown('slow').animate({top: "20px"}, 500);
           
            $('#trickstown-info').delay(1000).fadeIn(600);
           
        });
       
    });
   
   
    $('.close').click(function(){
       
        $(this).delay(100).fadeOut('slow');
       
        $('#trickstown-social-icons').slideUp('slow').animate({top: "-97px"}, 500);
       
        $('#bioinfo').delay(250).animate({marginTop: "0"}, 500);
       
        $('#image').delay(100).fadeOut('slow');
       
        $('#trickstown-info').hide();
       
        $('.trickstown').delay(500).animate({height: "250px",marginTop: "250px"}, 500).delay(300).animate({height: "320px",marginTop: "200px"}, 500,function(){
           
        $('.fill-form').slideDown(300);
       
        $('#my-tt-message').slideDown(300);
           
           
        });
       
    });
   
   
});
</script>
The above code is the required JQuery code to give you the best slide effects and toggle effects to your contact form.

Now let us put all the code together. The below code is the combination of all the above three. Copy the below code and save it as contact.html

contact.html



<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>

$(document).ready(function(){ 
    $('.fill-form').click(function(){      
        $(this).slideUp(300);      
        $('#my-tt-message').slideUp(300);      
        $('.trickstown').animate({height: "250px",marginTop: "250px"}, 500, function(){          
            $(this).delay(400).animate({height: "780px",marginTop: "80px",marginBottom: "80px"}, 500);           
            $('#bioinfo').delay(250).animate({marginTop: "-30px"}, 500);          
            $('.close').delay(50).fadeIn('slow');          
            $('#image').delay(1000).fadeIn('slow');          
            $('#trickstown-social-icons').delay(1000).slideDown('slow').animate({top: "20px"}, 500);          
            $('#trickstown-info').delay(1000).fadeIn(600);          
        });      
    });
   
   
    $('.close').click(function(){      
        $(this).delay(100).fadeOut('slow');
      
        $('#trickstown-social-icons').slideUp('slow').animate({top: "-97px"}, 500);
      
        $('#bioinfo').delay(250).animate({marginTop: "0"}, 500);
      
        $('#image').delay(100).fadeOut('slow');
      
        $('#trickstown-info').hide();
      
        $('.trickstown').delay(500).animate({height: "250px",marginTop: "250px"}, 500).delay(300).animate({height: "320px",marginTop: "200px"}, 500,function(){
          
        $('.fill-form').slideDown(300);
      
        $('#my-tt-message').slideDown(300);          
          
        });       
    });
   
});
</script>

<style>
.trickstown{
background-color:#111111;
margin:0 auto;
margin-top:200px;
width:560px;
padding:10px;
height:320px;
-webkit-box-shadow: 0 1px 2px #666;
box-shadow: 0 1px 2px #666;
}

#trickstown-contact-outer{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-align:center;
width:450px;
margin:0 auto;
margin-top:80px;
}

#bioinfo{background-color:#111111;
position:relative;
z-index:999;
}

#trickstown-contact-outer h1{color:#FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:32px;
font-weight:700px;
margin:0;
padding:0;
letter-spacing:-1px;
}

#trickstown-contact-outer h2{ color:#FFF;
margin:0;
padding:0;
font-weight:100;
font-size:15px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top:-10px;
margin-bottom:30px;
}

#my-tt-message{font-size: 13px;
line-height: 18px;
width: 375px;
display: block;
margin: 20px auto 30px;
color:#888888
}

.fill-form{font-size: 14px;
font-weight: 700;
color: #fff;
display: inline-block;
text-decoration: none;
line-height: 22px;
cursor: pointer;
margin-right: 10px;
}

#trickstown-contact-outer p {
color: #888888;
}
#trickstown-contact-outer .fill-form span {font-size: 14px;
font-weight: 700;
color: #fff;d
isplay: inline-block;
text-decoration: none;
line-height: 22px;
position: relative;
opacity: .8;
filter: alpha(opacity=80);
cursor: pointer;
margin-right: 10px;
margin-top:20px;}


#trickstown-contact-outer .fill-form span:after {content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz-hFoiGnOZ-ZF-rRy1EzQvYs3irhpWYPyo_i0WN4XjBEOuPCnIBUBOiQMFHm6f37UP1-_fJj_g9CZBN5ZpIoau88zrGUKXR9J_EoEGd_hQk6hoaQSovdCeUCL-eGv3ULse0t5xxF01w/s1600/read-more-plus.png);
position: absolute;
top: 0;
right: -30px;
opacity: .4;
filter: alpha(opacity=40);
}

#trickstown-contact-outer .fill-form span:hover {
border-bottom: 1px solid #fe544a;}

#trickstown-contact-outer .fill-form span:hover:after{opacity:1;
filter:alpha(opacity=100)}

.close {cursor: pointer;
width: 23px;
height: 23px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ8H-WlCLYHX6GHmo5DDUNkexhrJHv2KhLkoMQ7GoMnDyrnwg4OER29A3Y_oFnZLnpx3t8ElaFNM7cF4h5lixX0ykAe1pv-loBakvoPU7Uf9caI4G3VL5VZmwlk2ky5XumPXIdREGSiQ/s1600/profile-close.png) no-repeat;
opacity: .2;
filter: alpha(opacity=20);
text-indent: -9999px;
float:right;d
isplay:none;
}

.close:hover{opacity:1;
filter:alpha(opacity=100)}

#image{ display:none;
 position:relative;}

#trickstown-social-icons {
position: relative;
top: -97px;
list-style: none;
margin: 0 auto 50px;
padding: 0;
width: 125px;
text-align: center;}

#trickstown-social-icons li a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigR6CQ9AENc6jsyjgQfNEIdmRr30U6k3gVHJi2WokvgLmw1_kP982nL3OrY5JpJ0N5DT_4G45YawsK8_3Zupm4HXdQbafSex7ZI5qA125yZ7Ft9A2FCVRHwdcvPXt4gVb6_cuU4U6fmA/s1600/social-icons.png) no-repeat;

text-indent: -9999px;
margin: 0 5px 5px 0;
width: 26px;
height: 26px;
opacity: .9;
filter: alpha(opacity=90);
float:left;
}

#trickstown-social-icons .twitter {
background-position: -54px -80px;
}

#trickstown-social-icons .facebook {
background-position: -27px 0;
}

#trickstown-social-icons .google-plus {
background-position: -54px -26px;
}

#trickstown-social-icons .linkedin {
background-position: -54px -53px;
}

#trickstown-info{display:none;}



#trickstown-contact-wrap:before, #trickstown-contact-wrap:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width:300px;
    background: rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

#trickstown-contact-wrap:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}
#trickstown-contact-wrap .btn {
   margin-top: 10px;
   margin-left:auto;
   margin-right:auto;
   padding: 7px 25px;
   cursor: pointer;
   color: #fff;
   font: bold 13px Tahoma, Verdana, Arial;
   text-transform: uppercase;
   overflow: visible; /* IE6/7 fix */
   border: 0;
   background-color: #557f9d;
   background-image: -moz-linear-gradient(#227bb9, #557f9d);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#227bb9), to(#557f9d));
   background-image: -webkit-linear-gradient(#227bb9, #557f9d);
   background-image: -o-linear-gradient(#227bb9, #557f9d);
   background-image: -ms-linear-gradient(#227bb9, #557f9d);
   background-image: linear-gradient(#227bb9, #557f9d);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#227bb9', EndColorStr='#557f9d');
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   text-shadow: 0 1px 0 rgba(0,0,0,.3);
   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
}

#trickstown-contact-wrap .btn:hover {
   background-color: #557f9d;
   background-image: -moz-linear-gradient(#557f9d, #a5b8da);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#557f9d), to(#a5b8da));
   background-image: -webkit-linear-gradient(#557f9d, #a5b8da);
   background-image: -o-linear-gradient(#557f9d, #a5b8da);
   background-image: -ms-linear-gradient(#557f9d, #a5b8da);
   background-image: linear-gradient(#557f9d, #a5b8da);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#557f9d', EndColorStr='#a5b8da');
}

#trickstown-contact-wrap .btn:active {
   background: #64799e;
   position: relative;
   top: 2px;
   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

#trickstown-contact-wrap form {
   background: #fff;
   height: auto;
   min-height:400px;
}

#trickstown-contact-wrap #custom-form-inner {
   margin: 0 auto;
   padding-top: 35px;
   padding-bottom: 40px;
   margin-bottom:20px;
  
}

#trickstown-contact-wrap label {
   font: bold 18px/25px Corbel, Arial, Helvetica;
   text-shadow: 0 1px 0 #fff, 0 2px 0 #ccc;
   float: left;
   margin-right: 10px;
   width: 120px;
}

#trickstown-contact-wrap .field {
   font: 15px Arial, Helvetica;
   padding: 5px;
   margin: 0 0 20px 0;
   border: 1px solid #b9bdc1;
   width: 75%;
   color: #797979;
   -moz-box-shadow: 0 2px 4px #bbb inset;
   -webkit-box-shadow: 0 2px 4px #bbb inset;
   box-shadow: 0 2px 4px #bbb inset;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

#trickstown-contact-wrap .field:focus {
   background-color: #F6F5F4;
   border-color:rgb(12, 155, 126);
box-shadow:0 0 4px rgb(12, 155, 126);
 -webkit-box-shadow:0 0 4px rgb(12, 155, 126);
  -moz-box-shadow:0 0 4px rgb(12, 155, 126);
}

#trickstown-contact-wrap .textarea {
   height:auto;
   min-height:100px;
   max-width:75%;
}
</style>

<div class="trickstown">
<span class="close">Close</span>
<div id="trickstown-contact-outer">
<div style=" border-bottom:1px solid #1d1d1d;" id="bioinfo">
<h1>Contact Us</h1><br/>
<h2>Just fill up the form click the send button, we will respond to you shortly.</h2>
<p id="my-tt-message" style="display: block; text-align: center;height: 18px; margin-bottom: 30px; margin-top: 20px;">We are happy to help you always.</p>
<div id="image">
<div id="trickstown-contact-wrap">
<form action="send-mail.php" method="post">
<div id="custom-form-inner">
<label for="name">Name:</label>
<input type="text" class="field" id="name" name="name" placeholder="Enter your name here">
<label for="email">Email:</label>
<input type="email" class="field" id="email" name="email" placeholder="Enter a valid email address">
<label for="message">Message:</label>
<textarea class="field textarea" id="message" name="msg" placeholder="Type in your message here"></textarea>
<br />
<input type="reset" class="btn" value=" Reset">
<input type="submit" name="send" class="btn" value="Submit">
</div>
</form>
</div>
</div>
</div>
<p class="fill-form" style="display: block; "><span>Fill up a form here.</span></p>
<ul id="trickstown-social-icons">
<li><a class="twitter" target="_blank" href="http://www.twitter.com/user-name" title="@trickstown on Twitter">Twitter</a></li>
<li><a class="facebook" target="_blank" href="http://www.facebook.com/user-name" title="Facebook Profile">Facebook</a></li>
<li><a class="google-plus" target="_blank" href="https://plus.google.com/user-name/" title="Google+ Profile">Google+</a></li>
<li><a class="linkedin" target="_blank" href="http://in.linkedin.com/in/user-name" title="Linkedin Profile">LinkedIn</a></li>
</ul>
<p id="trickstown-info" style="font-size: 14px;line-height: 22px;">We are available on social sites too.</p>
</div>
</div>
Copy the above code and paste it in any text editor such as notepad and save it as contact.html. Replace user-name to your user name of your social networks. Now your contact form is ready and you need to create one more page where the mail is sent to you. This page contains the configuration to send and receive mails through php.

Copy the below code and name it as send-mail.php.
Please note that don't change the file names if you don't know php.

send-mail.php

<html>
<head>
<title>Thank You</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <div class="main">
<?php
if(isset($_POST['send']))
{
$name=$_POST['name'];
$email=$_POST['email'];
$msg=$_POST['msg'];
$to="YOUR-MAIL-ID";
$from = "Sent From: Tricks Town Contact Form";
$sub = "Contact Message";
$headers='From : '.$email. "\r\n";
$headers='Sender name : '.$name. "\r\n";
$headers='Message : '.$msg. "\r\n";
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
if (mail ($to, $sub, $headers, $from)) {
            echo '<b style="color:#388440; ">Thank you, we will respond you back soon.</b>';
        } else {
            echo '<b style="color:#e41e1e; ">Something went wrong. Please try again!</b>';
        }
    }
?>
     </div>
 </body>
</html>
Replace YOUR-MAIL-ID with your mail id and save the above code as send-mail.php. Now upload the both files to your server through ftp and enter your details through the form and check your mail.
Please comment below if you have anything to share or ask to ask queries. Thank you.

0 comments: