Blog Tricks

এবার খুব সহজে বানিয়ে নিন একটি Contact Us Page ব্লগের জন্য

এবার খুব সহজে বানিয়ে নিন একটি Contact Us Page ব্লগের জন্য

কয়েক দিন ধরে দেখতে পারলাম আপনারা অনেকেই Blog এর Contact Us Page এর জন্য ইনবক্সে বা অনেক গ্রুপে দেখি আপনারা জানিয়ে থাকেন যে ব্লগ টেমপ্লেট এর নিচে বা উপরে সুন্দর একটি Contact Us ফর্ম কিভাবে এড করা যায়।

তাই আপনাদের সুবিধার্তে আমার ব্যবহার করা Contact Us ফর্মের সুন্দর কোডটি আপনাদের সুবিধার্তে শেয়ার করা হলো , এখানে আপনি আগে কোড টি সম্পূর্ন ভাবে কপি করে নিন।

 <style type=”text/css”>
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px “Lucida Grande”;letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}
<div class=”widget ContactForm” id=”ContactForm22″><div class=”contact-form-widget”><h2 class=”contact-title”>Get in touch.</h2><div class=”form”><form name=”contact-form”><div class=”contactf-name”><div class=”name-icon”><img src=”” width=”16″ height=”16″ /></div><input class=”contact-form-name” id=”ContactForm1_contact-form-name” name=”Name” size=”30″ type=”text” value=”Name” onblur=’if (this.value == “”) {this.value = “Name”;}’ onfocus=’if (this.value == “Name”) {this.value = “”;}’ /></div><div class=”contactf-email”><div class=”email-icon”><img src=”” width=”16″ height=”16″ /></div><input class=”contact-form-email” id=”ContactForm1_contact-form-email” name=”E-mail address” size=”30″ type=”text” value=”E-mail address” onblur=’if (this.value == “”) {this.value = “E-mail address”;}’ onfocus=’if (this.value == “E-mail address”) {this.value = “”;}’/></div><div style=”clear:both”></div><div class=”contactf-message”><textarea class=”contact-form-email-message” cols=”25″ id=”ContactForm1_contact-form-email-message” name=”Type your message here…” rows=”5″ value=”Type your message here…” onblur=’if (this.value == “”) {this.value = “Type your message here…”;}’ onfocus=’if (this.value == “Type your message here…”) {this.value = “”;}’></textarea><input class=”contact-form-button contact-form-button-submit” id=”ContactForm1_contact-form-submit” type=”button” value=”SEND” /><div class=”contact-form-error-message” id=”ContactForm1_contact-form-error-message”></div><div class=”contact-form-success-message” id=”ContactForm1_contact-form-success-message”></div></div></form></div></div></div>

 কোড টি কপি করা হয়ে গেলে যেভাবে কাজ করাবেন।

প্রথমে এখান থেকে কোডটি নিয়ে আপনার ব্লগস্পটে বা ব্লগারে ঢুকবেন,তার পর সেখান থেকে আপনি আপনার ব্লগে দেখতে পারবেন যে Pages নামের একটি ট্যাব বা রয়েছে সেখানে ক্লিক করে New Page এ Click করুন এবং টাইটেল এর জায়গা লিখুন Contact Us বা আপনি যা লিখতে চান সেটা এর পর আপনি কপি করা কোড টি HTML এর অংশে Paste করে দিন এবং পরিশেষে পাব্লিশ করে দিন তবে পাব্লিশ এর সময় খেয়াক করুন ডান পাশে একটি সেটিং রয়েছে “Page Settings” নামে সেখান থেকে নিচের ছবিটির মত করে হাইড করে Done দিয়ে দিন।


এর পরে পেজ টি পাব্লিশ করে দিন এবং ভিজিট এ ক্লিক করে দেখুন কোড কাজ করছে কিনা এর পর কাজ করলে আপনি আপনার সাইটে যে লিংক টি পাবেন সেইদি কপি করে আপনার সাইটের যেখানে Contact Us আছে সেখানে Add করে নিন।

(নোট ঃ কপি করা নিয়ে সমস্যা হলে অবশ্যই জানাতে ভুলবেন না এবং আপনাকে এখানে প্রতিদিন আসার জন্য সব সময়ই আমন্ত্রন রইলো)

Sabyasachi Dewery

Author | Blogger | Digital Marketing Influencer | Tech Researcher At

Related Articles


  1. Hi,

    How are you doing? I will make it simple and short. I want to contribute an amazing guest post to your website.

    For that we just need to go with 3 steps:

    1. I will send you some new topic ideas that will be tech-oriented and in trend too
    2. You’ll have to choose one out of those
    3. I will then send a high-quality article on that chosen topic for you to publish on your website with one do-follow link to my site.

    Let me know how this sounds to you? Shall we start with step 1?


    Jamie Roy

  2. Hi,

    I hope you find this email in good health. I have got an easy 3 step process offer for publishing a guest post on your website;

    1. I will send you 3 interesting topic ideas for a guest post
    2. You will choose one topic out of those
    3. I will then send you a high- quality, plagiarism-free article on that chosen topic

    In return, I would just need you to give me a do-follow backlink within the main article. Please let me know if we shall begin with step 1?


    Lindsay Johnson

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
error: Content is protected !!