আপনার ওয়েবসাইটে কন্টাক্ট ফর্ম কীভাবে যুক্ত করবেন (যা সত্যিই আপনার কাছে পৌঁছায়)

একটি কার্যকর কন্টাক্ট ফর্ম যুক্ত করতে একটি ছোট ফর্ম বানান (নাম, ইমেইল, বার্তা), সেটি একটি সার্ভার রুটে পাঠান যা ইনপুট যাচাই করে, বার্তাটি ডেটাবেসে সংরক্ষণ করে, এবং তারপর একটি সিক্রেট API কী দিয়ে একটি ইমেইল প্রদানকারীর মাধ্যমে আপনাকে বিজ্ঞপ্তি পাঠায়। বেশিরভাগ স্প্যাম ঠেকাতে একটি লুকানো honeypot ফিল্ড ও রেট লিমিটিং যোগ করুন, একটি স্পষ্ট সফলতার বার্তা দেখান, এবং প্রকাশিত সাইটে শুরু থেকে শেষ পর্যন্ত পরীক্ষা করুন। ইমেইল পাঠানোর আগে সংরক্ষণ করাই গুরুত্বপূর্ণ অংশ: ইমেইল কখনো ব্যর্থ হলেও আপনার অনুসন্ধানটি থেকে যায়।

আপনার বিকল্পগুলো

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

একটি ভালো কন্টাক্ট ফর্মে যা থাকে

• যতটা সম্ভব কম ফিল্ড। নাম, ইমেইল, বার্তা। একটি বিষয়ের ড্রপডাউন ("বিক্রয়", "সহায়তা", "অন্যান্য") যোগ করুন শুধু তখনই, যদি সে অনুযায়ী রুট করেন।
• প্রতিটি ফিল্ডের উপরে স্পষ্ট লেবেল, শুধু প্লেসহোল্ডার টেক্সট নয় যা মুছে যায়।
• সহায়ক যাচাই: "একটি বৈধ ইমেইল ঠিকানা লিখুন", ফিল্ডের পাশে দেখানো।
• একটি সফলতার অবস্থা যা বলে পরে কী হবে: "ধন্যবাদ — আমরা একটি কর্মদিবসের মধ্যে উত্তর দেব।"
• একটি গোপনীয়তা নোট যে বিবরণ কীভাবে ব্যবহার করবেন, আপনার গোপনীয়তা নীতির লিংকসহ।
• একটি বিকল্প উপায়, যেমন আপনার ইমেইল বা ফোন নম্বর, যারা তা পছন্দ করেন তাদের জন্য।

উদাহরণ প্রম্পট

মৌলিক ফর্ম:

কন্টাক্ট পৃষ্ঠায় নাম, ইমেইল ও বার্তা সহ একটি কন্টাক্ট ফর্ম যোগ করো (সবগুলো আবশ্যক, বার্তা সর্বোচ্চ ২,০০০ অক্ষর)। এটি একটি সার্ভার রুটে পাঠাও, যা ইনপুট যাচাই করে, গ্রহণের সময়সহ একটি contact_messages টেবিলে সংরক্ষণ করে, এবং সফলতার বার্তা দেখায়: "ধন্যবাদ, আমরা একটি কর্মদিবসের মধ্যে উত্তর দেব।" ফিল্ডের ত্রুটি পাশাপাশি দেখাও। ফোনে ভালোভাবে কাজ করাও।

ইমেইল বিজ্ঞপ্তি:

একটি কন্টাক্ট বার্তা সংরক্ষিত হলে, Resend ব্যবহার করে hello@example.com-এ আমাকে একটি বিজ্ঞপ্তি ইমেইল পাঠাও, কী RESEND_API_KEY-তে রাখা থাকবে। প্রেরকের ইমেইল reply-to-তে সেট করো, যাতে আমি সরাসরি উত্তর দিতে পারি। পাঠাতে ব্যর্থ হলে সংরক্ষিত বার্তা রাখো এবং কী প্রকাশ না করে ত্রুটি লগ করো।

স্প্যাম সুরক্ষা:

