() translation by (you can also view the original English article)
এই টিউটোরিয়ালে আমরা দেখবো, ঝামেলাবিহীনভাবে আপনার স্ট্যাটিক ওয়েবসাইটে একটি ডায়নামিক, ফ্লেক্সিবল ফর্ম সংযুক্ত করার একটি উপায়।
সমস্যা
ধরুন আপনি একটা স্ট্যাটিক ওয়েবসাইট বানিয়েছেন, জেকিলের মত কোন স্ট্যাটিক সাইট জেনারেটর ব্যাবহার করে, বা সাধারণ HTML ফাইল একত্র করে। কিন্তু সেখানে আপনার এখন একটা ফর্ম অ্যাড করা দরকার। সেটার জন্য আপনি বিভিন্ন অনলাইন সার্ভিস ব্যবহার করতে পারেন, সার্ভারে রাখা আগে থেকে বানানো কিছু ব্যবহার করতে পারেন, আবার PHP দিয়ে একটা স্ক্রিপ্ট বানিয়েও ব্যবহার করতে পারেন। কিন্তু এসব উপায়ে দেখা যায়, ওয়েব ডিজাইনে অনেক সীমাবদ্ধতা চলে আসে, বা দেখা যায় সামান্য একটা ফর্ম বানাতে পুরো ওয়েবসাইট বানানোর চেয়ে বেশি শ্রম দেয়া লাগে।
সমাধান
যদি এমন একটা সার্ভিস থাকতো, যেটা দিয়ে ডেভেলাপারের হাতে ফর্মের সম্পুর্ন নিয়ন্ত্রণ থাকে, অথচ সার্ভারে কিছু ইন্সটল করা লাগে না? এমন একটি সার্ভিস হচ্ছে Formspree, একটি অনলাইন সার্ভিস যেটা দিয়ে ফাংশনাল HTML ফর্ম তৈরি করা যায়, কোন PHP বা জাভাস্ক্রিপ্ট ছাড়াই।
আসুন চট করে আমরা দেখে নেই, কিভাবে আপনিও এই সার্ভিস দিয়ে ধাপে ধাপে নিজের ফর্ম তৈরি করে নিতে পারেন।
আপনার ফর্ম তৈরি করুন
প্রথমে আমাদের যেটা করা লাগবে, সেটা হচ্ছে, HTML দিয়ে একটা ফর্ম কোড করে নিতে হবে। আমি একটা খুব সিম্পল কন্টাক্ট ফর্ম বানাবো, যেটা দিয়ে মানুষ খুব সহজে আমার সাথে যোগাযোগ করতে পারবে - এই ফর্মে নাম, ইমেইল আর মেসেজ লেখার জন্য তিনটা ফিল্ড থাকবে। এই হচ্ছে আমার ফর্মের মার্কআপঃ
1 |
<form id="contactform" method="POST"> |
2 |
<input type="text" placeholder="Your name"> |
3 |
<input type="email" placeholder="Your email"> |
4 |
<textarea placeholder="Your message"></textarea> |
5 |
<input type="submit" value="Send"> |
6 |
</form>
|
দেখুন কিভাবে আমি <form> ইলিমেন্টের ভিতরে submit ইনপুট অ্যাড করেছি।
আমরা এই ফর্মটি যেভাবে ইচ্ছা সেভাবে স্টাইল করতে পারি। এখানে আমাদের ডিজাইন সীমাবদ্ধ করে দিতে কোন iframe বা অন্য কোন কোন প্রতিবন্ধকতা নেই।
Attrubutes অ্যাড করুন
Formspree দিয়ে আপনার ফর্ম হ্যান্ডেল করতে নিম্নে উল্লেখিত অ্যাকশন attribute আপনার <form> ইলিমেন্টে অ্যাড করতে হবেঃ
1 |
<form id="contactform" action="//formspree.io/your@email.com" method="POST"> |
এই অংশটি পরিবর্তন করুন "your@email.com" প্লেসহোল্ডার ভ্যালুর পরিবর্তে এখানে আপনার নিজের ইমেইল অ্যাড্রেস বসান, যেই অ্যাড্রেসে আপনি ফর্ম সাবমিশনগুলো রিসিভ করতে চান।
এরপর, প্রতিটি ফিল্ডে একটি করে name attribute দিন; এটা প্রতি সাবমিশনে ফর্মের লেবেল হিসেবে কাজ করবে। আপনি আগে থেকে ডিফাইন করা স্পেশাল Formspree ভ্যালুসমূহও ব্যবহার করতে পারেন, যেগুলো সব আন্ডারস্কোর দিয়ে শুরু হয়।
1 |
<form id="contactform" action="//formspree.io/your@email.com" method="POST"> |
2 |
<input type="text" name="name" placeholder="Your name"> |
3 |
<input type="email" name="_replyto" placeholder="Your email"> |
4 |
<textarea name="message" placeholder="Your message"></textarea> |
5 |
<input type="submit" value="Send"> |
6 |
</form>
|
এখানে উল্লেখযোগ্য যে আমি Name ফিল্ডের নাম Name আর Message ফিল্ডের নাম Message রাখলেও ইমেইল ফিল্ড ডিফাইন করতে স্পেশাল "_replyto" ভ্যালু ব্যবহার করেছি। Formspree এই attribute ভ্যালু চিহ্নিত করে, আমাকে সরাসরি ওই ইমেইলে রিপ্লাই দেয়ার সুযোগ করে দিবে, যেই ইমেইল থেকে ওই ফর্ম সাবমিশনটি এসেছিল।
ইমেইলে ফর্ম সাবমিশন চিনে নিতে সুবিধার জন্য ছোট একটি ট্রিক
আমরা আরেকটি হিডেন ইনপুট ফিল্ডে _next ভ্যালু অ্যাড করতে পারেন। এভাবে আমরা সিলেক্ট করতে পারব ফর্ম সাবমিশনের পরে ইউজারকে কোন URL এ রিডাইরেক্ট করতে চাই।
1 |
<input type="hidden" name="_next" value="//mywebsite.com/thanks.html" /> |
সাব্জেক্ট
কোথা থেকে সাবমিশনটি আসছে, তা বোঝার জন্য আমরা একটি সাবজেক্ট লাইনও অ্যাড করব। এটি করতে আমরা এই হিডেন ইনপুট ব্যবহার করবঃ
1 |
<input type="hidden" name="_subject" value="Website contact" /> |
এই ফিল্ডগুলো ইউজার ফর্ম ব্যবহারের সময় দেখতে পাবে না, কিন্তু ফর্ম সাবমিশনের সময় এই ফিল্ডের ভ্যালু সেখানে সাব্জেক্ট লাইন হিসেবে যুক্ত হয়ে যাবে।
ফর্মের নিরাপত্তা নিশ্চিত করা
স্প্যাম রোধ করার জন্য Formspree তে একটি বিল্টইন "হানিপট" মেথড আছে। এই হানিপট মেথড টি বেশ সহজ, এটি ব্যবহার করতে আমরা আমাদের ফর্মে এমন একটি ফিল্ড রাখবো, যেটা আসল ইউজাররা দেখবে না, কিন্তু স্প্যামবটগুলো ঠিকই দেখবে। এই পদ্ধতিতে, এই ফিল্ড শুধু স্প্যামবটগুলোই পূরণ করবে, ইউজাররা করবে না। এভাবে, যেই সাবমিশনে এই ফিল্ডটি পূরণ করা থাকবে, সেটা স্প্যাম হিসেবে গণ্য করা হবে।
এই টেকনিক ব্যবহার করতে নিম্নোক্ত কোড আপনার ফর্মে অ্যাড করুন।
1 |
<input type="text" name="_gotcha" style="display:none" /> |
উল্লেখ্য যে, এক্ষেত্রে কিন্তু স্ট্রাইল attribute ব্যবহার করে এই ফিল্ড হাইড করে নেয়া খুবই জরুরী। ইউজারের ব্রাউজার নির্ধারিত CSS এর জন্য এই ফিল্ড হিডেন রাখবে, কিন্তু স্প্যামবট (সম্ভবত) CSS অগ্রাহ্য করে এই ফিল্ড পূরণ করে ফেলবে। আমরা এই ফিল্ডের নাম রাখবো "_gotcha", যেটা দিয়ে Formspree এই ফিল্ড পূরণ করা সাবমিশনগুলো রিজেক্ট করবে।
এর চাইতেও বেশি সিকিউরিটি পেতে চাইলে আপনি ইমেইলটি জাভাস্ক্রিপ্টে র্যাপ করে নিতে পারেন। এই পদ্ধতি অবলম্বন করলে, স্প্যামবটের HTML থেকে আপনার মেইল অ্যাড্রেস পেয়ে যাওয়ার সম্ভাবনা খুবই কম থাকে। আসুন নিচে দেখে নেই আমরা এতক্ষণ কি করলামঃ
1 |
<form id="contactform" method="POST"> |
2 |
<input type="text" name="name" placeholder="Your name"> |
3 |
<input type="email" name="_replyto" placeholder="Your email"> |
4 |
<input type="hidden" name="_subject" value="Website contact" /> |
5 |
<textarea name="message" placeholder="Your message"></textarea> |
6 |
<input type="text" name="_gotcha" style="display:none" /> |
7 |
<input type="submit" value="Send"> |
8 |
</form>
|
9 |
<script>
|
10 |
var contactform = document.getElementById('contactform'); |
11 |
contactform.setAttribute('action', '//formspree.io/' + 'your' + '@' + 'email' + '.' + 'com'); |
12 |
</script>
|
এখানে আমরা <form> ইলিমেন্ট থেকে action attribute টি রিমুভ করে দিয়েছি, এবং সেটার বদলে ছোট একটা জাভাস্ক্রিপ্ট কোড অ্যাড করেছি। আমরা ইমেইল অ্যাড্রেস এর স্ট্রিং ভেঙ্গে ছোট ছোট অংশে ভাগও করে দিয়েছি যেন সেখান থেকে ইমেইল অ্যাড্রেসটি সনাক্ত করা কোন স্প্যামবটের জন্য আরও দুষ্কর হয়ে পড়ে। এই কোডে ব্যবহৃত ইমেইল অ্যাড্রেসটি রিপ্লেস করে আপনার নিজের ইমেইল অ্যাড্রেস বসিয়ে নিন।
আসুন ফর্মটি টেস্ট করে নেই
এই শেষ ধাপে আমরা চেক করব যে আমাদের ফর্মটি ঠিক মত কাজ করে কিনা। আপনার ওয়েবসাইটের যে পেজে এই ফর্মটি আছে, সেই পেজটি একটি ব্রাউজারের মাধ্যমে ভিজিট করুন, ফর্মটি ফিলাপ করে নিন আর নরমাল একজন ইউজারের মত সেন্ড করুন। এরপর আপনার Formspree থেকে একটি মেইল পাওয়ার কথা, যেখানে আপনাকে আপনার ইমেইল অ্যাড্রেসটি কনফার্ম করতে অনুরোধ করা হবে।
সেই মেইলে কনফার্মেশন লিংকটায় ক্লিক করুন, সব সেট হয়ে যাবে!
নোটঃ আপনি যতবার একটি নতুন পেজে ফর্মটি অ্যাড করবেন, ততবার এই মেইল কনফার্মেশন প্রসেসের মধ্যে দিয়ে আপনাকে যেতে হবে।
পরিশেষ
Formspree API দিয়ে খুব সহজেই, সৃজনশীলভাবে ওয়েবপেজে ফর্ম অ্যাড করা যায়। এটি স্ট্যাটিক সাইটগুলোর জন্য একটি চমৎকার সমাধান!
