কিভাবে এনিমেশন যোগাযোগ ফর্ম ওয়েডগেট ব্লগার ব্লগে যুক্ত করবেন !

কিভাবে এনিমেশন যোগাযোগ ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন ? হ্যাঁ আপনি টাইটেল ঠিক দেখেছেন এবং ঠিক পড়েছেন। আসলে আজকে আমি আপনাদের সঙ্গে খুব মজার একটি যোগাযোগ ফর্ম ওয়েডগেট শেয়ার করবো। এই কন্টাক্ট ফর্ম আপনি আপনার ব্লগে ব্যবহার করলে খুব সহজে আপনার ভিজিটর আপনার ব্লগ থেকে আপনাকে মেল অর্থাৎ ম্যাসেজ পাঠাতে পারবো। আশাকরি এটা আমারা সবাই জানি, এর আগেও আমি বেশ কিছু যোগাযোগ ওয়েডগেট নিয়ে পোস্ট করেছি এবং সেখানেও বিস্তারিত আলোচনা করতে চেস্ট করেছি তাই বেশি কিছুই বলব না। কারন এটা নতুন কিছুই না শুধু মাত্র এর স্টাইল এবং সিএসএস ইফেক্ট নতুন, বাকি এর কাজ সব একি। তাহলে চলুন দেখে নেওয়া যাক কিভাবে আপনি আপনার ব্লগস্পট ব্লগে এই সুন্দর এনিমেশন যোগাযোগ ফর্ম ব্যবহার করবেন।


animation-contact-form-blogger



কিভাবে এনিমেশন যোগাযোগ ফর্ম ওয়েডগেট আপনার ব্লগার ব্লগে যুক্ত করবেন ? 



প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন এবার Add a Gadget এ ক্লিক করুন। এখুন যে পেজ আসবে সেখান থেকে আপনি More Gadget এ ক্লিক করুন এবং দেখুন ডান পাশে Contact Form নামে একটি অপশন দেখা যাচ্ছে তাতে ক্লিক করুন।


animation-contact-form-blogger


এবার আপনার ড্যাশবোর্ড থেকে Tamplate অপশনে ক্লিক করুন এবং Edit HTML এ ক্লিক করুন। এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে এই ]]></b:skin> ট্যাগ সার্চ করুন। এই ট্যাগ এর ঠিক উপরে নিচের লাইনটি যুক্ত করেদিন।


#ContactForm1 {display:none}


আপনি যদি আগে থেকেই আপনার ব্লগে এই সিস্টেম ব্যবহার করে থাকেন তাহলে দ্বিতীয় এই কাজ করবেন না এমন কি আপনি উপরের Contact Form উপরের মত Already added দেখাবে তাই সেটা লক্ষ রাখুন এবং উপরের কাজ আগেই করে থাকলে উপরের কোন কিছু না দেখে নিচের স্টেপ দেখুন। 


এবার ড্যাশবোর্ড এ ফিরে আসুন এবং Pages অপশনে ক্লিক করুন অর্থাৎ আপনি যেখানে যোগাযোগ ফর্ম দেখাতে চান সেখানে যান। এবার New page এ ক্লিক করুন। পেজ এসে যাবে সেখান থেকে HTML ট্যাবে ক্লিক করুন এবং নিচের দুই বক্সের কোড গুল ফাকা ঘরে বসিয়ে দিন।


 <style>
#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('http://3.bp.blogspot.com/-cmD_gxIBhmo/Ugp1CmUG5xI/AAAAAAAAF9Y/5CUD_WnjOvw/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('http://4.bp.blogspot.com/-Ufp_JwBgLhE/Ugp1OAYZRPI/AAAAAAAAF9g/nWV0YQrBP8o/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#0277bd; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #00b0ff; box-shadow: 0px 0px 5px #00b0ff; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#00b0ff; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#00b0ff; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#FFFFFF; border:1px solid #00b0ff; box-shadow: 1px 1px 10px #00b0ff inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#00b0ff; text-shadow: 1px 0 0 #ede7f6; border:1px solid DodgerBlue ; } #ContactForm1_contact-form-submit:hover { background:#000000; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style> 

 <div id="wrap-contact">
<div id="form_wrap-contact">
<form id="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Content" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<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>
</div> 


ব্যাস Publish এ ক্লিক করুন এবং পোস্ট করে দিন। এবার পেজে ভিজিট করুন দেখুন আশাকরি কাজটি করতে আপনি সফল হয়েছেন।


Live Contact Form Demo


See the Pen zvBOrQ by MD Aslam parvez (@okpt123) on CodePen.


আশাকরি ফর্মটি আপনাদের পছন্দ হয়েছে এবং কাজটি করতে কোন সমস্যা হয়নি! যদি কোন রকম সমস্যা হয় অবশ্যই নিচে কমেন্ট করুন। পোস্টটি ভাল লাগলে অবশ্যই বন্ধুদের সঙ্গে শেয়ার করুন। পোস্টটি সত্যি ভাল লেগে থাকলে অবশ্যই বন্ধুদের সঙ্গে শেয়ার করুন এবং নিচে কমেন্ট করে যানাতে ভুলবেন না। ভাল থাকবেন সুস্থ থাকবেন।

এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

4 মন্তব্যসমূহ

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!

  1. মোবাইলের জন্য রেস্পনসিভ কিভাবে করবো?

    উত্তরমুছুন
  2. নামহীন৮:৫৪ PM

    supper ..awasome....

    উত্তরমুছুন
  3. ভিসিটর কর্তৃক যে বার্তা বা মেসেজ পাঠানো হয় সেগুলো কোথায় জমা হয়? আমার প্রশ্ন হলো ঐ মেসেজগুলোকে এডমিন কিভাবে দেখবো? প্লিজ জানাবেন! খুব জরুরী।

    উত্তরমুছুন
  4. কাজ করে না। সেন্ট হয় না। কারণটা কি?

    উত্তরমুছুন
নবীনতর পূর্বতন

نموذج الاتصال