আমরা আজকে যে Contact From টি শেয়ার করতে যাচ্ছি তা শুধুমাত্র আমাদের ব্লগে ব্যবহার করার জন্য তৈরি করা হয়েছিলো। কিন্তু আমাদের ব্লগের বেশির ভাগ ভিজিটর ফর্মটি শেয়ার করার জন্য পছন্দ ও অনুরোধ করার জন্য techly420 এর Contact From টি শেয়ার করতে যাচ্ছি। আমরা আশা করছি এই ফর্মটি ভিজিটরদের পছন্দ হবার পাশাপাশি ব্লগের এডমিন এর সাথে যোগাযোগ স্থাপন সক্রিয় করে তুলবে।
যদিও ব্লগার ওয়েবসাইটে যোগাযোগ রক্ষার জন্য ডিফল্ট ভাবে এটি গ্যাজেট রয়েছে। তবে সমস্যা হলো এর ডিজাইন সুন্দর ও মানসম্মত না হওয়ার জন্য ৯০% ব্লগার এটি ব্যবহার করতে চান না। কিন্তু অনেক ডেভেলপার আছে যাদের Css এবং html জ্ঞান আছে তারা ডিফল্ট ফরমটিকেই কাস্টমাইজ করে তাদের ওয়েবসাইটে বা ব্লগে ব্যবহার করে থাকে।
আমরা আজ যে যোগাযোগ ফরমটি শেয়ার করতে যাচ্ছি, সেটিতে বেশ কিছু ফিচার এবং সুন্দর ডিজাইন করা হয়েছে। আশা করি ভালো লাগবে।
➥যোগাযোগ ফরমটির ফিচার্স:
- শুধুমাত্র CSS এবং HTML সমন্বয়ে তৈরি করা হয়েছে।
- সম্পূর্ন রেসপন্সিভ ডিজাইন।
- Font Awesome ব্যবহার করা হয়েছে।
- প্রফেশনাল ডিজাইন
- পেজ এর অন্য অংশগুলো Hide রাখা হয়েছে।
➥কীভাবে ব্লগে Static Page যুক্ত করবেন:
- প্রথমে আপনার ব্লগের ড্যাশবোর্ড লগইন করুন।
- পেজ অপশনে ক্লীক করুন।
- New Page অপশনে ক্লীক করুন।
- সব শেষে HTML অপশনে ক্লীক করে নিচের কোড গুলো পেস্ট করে পাবলিশ করে দিন।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <div class='ContactForm' id='ContactForm1'> <form name='contact-form'> <div class='input-area'> <label for='ContactForm1_contact-form-name'><b>Your Name</b></label><input class='contact-form-name' id='ContactForm1_contact-form-name' placeholder='Enter your name' name='name' type='text' value='' /></div> <div class='input-area'> <label for='ContactForm1_contact-form-email'><b>Your Email</b><span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email'placeholder='e.g. youremail@gmail.com' name='email' type='text' value='' /></div> <div class='input-area'> <label for='ContactForm1_contact-form-email-message'><b>What did you want to tell us?</b></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message'placeholder='Write something....' name='email-message'></textarea></div> <div class='input-area'> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' /></div> <div class='notif-area'> <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div> </form></div><script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script><script>//<![CDATA[if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '104497925732700849';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1044979257327008490','//www.longtechy.blogspot.com/','104497925732700849');_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Delivering message...', 'contactFormMessageSentMsg': 'Thanks for contacting us. Your message has been sent successfully.', 'contactFormMessageNotSentMsg': 'Message could not be sent due to an error. Please try again later.', 'contactFormInvalidEmailMsg': 'Please enter a valid email address.', 'contactFormEmptyMessageMsg': 'Message field shoud not be empty.', 'title': 'Contact Form', 'blogId': '104497925732700849', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]></script> |
➥ পরিবর্তন:
এই লেখাটির(1234567890123456789) জায়গায় শুধু মাত্র আপনার ব্লগ আইডি টি রিপ্লেস করে দিবেন।
➥Blog id কীভাবে খুজে পাবেন:
ব্লগার ড্যাশবোর্ড লগ ইন করার পর Browser Url চেক দিলেই পেয়ে যাবেন।
example:https://www.blogger.com/blog/post/1234567890123456789
➥শেষ কথা:
আপনার যদি কোন কিছু বুজতে সমস্যা হয় অবশ্যই আমাদের জানাবেন৷ এছাড়া কি ধরনের কনটেন্ট চান সেটাও আমাদের জানাতে পারেন। যদি পোস্ট টি আপনাদের কাজে আসে তাহলে বন্ধুদের মাঝে শেয়ার করবেন এবং techly420 এর সাথে থাকবেন