কন্টাক্ট ফর্মে স্প্যাম সুরক্ষা যোগ করো: একটি লুকানো honeypot ফিল্ড যা খালি থাকতে হবে, সার্ভারে প্রতি IP-তে প্রতি ঘণ্টায় ৫টি জমার সীমা, এবং তিনটির বেশি লিংকওয়ালা বার্তা প্রত্যাখ্যান করো। honeypot জমা নীরবে বাতিল করো, তবুও সফলতা দেখাও।

একটি ইনবক্স:

একটি পাসওয়ার্ড-সুরক্ষিত অ্যাডমিন পৃষ্ঠা যোগ করো, যেখানে কন্টাক্ট বার্তা সর্বনতুন আগে দেখায়, একটি "হ্যান্ডলড" চেকবক্স ও যেসব বার্তা এখনও হ্যান্ডল হয়নি তার ফিল্টারসহ।

ধাপে ধাপে

1. বার্তা কোথায় যাবে ঠিক করুন: কে বিজ্ঞপ্তি পাবেন, এবং কে উত্তর দেবেন।
2. উপরের ফিল্ডগুলো দিয়ে ফর্ম বানান, অ্যাক্সেসযোগ্য লেবেল ও মোবাইল-বান্ধব ইনপুটসহ (ইমেইল ইনপুট টাইপ ব্যবহার করুন, যাতে ফোনে সঠিক কীবোর্ড দেখায়)।
3. সার্ভার রুট বানান। এটি আবশ্যক ফিল্ড, ইমেইল ফরম্যাট ও দৈর্ঘ্যের সীমা যাচাই করে। শুধু ব্রাউজারের যাচাইয়ে কখনো ভরসা করবেন না।
4. প্রথমে ডেটাবেসে সংরক্ষণ করুন। আপনার অ্যাপে ডেটাবেস কীভাবে যোগ করবেন দেখুন।
5. একটি ইমেইল প্রদানকারী সেটআপ করুন। একটি অ্যাকাউন্ট বানান, আপনার প্রেরক ডোমেইন যাচাই করুন, এবং API কী একটি সিক্রেট হিসেবে রাখুন। অ্যাপ থেকে ইমেইল কীভাবে পাঠাবেন ডোমেইন সেটআপ (SPF, DKIM) বিস্তারিত বলে।
6. সংরক্ষণের পরে সার্ভার থেকে বিজ্ঞপ্তি পাঠান। আপনার যাচাইকৃত ডোমেইনকে প্রেরক হিসেবে এবং দর্শকের ঠিকানাকে reply-to হিসেবে ব্যবহার করুন; দর্শকের ঠিকানা থেকে "from" পাঠাবেন না, তাহলে সেটি স্পুফিং হিসেবে প্রত্যাখ্যাত হতে পারে।
7. ঐচ্ছিকভাবে দর্শককে স্বয়ংক্রিয় উত্তর দিন, তবে সংক্ষিপ্ত রাখুন; স্প্যাম ঠিকানায় স্বয়ংক্রিয় উত্তর আপনার প্রেরক সুনামের ক্ষতি করতে পারে।
8. স্প্যাম সুরক্ষা যোগ করুন: honeypot, রেট লিমিটিং, তারপর প্রয়োজন হলে CAPTCHA-ধরনের যাচাই।
9. প্রকাশিত সাইটে পরীক্ষা করুন: জমা দিন, ডেটাবেস দেখুন, আপনার ইনবক্স ও স্প্যাম ফোল্ডার দেখুন, উত্তর দিতে ক্লিক করুন।

স্প্যাম ঠেকানো

কন্টাক্ট ফর্ম লাইভ হওয়ার কয়েক দিনের মধ্যে বট আসে। সবচেয়ে কম অনুপ্রবেশকারী থেকে সবচেয়ে বেশি পর্যন্ত স্তরে স্তরে প্রতিরক্ষা দিন:

