Professional Good Looking php Contact Form For Blogger Blog

Finally, we are presented a contact form for blogger platform which uses php files to send email surprise! Sound seems to be very unique here let me explain. The online contact form provided by Kontactr or EmailMeForm is not much impressive or not liked by the bloggers therefore they are constantly searching a professional looking contact us form. As we know that blogger blogs are self hosted and if anyone want to host file on a web server then they have to buy a hosting account. But here we uses free hosting service offered by 000Webhost, to store php file.

Demo

How To Create Contact Us Form For Blogger Blog

First of all we will create a free account in web hosting site so go to 000webhost.com

Click Sign up bottom at right bottom corner of the site.

Choose a sub domain from second input box ensuring that it may be anything means you don't have to worry about its selection just take it which is available. Select any domain randomly and complete all the fields. (here we have choosen www.qwedasccx.site40.net, remember it)

Now login to your account by clicking Members Area.
Click Go to cPanel when next window appeared.

Choose File Manger under Files category.

Click public html folder in file transfer manager.You will then see the following screen.

It is the path where you have to upload php file, now we will create php file and further upload it to here so don't close this window.
Download php file from here and open it in any text editor like notepad or wordpad.
Replace shahbazmlk817@gmail.com to your email address where you are going to receive your email and save this file as mail.php.

Now go to unlcosed window in step 6 and uplad this mail.php file there.

If you did all the steps correct then you will see mail.php in file manager.

The adress of mail.php will be http://DomainYouChoose.net/mail.php ( In this example it is to be http://qwedasccx.site40.net/mail.php )
Go to Blogger.com and click Pages.
Create a black page and paste the follwoing code in HTML part of the post editor.

<style type="text/css">
#abtform 
    {padding: 0 10px 10px;}


#abtform div
     {
     margin-bottom: 20px;
     }

#abtform label
    {    color: #797979;
     display: block;
     font-family: arial;
     font-size: 12px;
     font-weight: 700;
     line-height: 1.4em;
}
    
#abtform input    

{       
    border: 1px solid #CECECE;
    color: #949494;
    font-family: Arial,Verdana,Helvetica,sans-serif;
    font-size: 11px;
    font-style: italic;
    padding: 6px;
    width: 220px;
}

#abtform .send

{
    background: none repeat scroll 0 0 #6F9FF1;
    border: 1px solid #79A7F1;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 5px 5px 5px #CCCCCC;
    color: #FFFFFF;
    cursor: pointer;
    font-style: normal;
    font-weight: 700;
    width: 80px;
    margin-right: 40px;
}


#abtform textarea
    {border: 1px solid #CECECE;
    color: #ADAEAE;
    font-family: Arial,Verdana,Helvetica,sans-serif;
    font-size: 12px;
    font-style: italic;
    height: 120px;
    padding: 6px;
    width: 550px;
} 
</style>

<form id="abtform" action="http://bloggertricks.web44.net/mail.php" method="POST">

<div>
   <label>Name:</label>
  <input type="text" name="name">
</div>


<div>
    <label>E-mail:</label>
    <input type="text" name="email">
</div>
 
 

<div>
    <label>Website:</label>
    <input type="text" name="website">
</div>

<div>
   <label>Subject:</label>
   <input type="text" name="subject">
</div>
 

<div>
     <label>Message</label>
     <textarea name="message" ></textarea>
</div>

<div><input type="submit" value="Send" class="send">
<input class="send" type="reset" value="Clear"></div>

</form>

Modification

Replace http://bloggertricks.web44.net/mail.php to http://YourDomain.net/mail.php ( As in above example it will be http://qwedasccx.site40.net/mail.php ). It is the most important part of this tutorial so done it carefully otherwise code will not work.

To make this tutorial more working we adopt number of steps but if someone still find difficulty then you can directly contact us :))

Follow @twitterapi

If you enjoyed this article then kindly take 5 seconds to share it!!