ব্লগারের জন্য কিভাবে Contact Us পেজ তৈরি করবেন

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

কন্টাক্ট ফর্ম তৈরি

একটি ব্লগার সাইটের জন্য কন্টাক্ট পেজ কত জরুরী এটা একজন ব্লগার ঐ জানে । কেননা যদি কোন সাইটে Contact Us পেজ না থাকে তাহলে সে সাইটটি এডসেন্স অ্যাপ্রভাল এর জন্য প্রস্তুত হয় না । তাই একটি সাইটের জন্য সবচেয়ে গুরুত্বপূর্ণ পেজ হল যোগাযোগ/ Contact Us পেজ । কিভাবে রেস্পন্সিভ কন্টাক্ট পেজ তৈরি করতে হয় তা আজকে আমরা এই আর্টিকেলের মধ্যে জানাবো ।

কন্টাক্ট পেজের ফিচার :

এই কন্টাক্ট ফর্মের যে সকল ফিচার আপনি পাবেন তা হল

ডার্ক মুড ফিচার
রেস্পন্সিভ
নাম লেখার বক্স
ইমেইল লেখার বক্স
মেসেজ লেখার বক্স
সেন্ড বাটন
সরাসরি ইমেইলের মাধ্যমে তথ্য প্রেরণ

কন্ট্রাক্ট ফরমটি দেখতে কি রকম হবে তার একটি ডেমো নিচে দেওয়া হল আপনি চাইলে ডেমোটি দেখতে পারেন ।

ডেমো

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

কন্টাক্ট ফর্মটি ডিজাইন করতে যেকোন সমূহের প্রয়োজন হবে সেই কোড গুলো নিছে দেওয়া হয়েছে । কোড গুলো কপি করে নিচে দেওয়া পদ্ধতি অনুসারে আপনার ব্লগারের সাইটে ব্যবহার করুন ।

