20 January 2013

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.

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
  1. Click Sign up bottom at right bottom corner of the site.
 Make Contact Us from for blogger
  1. 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)
 Make Contact Us from for blogger
  1. Now login to your account by clicking Members Area.
  2. Click Go to cPanel when next window appeared.
Make Contact Us from for blogger
  1. Choose File Manger under Files category.
Make Contact Us from for blogger

  1. Click public html folder in file transfer manager.You will then see the following screen.
Make Contact Us from for blogger
  1. 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. 
  2. Download php file from here and open it in any text editor like notepad or wordpad.
  3. Replace shahbazmlk817@gmail.com to your email address where you are going to receive your email and save this file as mail.php.
Make Contact Us from for blogger
  1. Now go to unlcosed window in step 6 and uplad this mail.php file there.
 Make Contact Us from for blogger
  1. If you did all the steps correct then you will see mail.php in file manager.
Make Contact Us from for blogger
  1. 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 )
  2. Go to Blogger.com and click Pages.
  3. 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 :))

9 comments:

  1. thanks you sir,
    its works ^^

    ReplyDelete
  2. Very nice sharing. Thanks for nice job.

    ReplyDelete
  3. Hello Admin, I did everything you said step by step.
    After filling the form, I can see the "email.php" page too.
    But i am not receiving any information to my email address.
    I hosted the mail.php file to my 000webhost.com control panel account.
    But nothing is happening. waiting for the mail from contact us page :(

    ReplyDelete
    Replies
    1. I have checked all the steps and all of them are working fine I think you have to do it again and if you get the same error again, send me your login information I will do it for you :))

      Delete
  4. Very good blog, great information, the site Scriptcase you find good stories too.

    ReplyDelete
  5. hi friends if you want the certification on language courses with live project then visit at http://www.teamvisionconsultancy.co.in

    ReplyDelete
  6. You are awesome, helped me allot. God bless you Brother. Keep it up. I used your tips and was successful to draw Contact form at http://www.linkbuilderz.blog.com/contact-us/

    Regards: Sanwal Ahmed

    ReplyDelete

Related Post