📢 Sponsor post

ফ্রিতে Payoneer মাস্টারকার্ড নিন খুব সহজে

আসসালামু আলাইকুম। কিছুদিন আগে popads নামক একটি ওয়েবসাইট এর মাধ্যমে মাস্টারকার্ড অর্ডার করা যেত। কিন্তু সেই অফারটি বন্ধ হয়ে যাওয়ায় অনেকে...

CSS স্টাইল Contact Form

আমারা বাংলাই যোগাযোগ ওয়েডগেট এবং ইংরেজিতে Contact Form বলি যাকে সেটা নিয়েই আজকের পোস্ট । এই Contact Form নিয়ে আমি বেশ কিছু পোস্ট করেছি তবে আজকের স্টাইল সেগুলোর থেকে ভিন্ন এবং এটা সম্পূর্ণ নতুন স্টাইল আপনি দেখলেই বুঝতে পারবেন । এটা সম্পূর্ণ সিএসএস CSS দ্বারা করা হয়েছে । যোগাযোগ ওয়েডগেট একটা ব্লগ বা ওয়েবসাইটে থাকে খুবি জরুরি ভিজিটর দের ভাল সার্ভিস দেওয়া নই আপনি যদি গুগল অ্যাডসেন্স এ আবেদন করেন তারা এই সব বিসয়ের দিকে যথস্ট লক্ষ রাখে তাছাড়া আপনি কোন প্রফেশনাল কাজ করলে আপনাকে এই ওয়েডগেট অবশ্যই ব্যবহার করতে হবে । তাহলে চলুন শুরু করা যাক কিভাবে ব্যবহার করবেন





লাইভ ডেমো দেখা হয়ে গেলে এবার নিচে থেকে দেখে নেওয়া যাক কিভাবে এই যোগাযোগ ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন । খুব সহজ নিচের সাধারন স্টেপ গুল দেখুন


CSS স্টাইল Contact Form - যোগাযোগ ওয়েডগেট ব্লগস্পট ব্যবহার নিয়ম :


প্রথমে আপনার ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Template এ ক্লিক করুন
এবার Edit HTML এ ক্লিক করুন এবং কীবোর্ডের CTRL+F প্রেস করুন
নিচের ট্যাগটি খুজে বের করুন


]]></b:skin>

উপরের ট্যাগের ঠিক উপরে নিচের সিএসএস কোড গুল বসিয়ে দিন
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ width:300px;height:auto;margin:5px auto;padding:10px;background:#fff;color:#666;border:1px solid #e9e9e9;transition:all 1s ease-in-out;} #ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#666;font-family:'Droid Sans',sans-serif;border:1px solid #e9e9e9;transition:all 1s ease-in-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;border:1px solid #c8c8ad;background:lightyellow;color:#444;} #ContactForm1_contact-form-submit {font-family:'Ruda';float:left;border-radius:3px; background:#2D94CA;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer; padding:10px 18px!important;font-weight:700;font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:double #fff;transition:all 0.4s ease-out;} #ContactForm1_contact-form-submit:hover {background:#0C1316;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width:450px;margin-top:35px;} #ContactForm1{display:none;}


এবার Save Template এ ক্লিক করে বেরিয়ে আসুন এবং আপনার ব্লগার ড্যাশবোর্ড থেকে Pages অপশনে ক্লিক করুন এবং একটি নতুন পেজ নিন এবং সেখানে HTML ট্যাবে ক্লিক করে নিচের কোড গুল সেখানে বসিয়ে দিন


<div id="contact_wrap"> <h3> Contact Us</h3> <form name="contact-form"> <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user" style="color: #dc843d;"></i> Name</span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope" style="color: #fbe213;"></i> Email Address <span style="color: red; font-weight: bolder;">*</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil-square-o" style="color: #2398e2;"></i> Content <span style="color: red; font-weight: bolder;">*</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> </div>


এবার কাজ প্রায় শেষ তবে এটা স্টাইল মানে যোগাযোগ ওয়েডগেট এর ডিজাইন এর কাজ দেখুন এটা কাজ করবেন না , এরা জন্য আপনাকে যা করতে হবে -


  • আপনি আপনার ব্লগার ড্যাশবোর্ড থেকে Layout → Add a Gadget এ ক্লিক করুন 
  • এবার যে পেজ আসবে সেখান থেকে More Gadgets এ ক্লিক করুন 

এবার দেখুন সব উপরে Contact Form নামে একটি অপশন আছে সেখানে যেকোনো স্থানে Save করে নিন , ভয় পাবেন না এটা আপনার ব্লগে দেখা যাবে না কারন আগেই আমারা নিচের কোড ব্যবহার করে নিয়েছি সিএসএস কোড এর সঙ্গেই ।



#ContactForm1{display:none;}

যাই হোক কাজ শেষ এবার আপনি এই যোগাযোগ পেজকে আপনার ব্লগ টেম্পলেট এর যেকোনো স্থানে ব্যবহার করতে পারেন এর জন্য সুধু মাত্র লিঙ্ক কপি করুন এবং ব্যবহার করুন ।