newsletter-subscribe,
আসসালামু আলাইকুম,
কেমন আছেন সবাই?
আমরা যখন বিভিন্ন সাইট ডেভেলপমেন্ট করি তখন বিভিন্ন ধরনের ই-মেইল ফর্ম তৈরী করার দরকার হয়। আমরা বিভিন্ন ধরণের ই-মেইল ক্লায়েন্ট ব্যবহার করি। আজ আপনাদের আমি MailChimp থেকে Email Subscribe এনাবল করার পদ্ধতি দেখাবো। এই পদ্ধতিটি সকল স্ট্যাটিক ও ডায়নামিক সাইটে ব্যবহার করতে পারবেন। তাহলে কাজ শুরু করা যাক……
১. প্রথমে আপনি এই সাইট ভিজিট করুন।
২. একাউন্ট থাকলে লগিন করুন আর না থাকলে সাইন-আপ করে লগিন করুন।
৩. প্রথমে লগইন করার পরে আপনাকে ড্যাশবোর্ড দেখানো হবে। সেখান থেকে বামপাশে থাকা Lists -এ ক্লিক করুন।
৪. ডানপাশে থাকা Creat List বাটনে ক্লিক করুন।
৫. তারপর Creat List নামে একটা পেজ আসবে, সেখান থেকে List Details -এর সকল তথ্য পুরণ করে সেভ বাটনে ক্লিক করুন।
৬. এবার আপনাকে নতুন একটা পেজ দেখবেন। সেখান থেকে Signup Forms -এ ক্লিক করুন। এরপর Embedded forms -এ ক্লিক করুন।
৭. আপনি এখান থেকে অনেক ধরনের ফর্ম তৈরি করতে পারবেন। আপনি আপনার পছন্দমত ফিল্ড তৈরি করে নিন।
৮. আপনি যদি তাদের ডিজাইন নিতে চান তাহলে ডানপাশে Preview -এর নিচে Copy/paste onto your site -এর বক্স থেকে কোডগুলো কপি করে নিন। কিন্তু আপনি যদি তাদের ডিজাইন না চান অর্থাৎ আপনি আপনারমত ডিজাইন করতে চান তাহলে Embedded form code -এর নিচে থাকা Naked -এ ক্লিক করুন। আপনার প্রয়োজনমত ফিল্ড সিলেক্ট করে নিন। তারপর Copy/paste onto your site নামের বক্স থেকে কোডগুলো কপি করে নিন।
৯।. যেমন আমি শুধুমাত্র ই-মেইল ফিল্ড নিলাম। নিচের কোডটি পেলাম। আপনিও এমন একটি কোড পাবেন।
<span class="sc-1"><!-- Begin MailChimp Signup Form --></span></pre>
<div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc_embed_signup"</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="kw2">form</span> <span class="kw3">action</span><span class="sy0">=</span><span class="st0">"http://facebook.us8.list-manage.com/subscribe/post?u=49313d225aa7aeb15c3dc85cc&id=e0b9554dc5"</span> <span class="kw3">method</span><span class="sy0">=</span><span class="st0">"post"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe-form"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe-form"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"validate"</span> <span class="kw3">target</span><span class="sy0">=</span><span class="st0">"_blank"</span> novalidate></span></div>
<div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"mc-field-group"</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"EMAIL"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required email"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mce-EMAIL"</span>></span></div>
<div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"clear"</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Subscribe"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"subscribe"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"button"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span></div>
<div class="de2"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de1"><span class="sc-1"><!--End mc_embed_signup--></span>
১০. এখান থেকে আপনার কোনো হেডিং প্রয়োজন না হলে<h2 > Subscribe to our mailing list</ h2 > লাইনটি কেটে দিন। আর প্রয়োজন হলে আপনার মত করে টেক্সট লিখুন।
১১. <div class = “indicates-required” ><span class = “asterisk” > *</ span > indicates required</ div > এই লাইনটিও কেটে দিতে পারেন।
১২. নিচের লাইনগুলোও কেটে দিন।
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mce-responses"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"clear"</span>></span>
<div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"response"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mce-error-response"</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">"display:none"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"response"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mce-success-response"</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">"display:none"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span> <span class="sc-1"><!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--></span></div>
<div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">"position: absolute; left: -5000px;"</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"b_49313d225aa7aeb15c3dc85cc_e0b9554dc5"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
১৩. লেভেলের প্রয়োজন না হলে নিচের লাইনটিও কেটে দিন।
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"mce-EMAIL"</span>></span>Email Address <span class="sc2"><<span class="kw2">span</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"asterisk"</span>></span>*<span class="sc2"><<span class="sy0">/</span><span class="kw2">span</span>><<span class="sy0">/</span><span class="kw2">label</span>></span>
১৪. কোডটি দেখতে এমন হবে।
<!– Begin MailChimp Signup Form –>
<div class="de2"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc_embed_signup"</span>></span></div>
<div class="de1"> <span class="sc2"><<span class="kw2">form</span> <span class="kw3">action</span><span class="sy0">=</span><span class="st0">"http://facebook.us8.list-manage.com/subscribe/post?u=49313d225aa7aeb15c3dc85cc&id=e0b9554dc5"</span> <span class="kw3">method</span><span class="sy0">=</span><span class="st0">"post"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe-form"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe-form"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"validate"</span> <span class="kw3">target</span><span class="sy0">=</span><span class="st0">"_blank"</span> novalidate></span></div>
<div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"mc-field-group"</span>></span></div>
<div class="de1"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"EMAIL"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required email"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mce-EMAIL"</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"clear"</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Subscribe"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"subscribe"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"button"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span></div>
<div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de2"><span class="sc-1"><!--End mc_embed_signup--></span>
১৬. আপনি যদি চান ইমেইলটা ভেলিডেট হল কিনা তা দেখাবে তাহলে novalidate এর স্থলে validate দিন। এবং
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"EMAIL"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required email"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mce-EMAIL"</span>><<span class="sy0">/</span><span class="kw2">code</span>></span> টিকে পরিবর্তন করে<span class="sc2"><<span class="kw2">code</span>></span> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"EMAIL"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required email"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mce-EMAIL"</span> required></span> এই লাইন দিন।
১৭. সবশেষে কোডটি দেখতে এমন হবে–
<!– Begin MailChimp Signup Form –>
<div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc_embed_signup"</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="kw2">form</span> <span class="kw3">action</span><span class="sy0">=</span><span class="st0">"http://facebook.us8.list-manage.com/subscribe/post?u=49313d225aa7aeb15c3dc85cc&id=e0b9554dc5"</span> <span class="kw3">method</span><span class="sy0">=</span><span class="st0">"post"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe-form"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe-form"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"validate"</span> <span class="kw3">target</span><span class="sy0">=</span><span class="st0">"_blank"</span> validate></span></div>
<div class="de1"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"mc-field-group"</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"email"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"EMAIL"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"required email"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mce-EMAIL"</span> required></span></div>
<div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"clear"</span>><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Subscribe"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"subscribe"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"mc-embedded-subscribe"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"button"</span>><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span></div>
<div class="de2"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div>
<div class="de1"><span class="sc-1"><!--End mc_embed_signup--></span>
বুঝতে কোন অসুবিধা হলে জানাবেন, স্ক্রীনশর্টসহ দেয়ার চেষ্টা করব।
ভাল লাগলে কমেন্টে জানাতে ভুলবে না…
ভুলে ভরা জীবনে ভুল হওয়াটা অসম্ভব কিছু নয়,যদি আমার লেখার মাঝে কোন ভুল-ত্রুটি থাকে ক্ষমার দৃষ্টিতে দেখবেন। ধন্যবাদ সবাই ভাল থাকবেন।
tag: Email Subscribe, MailChimp, html, newsletter-subscribe
সুন্দর । 😀
ধন্যবাদ।