Monday, 25 December 2017

CSS স্টাইল Contact Form

  JIHAD KHAN       Monday, 25 December 2017
আমারা বাংলাই যোগাযোগ ওয়েডগেট এবং ইংরেজিতে 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;}

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

logoblog

Thanks for reading CSS স্টাইল Contact Form

Previous
« Prev Post