1. Honeypot ফিল্ড। মানুষের কাছে লুকানো একটি ফিল্ড; বটেরা এটি পূরণ করে। আসল দর্শকের কোনো ক্ষতি হয় না।
2. সার্ভারে রেট লিমিটিং। একটি সময়কালে একটি ঠিকানা কতগুলো বার্তা পাঠাতে পারে তার সীমা।
3. বিষয়বস্তুর নিয়ম। লিংকে ঠাসা বার্তা, অথবা খালি বা অস্বাভাবিক লম্বা বার্তা প্রত্যাখ্যান করুন।
4. CAPTCHA-ধরনের যাচাই, যেমন Cloudflare Turnstile বা Google reCAPTCHA। টোকেনটি আপনার সার্ভারে যাচাই করতে হবে; শুধু ব্রাউজারে চলা যাচাই এড়িয়ে যাওয়া যায়।

সাধারণ ভুল

• কিছু না পাঠিয়েও "পাঠানো হয়েছে!" দেখানো। UI সার্ভারের উত্তরের আগে বা সেটি নির্বিশেষে সফলতা দেখায়। সবসময় সার্ভারের জন্য অপেক্ষা করুন।
• শুধু ইমেইল, কোনো ডেটাবেস নেই। একটি ভুল কনফিগার করা কী, আর কেউ টের না পেয়েই সপ্তাহের পর সপ্তাহ অনুসন্ধান হারিয়ে যায়।
• ফ্রন্টএন্ড কোডে API কী। যেকেউ এটি দিয়ে আপনার নামে ইমেইল পাঠাতে পারে।
• যাচাই-না-করা প্রেরক ডোমেইন। বিজ্ঞপ্তি স্প্যামে যায় বা কখনো পৌঁছায় না।
• দর্শকের ইমেইল থেকে "from" পাঠানো। পরিবর্তে reply-to ব্যবহার করুন।
• কোনো দৈর্ঘ্যের সীমা নেই। বটেরা বিশাল টেক্সটের ব্লক পেস্ট করে।
• লাইভ সাইট কখনো পরীক্ষা না করা। প্রিভিউ ও প্রোডাকশনের মধ্যে কী ও ডোমেইন প্রায়ই ভিন্ন হয়।

চেকলিস্ট

• দৃশ্যমান লেবেল ও স্পষ্ট ত্রুটিসহ ছোট ফর্ম
• সার্ভারে যাচাই ও দৈর্ঘ্যের সীমা
• প্রতিটি বার্তা ডেটাবেসে সংরক্ষিত
• যাচাইকৃত ডোমেইন থেকে পাঠানো বিজ্ঞপ্তি ইমেইল, reply-to সেট করা
• ইমেইল API কী শুধু সার্ভার-সাইড সিক্রেটে
• honeypot ও রেট লিমিটিং চালু
• সফলতার বার্তা শুধু সার্ভার নিশ্চিত করার পরে দেখায়
• গোপনীয়তা নোট আপনার গোপনীয়তা নীতির লিংক দেয়
• প্রকাশিত সাইটে শুরু থেকে শেষ পর্যন্ত পরীক্ষিত, স্প্যাম ফোল্ডারসহ

Mythex-এ কন্টাক্ট ফর্ম

Mythex-এ চ্যাট থেকেই পুরো জিনিসটি বানানো যায়। একই প্রম্পটে ফর্ম ও একটি ডেটাবেস চান, যাতে জমা দেওয়াগুলো টিকে থাকে (অথবা /database টাইপ করুন)। Mythex-এর ভেতরে কোনো অন্তর্নির্মিত ইমেইল পাঠানোর পণ্য নেই, তাই বিজ্ঞপ্তির জন্য আপনি Resend, SendGrid বা Postmark-এর মতো একটি প্রদানকারী আনুন, /secrets বা প্রজেক্ট সেটিংসে তার কী যোগ করুন, এবং এজেন্টকে সার্ভার থেকে পাঠাতে বলুন; দেখুন আপনার অ্যাপ থেকে ইমেইল পাঠান। এর উপর নির্ভর করার আগে প্রিভিউয়ে ফর্মের বিপরীতে App Testing (/test) চালান, তারপর প্রকাশ করে লাইভ URL-এ পরীক্ষা করুন।

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

প্রশ্নোত্তর