[FD's BlOg] - Ở các bài viết trước mình đã từng đăng 1 bài hướng dẫn tạo form liên hệ từ trang web kontactr.com, còn ở bài viết này mình sẽ hướng dẫn các bạn đưa form contact này vào ngay trong blog luôn, không cần phải chuyển sang trang của nó.
Để chèn form này vào blog, bạn có thể chọn 2 cách:
+ Cách 1: tạo 1 bài viết mới, và dán code của form vào. Và xem bài viết này như 1 trang liên hệ trong blog của bạn.
+ Cách 2: tạo 1 widget HTML/Javascript và dán code của form vào.
+ Cách 2: tạo 1 widget HTML/Javascript và dán code của form vào.
- 1 lưu ý nhỏ: đối với cách 1, khi chèn code vào bài viết, ta phải chỉnh lại việc xuống hàng của code để cho form trông dễ nhìn hơn.
Đây là hình ảnh minh họa mình đưa thẳng nó vào trong bài viết
Trước tiên làm được form này bạn phải đăng kí 1 tài khoản ở kontactr.com , các bạn có thể tham khảo cách tạo form từ trang này ở đây.
Sau khi tạo xong, và đã kích hoạt mail, bạn vào trang chủ của nó để đăng nhập. Ở ngay trang vừa đăng nhập xong, bạn sẽ thấy hình như bên dưới:
Chú ý vùng khoanh tròn, đây chính là ID của tài khoản của bạn. Hay lưu nhớ ID này để thực hiện cho các bước sau.
Đối với các bạn đã có tài khoản rồi, thì cũng đăng nhập vào để xem mã số ID của mình.
Và sau đây là code của form liên hệ :
<div id="page">
<div id="content">
<div class="thebox">
<center><span >Contact fandung</span>
<form method="post" action="http://kontactr.com/user.php">
<input name="id" type="hidden" value="24234" />
<input name="referrer" type="hidden" value="" />
<table cellpadding="10px" border="0" >
<tr>
<td align="right">Your Name : </td>
<td align="left"><input name="sender_name" type="text" class="contactform" /></td>
</tr>
<tr>
<td align="right">Your Email : </td>
<td align="left"><input name="sender_email" type="text" class="contactform" /></td>
</tr>
<tr>
<td align="right">Subject : </td>
<td align="left"><input name="subject" type="text" class="contactform" /></td>
</tr>
<tr>
<td align="right" valign="top">Message : </td>
<td align="left"><textarea rows="10" cols="70" name="message" class="contactform"></textarea></td>
</tr>
<tr>
<td align="right" valign="middle">Image (case-sensitive): </td>
<td valign="middle" align="left">
<table cellpadding="5px" border="0" style=" ">
<tr>
<td valign="middle"><img src="http://kontactr.com/captcha.php" /></td>
<td valign="middle"><input type="text" name="captcha_code" size="5" maxlength="6" style="font-size: 15px; padding: 3px; font-family: Tahoma, Verdana; " /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input name="send" type="submit" id="send" value="Send" class="contactform" style="font-size: 18px; width: 100px; letter-spacing: 5px;" /></td>
</tr>
</table>
</form>
</center>
</div>
</div>
</div>
- Có thể thay đổi code màu xanh theo ý bạn.
- Code màu đỏ chính là mã số ID tài khoản của bạn (đã xác định ở trên), hay thay đổi nó lại đúng theo như mã số ID tài khoản của bạn.
- width: 100px; : độ rộng của button "Send"
- rows="10" cols="70" : kích thước của vùng soạn thảo.
Chúc các bạn thành công.