How to add Ajax contact form on your wordpress blog

Our Ajax contact form script is basically not intended to use with wordpress blog. But if you like to add it in your wordpress blog then you have to follow the following steps.

Login to your wordpress blog admin panel.
At the left sidebar of your admin panel click on the Editor link under the category Appearance.
At the right sidebar click on the link Header(header.php). Now header.php will appear on the editor window for editing.
Add the following two lines before </head> tag and save the change you have made.

Code | Download

<script type="text/javascript" src="mail/script/mail.js"></script>
<script type="text/javascript" src="mail/script/common.js"></script>

Now select the file Stylesheet(style.css) for editing. Add the following lines of code at the end of the file. Please do not forget to save the changes.

Code | Download

table#fw_contact{width:100%; padding:0 0 10px 0; border:none;}
#fw_contact td{border:none;}
#fw_contact, #fw_contact td, #fw_contact input, #fw_contact textarea, .fw_button{font-size:11px; font-family:tahoma;color:#000000;}
.fw_text{width:180px; border:1px solid #888888;}
.fw_text:hover{background:#f4f4f4;}
.fw_button{height:20px; border:1px solid gray; background:#dddddd;}
.fw_button:hover{background:#f0f0f0;}

Now click the link Left sidebar->Page->Add new to create a new page. Put an appropriate page name e.g. contact, contact-us, etc.
Select HTML view of your page editor and past the following lines of code on it.

Code | Download

<div style="padding: 10px 0px; background: #ffffff ;width:400px;">
<div style="clear:both;">
<table id="fw_contact" border="0" cellspacing="2px">
<tbody>
<tr>
<td><sup>*</sup>Your name:</td>
<td><input id="fw_contact_name" class="fw_text" name="name" type="text" /></td>
</tr>
<tr>
<td><sup>*</sup>Your e-mail:</td>
<td><input id="fw_contact_from" class="fw_text" name="from" type="text" /></td>
</tr>
<tr>
<td>Subject:</td>
<td><input id="fw_contact_subject" class="fw_text" name="subject" type="text" /></td>
</tr>
<tr>
<td><sup>*</sup>Message:</td>
<td><textarea id="fw_contact_message" class="fw_text" cols="20" rows="1" name="message" style="height:150px;"></textarea></td>
</tr>
<tr>
<td><sup>*</sup>Type verification image:</td>
<td><input id="fw_contact_captcha" class="fw_text" style="margin:0; padding:0; vertical-align:top; width:80px;" name="captcha_code" type="text" />
<img style="border: medium none; padding: 0px; width: 60px;" src="mail/securityimage.php" alt="verification image" /></td>
</tr>
</tbody></table>
<input class="fw_button" onclick="fw_mail()" name="Submit" type="button" value="Send Message" />
<p style="color:#c0c0c0; margin:10px 0 5px 0px; text-align:left;">___________________________
<span style="color:#808080; font-size:10px; margin-left:5px;">PHP contact-form copyright <a href="http://ramui.com">ramui.com</a></span>
</div>
</div>

Upload the mail folder from my contact form script to your blog root. Please do not upload contact.html or contact-us.php file.
Now open link your_blog_root/mail/index.php on your browser to start installation.

-----------------------------------------------------
**Please remember that you have to use separate admin panel for your blog and the contact form script.

Add comment