<style type="text/css">.ContactForm{width:calc(100% + 40px);max-width:820px;left:-20px;right:-20px;position:relative;border-radius:10px;padding:10px 20px 40px 20px; background: #fff;box-shadow: 0 5px 35px rgb(0 0 0 / 7%);align-items:center;justify-content:center}.cArea label{display:block;position:relative}.cArea label .n{display:block;position:absolute;left:0;right:0;top:0;color:rgba(8,16,43,.4);line-height:1.6em;padding:15px 16px 0;border-radius:4px 4px 0 0;transition:all .1s ease}.cArea label .n.req::after{content:'*';font-size:85%}.cArea textarea{height:100px}.cArea textarea:focus,.cArea textarea[data-text=fl]{height:200px}.cArea input:focus ~ .n,.cArea textarea:focus ~ .n,.cArea input[data-text=fl] ~ .n,.cArea textarea[data-text=fl] ~ .n{padding-top:5px;color:rgba(8,16,43,.7);font-size:90%;background:#ececec}.cArea .h{display:block;font-size:90%;padding:5px 16px 0;opacity:.7;line-height:normal}.nArea .error-message{color:#d32f2f}.ContactForm input[type=text],.ContactForm input[type=email],.ContactForm textarea{display:block;width:100%;outline:0;border:0;border-bottom:1px solid rgba(0,0,0,.25);border-radius:4px 4px 0 0;background:#ececec;padding:25px 16px 8px 16px;line-height:1.6em;transition:all .1s ease}.ContactForm input[type=button]{display:inline-flex;align-items:center;padding:12px 30px;outline:0;border:0;border-radius:40px;color:#fffdfc;background:#0b57cf;font-size:14px;white-space:nowrap;overflow:hidden;max-width:100%}.cArea .hidden{display:none}.ContactForm input[type=email]:hover,.ContactForm input[type=text]:hover,.ContactForm textarea:hover{border-color:rgba(0,0,0,.42);background:#ececec}.ContactForm input[type=email]:focus,.ContactForm input[type=text]:focus,.ContactForm textarea:focus{border-color:#0b57cf;background:#ececec}.drK .ContactForm input[type=email],.drK .ContactForm input[type=text],.drK .ContactForm textarea,.drK .cArea input:focus ~ .n,.drK .cArea textarea:focus ~ .n,.drK .cArea input[data-text=fl] ~ .n,.drK .cArea textarea[data-text=fl] ~ .n{background: #252526;}.drK .cArea label .n{color:rgba(255,255,255,.25)}.drK .ContactForm input[type=email],.drK .ContactForm input[type=text],.drK .ContactForm textarea{color:#ececec;}.headCF{font-family:inherit;text-align:center;font-weight:900}.cBtn{text-align:center}.cBtn input[type=button]{border-radius:50px !important} .drK .ContactForm{background:#2d2d30}</style>
<div class='ContactForm s-2' id='ContactForm1'> <h2 class="headCF">যোগাযোগ করুন</h2> <center><p>আপনার মনে যদি কোন ধরনের প্রশ্ন থেকে থাকে তাহলে আপনি আপনাদের সাথে যোগাযোগ করতে পারেন । আমরা আপনার প্রশ্নের উত্তর দেওয়ার যথাসাধ্য চেষ্টা করিব ।</p></center> <form name='cForm'> <div class='cArea'> <label> <input class='cInpt cName' id='namaUser' name='name' type='text'/> <span class='n req'>নাম</span> </label> </div> <div class='cArea'> <label> <input class='cInpt cMail' id='nomorUser' name='email' type='email'/> <span class='n req'>ইমেইল</span> </label> </div> <div class='cArea'> <label> <textarea class='cInpt cMsg' id='pesanUser' name='message' rows='3'></textarea> <span class='n req'>মেসেজ</span> </label> </div> <div class='cArea'> <center><input class='button' id='kirimPesan' type='button' value='সাবমিট' /></center> </div> <div class='cArea nArea'> <p class='cNtf' id='error-message'></p> </div> </form></div>

<script>/*<![CDATA[*/ // javascript by banglaui.blogspot.comvar sharedFreeBy = 'banglaui.blogspot.com'; //don't remove creditvar email = 'BloggerAbusufian@gmail.com';var subjectEmail = 'Hello I want to ask '; 
var pengirim = 'Name:';var noPengirim = 'Email: ';var kirimVia = 'This email was sent via : ';
var _0x56c4c4=_0x18c5,_0x167513=_0x1a4e;function _0x1a4e(a,b){var c=_0x488e();return(_0x1a4e=function(d,g){var b=c[d-=357];if(void 0===_0x1a4e.GdhWHg){var i=function(g){for(var b,a,h="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=",c="",f="",d=0,i=0;a=g.charAt(i++);~a&&(b=d%4?64*b+a:a,(d++)%4)&&(c+=String.fromCharCode(255&b>>(-2*d&6))))a=h.indexOf(a);for(var e=0,j=c.length;e<j;e++)f+="%"+("00"+c.charCodeAt(e).toString(16)).slice(-2);return decodeURIComponent(f)},h=function(d,g){var a,e,b=[],c=0,h="";for(a=0,d=i(d);a<256;a++)b[a]=a;for(a=0;a<256;a++)c=(c+b[a]+g.charCodeAt(a%g.length))%256,e=b[a],b[a]=b[c],b[c]=e;a=0,c=0;for(var f=0;f<d.length;f++)c=(c+b[a=(a+1)%256])%256,e=b[a],b[a]=b[c],b[c]=e,h+=String.fromCharCode(d.charCodeAt(f)^b[(b[a]+b[c])%256]);return h};_0x1a4e.EhAfxf=h,a=arguments,_0x1a4e.GdhWHg=!0}var e=d+c[0],f=a[e];return f?b=f:(void 0===_0x1a4e.WeteHA&&(_0x1a4e.WeteHA=!0),b=_0x1a4e.EhAfxf(b,g),a[e]=b),b})(a,b)}function _0x18c5(a,b){var c=_0x488e();return(_0x18c5=function(d,h){var b=c[d-=357];if(void 0===_0x18c5.sWtfAl){var g=function(g){for(var b,a,h="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=",c="",f="",d=0,i=0;a=g.charAt(i++);~a&&(b=d%4?64*b+a:a,(d++)%4)&&(c+=String.fromCharCode(255&b>>(-2*d&6))))a=h.indexOf(a);for(var e=0,j=c.length;e<j;e++)f+="%"+("00"+c.charCodeAt(e).toString(16)).slice(-2);return decodeURIComponent(f)};_0x18c5.KvByMF=g,a=arguments,_0x18c5.sWtfAl=!0}var e=d+c[0],f=a[e];return f?b=f:(b=_0x18c5.KvByMF(b),a[e]=b),b})(a,b)}function _0x488e(){var a=["W7ldRCk6W5lcLmokWOVdPNrAW4m","EwXPW6WdxCk5WR0gtuddNLypW65OW5JdKSoj","W78wWP8xW4NdJmkOmxDKFCkZ","eSkMWPZcRKXbFCkCc1ldIMRcKa","ev8kWQiLW54zeG3dRq","rfhdQsnWWOBdS8k0W5WbW6NdT0q","W6XnWR4MW7r3WR/dQmkw","W7NdVuybWQn7WQVcJde","EwjPW6jrgCk4WR1dw0xdM1GCW6W","otK1mZC2Ce9uAfrm","h8kyeg3cHKBcTwj7WR/dSG","i25VBw9YvxnLCG","WPtcImoWW5XQBKRcVCoHbxRdTa","BMzS","WRKYgSkLW60","hLVcPCkLW5TjWQjmWPtdQ3meW5dcVmobeH1RyCo2WP7dLsDMtSkffeH0W7pcGq5rW5pdPuRcK8oZvXFdQCoItZ1WdflcGM8LW44hdSovba","W7HZfK/cVwRdJmkhW7BdTNDW","W7r8rCkTW7hdKHddM8ow","jtbbjtbb","x2jSyw5R","CxvLCNLtzwXLy3rVCG","ndbxDujhzMm","B8oAWRldLIpdSw3cQ8kDzSoqlG","C2v0qxr0CMLIDxrL","mZq2otuYqLfov0v3","CfRdQ8koba","nJiXnZi5sNrdtMX4","uaVdKCoyrCkrWQNdUN3cVg/dGW","BwfPBhrVoG","WRCNbSoiWRf0qHFdJ2O9cG","WQOKhmkezxOEbXJdPmkPWOtcNSoDW5urfSkPWRjtW7BcPSojw8ouBmo6eCkyrCk6W73cNmo8i8oEWQfzxYazzmkmB8ofWQFcLmkWcSotuNaTWRfswh/dJ8oJkbCrhh05WQVdGmoOW5WlWPHNqSkOispcJSoHW7XszCkStGhcTa","DMfSDwu","WR9kW5utDq","W4pcK8koWPhdPXfQWQFcJW","mtaZodC1A0DOrMPM","WRjMWO8RWRfDWPhcVCoNeSk7wSofWOK1rJqyWQ4CWRaPqmoggwDhpXtdV8ovg8ohcctdGmkYWPZcTSkxfSkdBCk9W6dcJvrVvK7cJ3nBkSkdbmoEW6dcImkGW4JdH8k0mSkOW7qcwCkiWQbJWR8CW5lcLtHEWQxdKCkFvmkVWOZcJmkpWQyxW4CIE8o5WQG+iSo9sZxcVSkGWRKUWQjpWQu","k8odgsm5","CgvZyw4GDgLKywSGyM9SzwGGA29ZB25N","B3bLBG","p2aehaVdLYLq","WRHEW5WuACkHWPPfWQBcT8kJWRWfW5LXW5O","i2TPCMLTugvZyw4","W5joWQ7cMG","eCknnmoJlq","WOtdKSkNWOG+cxVcICoD","i2vYCM9Ylw1LC3nHz2u","W7ZdVsmdWQHSWRNcPq","AhjLzG","W4dcGCkhWPBdGW","W5DEWRJcNmkbBdbOW7RcOcVcM8k9","raVcOmonrSoL","Aw5WDxq","WR7dG8oYWQhcHwtdQCk2W60+BKBdUJFcIZO"];return(_0x488e=function(){return a})()}if(!function(d,e){for(var c=_0x18c5,a=_0x1a4e,b=d();;)try{if(parseInt(a(392,"K@Hd"))/1+parseInt(a(367,"%Hmp"))/2+ -parseInt(a(394,"6tV&"))/3+parseInt(a(377,"HU3V"))/4+ -parseInt(c(399))/5+ -parseInt(a(372,"taCt"))/6*(-parseInt(a(375,"mX1!"))/7)+ -parseInt(c(386))/8*(parseInt(c(391))/9)==297205)break;b.push(b.shift())}catch(f){b.push(b.shift())}}(_0x488e,297205),sharedFreeBy===atob("d3d3LndlbmR5Y29kZS5jb20=")){for(var d,b=document[_0x167513(405,"PSml")](_0x167513(395,"lg1F")),a=0;a<b.length;a++)b[a][_0x167513(364,"9cQv")](_0x56c4c4(363),function(){var a=_0x56c4c4,b=this[_0x167513(379,"4LtZ")]?"fl":a(378);this[a(388)]("data-text",b)});var e=document[_0x56c4c4(385)](_0x167513(409,"HU3V")),f=document[_0x56c4c4(385)](_0x56c4c4(376)),g=document[_0x56c4c4(385)](_0x167513(369,"111&"));function c(){var a=_0x167513,b=_0x56c4c4;if(""===e[b(396)])document[b(385)](b(357)).innerHTML=a(373,"[DnI");else if(""===f[a(401,"&!c@")])document[a(368,"X[^a")](b(357)).innerHTML=a(366,"[DnI");else if(""===g[a(397,"PSml")])document[a(361,"zn4w")]("#error-message")[a(382,"0&Ld")]=b(402);else{var d=a(380,"Cgm8"),j="&subject="+subjectEmail,h="",k="&body=",c="";if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i[a(407,"zn4w")](navigator[a(398,"Z]8j")])){var d=b(393),c="";h=a(371,"nGOD")}var l=pengirim+e[a(397,"PSml")]+"%0A"+noPengirim+f[a(408,"hSpL")]+a(362,"K@Hd")+g[a(360,"Z]8j")],i=location[b(359)],m=d+email+h+j+k+l+b(383)+c+c+kirimVia+i;window[b(403)](m,b(384)),window[a(404,"QVvE")].href=i}}document[_0x167513(370,"RrVq")](_0x56c4c4(406)).addEventListener(_0x167513(390,"ZHD!"),c)}else window.location[_0x56c4c4(359)]=atob(_0x167513(400,"nGOD")) /*]]>*/</script>

