তৈরি করুণ ব্লগের Contact Us প্রফেশনাল ফরম
 |
| তৈরি করুণ Contact Us ফরম |
একটি ব্লগকে গুগল এডসেন্স পাওয়ার জন্য যে তিনটি পেজ অবশ্য থাকা লাগে তার মধ্যে Contact Us অন্যতম । এর মাধ্যমে পাঠক বা কোন স্পন্সর প্রতিষ্ঠান সহজে ব্লগ এডমিনের সাথে যোগাযোগ করতে পারে । কিভাবে ব্লগের একটি প্রফেশনাল Contact Us পেজ তৈরি করা যায় সেটি আজকে আমি আপনাদের দেখাবো । প্রফেশনাল একটি Contact Us ফরম তৈরি করতে ভালো কোডিং দক্ষতার প্রয়োজন হয় । এছাড়াও আপনি যদি গুগল ফরম এর মাধ্যমে Contact Us পেজ তৈরি করে থাকেন তাহলে সেটির অনেক সীমাবদ্ধতা সম্পর্কে নিশ্চই ইতোমধ্যে আপনি বুঝে গিয়েছেন । যাই হোক আজ আমি আপনাদের পৃথিবীর সবচেয়ে সহজ পদ্ধতিতে ব্লগের জন্য একটি Contact Us ফরম তৈরি করে দেখাবো । তো চলুন শুরু করা যাক
আরো পড়তে পারেন
ওয়েব সাইট মালিকদের জন্য সকল গুরুত্বপূর্ণ ওয়েব সাইটগুলো ।
১. ব্লগের হোম পেজ থেকে Layout এ প্রবেশ করুণ ।
 |
| Layout এ প্রবেশ করুণ |
২. Layout - এর SIDBAR - on All Pages থেকে Add a Gadget এ প্রবেশ করুণ ।
 |
| Add a Gadget এ প্রবেশ করুণ |
৩. Add a Gadget হতে Contact Us ক্লিক করুণ
 |
| Contact Us ক্লিক করুণ |
৪. এখন এ Contact Us ফরমটি আপনরা ব্লগের হোমপেজে Show করবে । যেটিকে Hide করার জন্য একটি কোড থিমসের CSS অপশনে যোগ করতে হবে ।
৫.এর জন্য ব্লগের ড্যাশবোর্ড হতে Theme অপশনে প্রবেশ করুণ
 |
| Theme অপশনে প্রবেশ করুণ |
৬. সেখান থেকে CUSTOMISE এ প্রবেশ করুণ
 |
| CUSTOMISE এ প্রবেশ করুণ |
৭. সেখান বাম পাশে দেখুন Advanced নামে একটি অপশন আছে । সেখানে প্রবেশ করে সেখান থেকে
 |
| Advanced নামে একটি অপশন প্রবেশ করুণ |
৯. এখন Theme Options এর একবারে নিচে দেখুন Add CSS নামের একটি Options আছে । সেটি ওপেন করুণ । এখন দেখুন এটির নিচে Add custom CSS নামের একটি ঘর ওপেন হবে ।
 |
| Add custom CSS |
১০. এবার Add custom CSS এর মধ্যে নিচের কোডটি লিখে দিন
#ContactForm2 { Display:none; }
 |
| Add custom CSS এর মধ্যে নিচের কোডটি লিখে দিন |
১১. এখন দেখুন Contact Us ফরমটি আপনার ব্লগের হোমপেজে Show করছে না ।
১২. এবার ব্লগের Pages থেকে Contact Us নামে একটি New Page তৈরি করুণ ।
 |
| Pages থেকে Contact Us নামে একটি New Page তৈরি করুণ |
১৩. সেই পেজটির পেন্সিল আইকনে ক্লিক করে HTML view তে ওপেন করে নিচের কোডটি কপি করে পেস্ট করে দিন ।
 |
| পেন্সিল আইকনে ক্লিক করে HTML view তে ওপেন করুণ |
<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Message <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>
sorry কপি করার অপশন বন্ধ থাকায় এখান থেকে কোডটি ডাউনলোড বা কপি করে নিন ।
১৪. এবার Compose view তে এসে ডান দিকের উপরে থাকা Publish অপশন থেকে Publish করে দিন । তবে তার পূর্বে comments অপশন বন্ধ করে দিন ।
 |
| comments অপশন বন্ধ করে দিন |
১৫. এখন আপনার তৈরি করা Contact Us পেজটির লিংক কপি করে আপনার থিমসের হেডারে এবং ফুটারে যোগ করুণ । নমুনা হিসেবে আমার টি দেখে আসতে পারেন ।
আপনার Contact Us ফরম তৈরি হয়ে গেছে এখন কেউ সেটির মাধ্যমে আপনার সাথে যোগাযোগ করলে সেটি আপনার ইমেলে চলে যাবে । আপনি যে ইমেল দিয়ে ব্লগ তৈরি করেছিলেন সেটির মধ্যে ।
আশা করি কোন সমস্যা হয়নি । তারপরেও না বুঝলে কমেন্ট করুণ ।
আরো পড়তে পারেন
খুব হেল্পফুল আর্টিকেল। খুব সুন্দর আর সহজ করে বুঝিয়েছেন আপনি। ধন্যবাদ আপনাকে।
উত্তরমুছুন