কিভাবে ব্লগার Static Page এ আকর্ষণীয় Responsive Contact Form যুক্ত করবেন

0
(0)

হ্যালো বন্ধুরা আপনারা কেমন আছেন আশা করি আপনারা সবাই ভাল আছেন ব্লগারে Responsive Contact Form  যুক্ত করা একটি কঠিন কাজ কারণ এটি ওয়ার্ডপ্রেস এর মত plugins কে allow করেনা ব্লগস্পটে তৈরি করা ব্লগ গুলো সাধারণত third-party sites (foxyform, jotform) এর সাহায্য নিয়ে থাকে

কিভাবে ব্লগার Static Page এ আকর্ষণীয় Responsive Contact Form যুক্ত করবেন

ব্লগারের নিজস্ব contact form widget উপলব্ধ রয়েছে কিন্তু এটি ব্যবহার করার ফলে এটি ভালো এবং আকর্ষণীয় দেখায় না এইজন্য আজকে আমরা জানবো কিভাবে ব্লগারে Responsive Contact Form যুক্ত করবো

Add Blogger Responsive Contact Form

আজকের এই টিউটরিয়ালকে তিনটি ভাগে ভাগ করেছি প্রথমটি Contact Gadget যুক্ত করে, Gadget কে hide করে আরেকটি নতুন পেজে অফিশিয়াল code কে implement করে

১. Responsive Contact Form যুক্ত করে

সর্বপ্রথম আপনাকে আপনার ব্লগে blogger contact form widget যুক্ত করতে হবে এটি আপনার contact form এর কার্যক্ষমতাকে enable করবে এর জন্য আপনাদের কি করতে হবে তা আমি নিচে ছবি সমেত বুঝিয়ে দিয়েছি

স্টেপ ১. আপনাকে blogger এর dashboard/overview তে যেতে হবে

স্টেপ ২. Menu থেকে Layout section কে সিলেক্ট করুন

স্টেপ ৩. এরপর Add a Gadget অপশনে ক্লিক করুন

কিভাবে ব্লগার Static Page এ আকর্ষণীয় Responsive Contact Form যুক্ত করবেন

স্টেপ ৪. এরপর একটি popup দেখতে পাবেন সেখানে Contact Form নামের একটি অপশন দেখতে পাবেন সেই অপশনটিতে ক্লিক করুন

কিভাবে ব্লগার Static Page এ আকর্ষণীয় Responsive Contact Form যুক্ত করবেন

স্টেপ ৫. ক্লিক করার পর আপনাদের সামনে Configure Contact Form নামের একটি popup open হবে সেখানে আপনাদের contact form এর title যোগ করুন এরপর Save অপশনটিতে ক্লিক করুন

কিভাবে ব্লগার Static Page এ আকর্ষণীয় Responsive Contact Form যুক্ত করবেন

এবার আপনারা আপনাদের ব্লগে Blogger Contact Form Widget সফলভাবে যুক্ত করে নিয়েছেন এরপর আপনাদেরকে এই default contact form widget কে hide করতে হবে যাতে contact us page কে আরো ভালো stylish করা যেতে পারে

২. Gadget কে Hide করুন

Default blogger contact form কে hideকরার জন্য আপনাদেরকে নিচে দেওয়া স্টেপ গুলো ফলো করতে হবে

স্টেপ ১. Theme menu তে ক্লিক করুন ক্লিক করার পর CUSTOMIZE নামের একটি button দেখতে পাবেন ওইখানে (▼) এরকম একটি চিহ্ন দেখতে পাবেন সেটিতে ক্লিক করুন

স্টেপ ২. ক্লিক করার পর Edit HTML নামের একটি button দেখতে পাবেন সেটিতে ক্লিক করুন ক্লিক করার পর আপনারা HTML area তে পৌঁছে যাবেন এরপর কিবোর্ডে ctrl+f button টি প্রেস করুন

স্টেপ ৩. এরপর আপনারা একটি search box দেখতে পাবেন ওই search box এ ]]></b:skin> এই code টি টাইপ করে enter করুন

স্টেপ ৪. এরপর আপনাদেরকে ]]></b:skin> এই code টির উপর ছোট css code paste করতে হবে

div#ContactForm1 {

display: none !important;

}

উপরে দেওয়া code টি paste করার পর আপনাদেরকে template টি save করতে হবে

৩. Responsive Contact Form কে Page এ যুক্ত করুন

এবার আপনারা Blogger এর জন্য Responsive Contact Us page তৈরি করতে পারবেন কিন্তু এর জন্য আপনাদেরকে আপনাদের ব্লগে একটি contact us page তৈরি করতে হবে

  • Pages section এ যান এরপর New Page button টিতে ক্লিক করুন
  • Contact Us/Contact লিখে Page Title টি পূরণ করুন এরপর HTML tab এ ক্লিক করুন
  • এরপর নিচে দেওয়া code কে copy করে page এর HTML section এ paste করুন

<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> Content <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><div><a href=”https://oyepandeyji.com/instagram-malik-kis-desh-ka/”><span style=”color: white;”>Instagram</span></a></div>

  • এরপর আপনারা Options section টিতে যান এরপর Readers Comments এর মধ্যে Don’t allow. Hide existing কে সিলেক্ট করুন আর Done button টিতে ক্লিক করুন
  • এরপর পেজটিকে publish করুন Publish করার পর আপনারা আপনাদের ব্লগের Responsive Contact Form কে দেখতে পারবেন

এই Responsive Contact Form থেকে পাঠানো মেসেজ admin email এ deliver হবে

 

আমার শেষ কথা

আশা করছি এবার আপনারা বুঝে গিয়েছেন কিভাবে ব্লগারে Static Page এ আকর্ষণীয় Responsive Contact Form যুক্ত করবেন যদি আপনারা succes message এরপরেও কোন মেসেজ না পান তাহলে আমি আপনাদের conact widget কে reinstalation করার পরামর্শ দেব

যদি আপনাদের CSS আর Javascript Snippets এর ওপর ভাল জ্ঞান থেকে থাকে তাহলে আপনারা আরো better visual এর জন্য পেজকে customize করতে পারবেন

আশা করছি বন্ধুরা আজকের এই পোস্টটি কিভাবে ব্লগারে Static Page এ আকর্ষণীয় Responsive Contact Form যুক্ত করবেন পড়ার পর আপনাদের ভালো লেগে থাকবে যদি ভালো লেগে থাকে তাহলে এই পোস্টটিকে আপনাদের সোশ্যাল মিডিয়াতে শেয়ার করতে ভুলবেন না আর আজকের এই পোস্টটি পড়ার পর আপনাদের কেমন লেগেছে তা আপনারা অবশ্যই কমেন্ট করে জানাবেন আজকের এই পোস্টটি পড়ার জন্য আপনাদের অসংখ্য ধন্যবাদ

এই পোস্টটি কতটা কার্যকর ছিল?

Average rating 0 / 5. Vote count: 0

এখনো পর্যন্ত কোন রেটিং নেই! তাড়াতাড়ি রেটিং দিন

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top