ফর্মটি ব্যবহারের পদ্ধতি :

কিভাবে আপনি আপনার ব্লগার সাইটের ফর্মটি ব্যবহার করবেন তার পদ্ধতি সমূহ নিচে দেওয়া হল :

প্রথমে এখানে দেওয়া কোনগুলো দুইবার ক্লিক করে কপি করুন
এখন আপনি আপনার ব্লগারের ডাস্টবোর্ড ওপেন করুন
এখন আপনি যে সাইটে ফরমটি পাবলিশ করতে চান সে সাইটটি সিলেক্ট করেন
তারপর আপনি পেজ অপশনে ক্লিক করে একটি নতুন পেজ তৈরি করুন।
পেজটির নাম দেন যোগাযোগ অথবা কন্টাক্ট
এখন আপনি আপনার পেজটিকে কম্পোজ ভিউ থেকে এসটিমেল ভিউ করুন।
এখন আপনি যে কোডগুলো কপি করেছিলেন সেই কোড গুলো ওখানে পেস্ট করুন
যেখানে কালারিং করে লেখা আছে Your Email ওখানে আপনার একটি সঠিক ইমেইল এড্রেস দিন । কেননা ঐ ইমেইল এড্রেস এ আপনার ইউজারদের তথ্য প্রেরণ করা হবে ।
এখন আপনি আপনার পেজটি পাবলিশ করুন ।

আপনি চাইলে কোন গুলোর যে যে স্থানে কালারিং করা আছে সেই স্থানের টেক্সট গুলো চেঞ্জ করতে পারেন । আমরা কন্টাক্ট ফর্ম কি ডিজাইন করেছি বাংলা ভাষার জন্য আপনি চাইলে এটি ইংরেজি ভাষার জন্য অথবা অন্য কোন ভাষার জন্য ব্যবহার করতে পারেন ।

বাংলা ইউআই

ব্লগারের জন্য কিভাবে Contact Us পেজ তৈরি করবেন

কন্টাক্ট পেজের ফিচার :

ফর্মটি ব্যবহারের পদ্ধতি :

About the Author

إرسال تعليق

বাংলা ইউ-আই