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;}
</style>
<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=”https://3.bp.blogspot.com/-TgreeOjV9hc/WC8lF19LbaI/AAAAAAAABq4/E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB/s1600/avatar%25281%2529.png” 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=”https://4.bp.blogspot.com/-AuOlsNet-oA/WC8lCTFCY_I/AAAAAAAABq0/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB/s1600/envelope%25281%2529.png” 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 দিয়ে দিন।

Capture

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


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

Sabyasachi Dewery

Author | Blogger | Digital Marketing Influencer | Tech Researcher At www.sdewery.me

Related Articles

Leave a Reply

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

Back to top button