জেনারেট করা কম্পোনেন্ট দিয়ে নিজের ওয়েবসাইটে ফর্ম এম্বেড করুন

একটি ফর্মের জন্য FormFlow-এর কোনো পেজ লাগে না। আপনার আগে থেকেই ওয়েবসাইট থাকলে ফর্মের জেনারেট করা কম্পোনেন্ট সেখানে পেস্ট করে ভিজিটরদের নিজের পেজেই রাখতে পারেন। এই টিউটোরিয়ালে আছে কপি করা, পেস্ট করা, আর পরে সবচেয়ে বেশি যে দুটি বিষয় মানুষকে অবাক করে: পাঠান চাপার পর ভিজিটর কোথায় যান, এবং পরে ফর্মের ফিল্ড বদলালে কী হয়। এম্বেড করা FormFlow-এ আছে v1.0.0 থেকে।

যা লাগবে

অন্তত একটি ফিল্ডসহ একটি ফর্ম, আর নিজের একটি পেজ যেখানে HTML, অথবা Blade, Vue বা React ফাইল পেস্ট করতে পারেন। হোস্ট করা পৃষ্ঠা আপনার লাগবে না, সেটি শুধু পেইড প্ল্যানে পাওয়া যায়। কোড পান আপনার প্ল্যান যাচাই করে না, তাই ফ্রি প্ল্যানের একটি টিমও ফর্ম এম্বেড করতে পারে। ফর্ম যা গ্রহণ করে তার ওপর প্ল্যানের সাবমিশন সীমা তখনও প্রযোজ্য।

জেনারেট করা কম্পোনেন্ট কপি করুন

1. প্যানেলে ফর্মটি খুলুন। এডিটরের হেডারে কোড পান চাপুন। যে ফর্ম কখনো কোনো সাবমিশন পায়নি, সেখানে এটি হাইলাইট করা বোতাম। অন্য সব ফর্মে এটি টুলস-এর নিচে থাকে। ফর্মসমূহ তালিকার প্রতিটি সারিতেও একটি কোড পান অ্যাকশন আছে।

2. উইন্ডোর শিরোনাম পেস্ট করার জন্য প্রস্তুত কম্পোনেন্ট। এর প্রথম লাইনে লেখা "আপনার ফর্মটিকে ... -এ পয়েন্ট করুন", তারপর ফর্মের এন্ডপয়েন্ট, যার শেষে ফর্মের টোকেন। আপনার পেজের শুধু এই এন্ডপয়েন্ট ঠিকানাটিই লাগে।

3. একটি স্টাইল বেছে নিন। একটি স্টাইলই প্রতিটি ট্যাব ও প্রিভিউ চালায়, আর ডিফল্ট হলো Minimal। স্টাইল কপির ভেতরে লেখা হয়ে যায়, তাই পরে অন্য স্টাইল চাইলে আবার কপি করতে হবে।

4. আপনার স্ট্যাকের ট্যাবটি বেছে নিন: HTML, Blade, Vue বা React। প্রিভিউ ট্যাব প্যানেলের ভেতরেই HTML সংস্করণটি এঁকে দেখায়, যাতে কিছু পেস্ট করার আগেই দেখে নিতে পারেন।

5. ট্যাবের ওপরের ক্লিপবোর্ডে কপি করুন ব্যাজটি চাপুন, তারপর ফর্মটি যেখানে দেখাতে চান আপনার পেজের সেই জায়গায় ফলাফলটি পেস্ট করুন।

HTML কপিতে কী থাকে

HTML ট্যাব একটি সাধারণ ফর্ম, যা আপনার ফর্মের এন্ডপয়েন্টে পোস্ট করে। এটি ইমেইল ফিল্ডসহ একটি ফর্মের সংক্ষিপ্ত নমুনা। YOUR_FORM_TOKEN টোকেনের জায়গায় বসানো, আর আসল কপিতে স্টাইলের CSS ধারণকারী একটি style এলিমেন্ট সবার আগে আসে।

<form action="https://formflow.digital/api/v1/f/YOUR_FORM_TOKEN" class="ff-form" lang="en" dir="ltr" method="post">
    <div class="ff-group">
        <label class="ff-label" for="ff-email" dir="auto">Email<span aria-hidden="true"> *</span></label>
        <input class="ff-input" id="ff-email" name="email" type="email" dir="auto" autocomplete="email" required>
    </div>
    <!-- ...one group per field... -->

    <div aria-hidden="true" class="ff-honeypot">
        <label for="ff-ff_xxxxxxxx">Leave this field empty</label>
        <input autocomplete="off" id="ff-ff_xxxxxxxx" name="ff_xxxxxxxx" tabindex="-1" type="text">
    </div>

    <button class="ff-button" type="submit">Send</button>
</form>

দুটি অংশ নিয়ে একটু বলা দরকার। name="email"-এর মতো ফিল্ডের নামগুলোই আপনার সাবমিশনে উত্তর হিসেবে দেখা যায়, তাই সেগুলো বদলাতে হলে পেজে নয়, ফর্মে বদলান। স্ক্রিনের বাইরে রাখা ইনপুটটি একটি স্প্যাম ফাঁদ, যা মানুষ কখনো দেখে না আর বট প্রায়ই পূরণ করে ফেলে। এর নাম প্রতিটি ফর্মের জন্য আলাদাভাবে তৈরি হয়, এখানে ff_xxxxxxxx হিসেবে দেখানো। এটি যেমন আছে তেমনই রেখে দিন।

ভিজিটর কোথায় যাবেন ঠিক করুন

HTML ও Blade কপি দুটিই নেটিভ ফর্ম। কেউ পাঠান চাপলে ব্রাউজার FormFlow-এ পোস্ট করে এবং FormFlow যা উত্তর দেয় তা-ই দেখায়। কোনো রিডাইরেক্ট না থাকলে সেই উত্তর একটি ছোট JSON বার্তা। এটি সঠিক, কিন্তু ভিজিটরকে এটি পড়তে দেওয়া আপনি চান না। সেটিংয়ের পাশে প্যানেলও একই কথা বলে: "প্লেইন HTML ফর্মের সাবমিটাররা সরাসরি একটি র (raw) JSON রেসপন্স দেখতে পাবেন।"

1. ফর্মের এডিটরে ডেলিভারি ট্যাবটি খুলুন।

2. সাবমিটকারী কোথায় পৌঁছায় অংশে সাবমিটারদের যেখানে রিডাইরেক্ট করা হবে ঘরে আপনার নিজের সাইটের একটি ধন্যবাদ পেজ দিন। এটি অবশ্যই http বা https ঠিকানা হতে হবে।

3. ফর্মটি সংরক্ষণ করুন।

React ও Vue কপি আলাদাভাবে কাজ করে। এগুলো ব্যাকগ্রাউন্ডে পোস্ট করে এবং নিজেদের নিশ্চিতকরণ বার্তা সেখানেই দেখায়, তাই রিডাইরেক্ট শুধু HTML ও Blade-এর ক্ষেত্রে গুরুত্বপূর্ণ।

পোস্ট কোথা থেকে আসতে পারবে তা সীমিত করুন

ডিফল্টভাবে ফর্ম যেকোনো অরিজিন থেকে পোস্ট গ্রহণ করে। নিরাপত্তা ট্যাবে সাবমিশন কোথা থেকে আসতে পারে অংশে অনুমোদিত উৎসসমূহ ঘরে শুধু হোস্টনেম দেওয়া যায়, স্কিম বা পাথ ছাড়া। এর সহায়ক লেখায় বলা আছে, তালিকা খালি থাকলে যেকোনো অরিজিন অনুমোদিত। আপনার সাইটের হোস্টনেম যোগ করুন, যেমন example.com, তাহলে অন্য অরিজিনের পোস্ট ফিরিয়ে দেওয়া হবে। এর নিচের সুইচ Origin হেডারবিহীন সাবমিশনগুলো প্রত্যাখ্যান করুন কোনো অরিজিনই নেই এমন পোস্টও ফিরিয়ে দেয়।

আপনার পেজ থেকে পাঠানো একটি টেস্ট পোস্ট ফিরিয়ে দেওয়া হলে সাধারণত হোস্টনেমে ভুল বানানই কারণ। FormFlow যেসব প্রত্যাখ্যাত সাবমিশনের ওপর আপনি ব্যবস্থা নিতে পারেন সেগুলো রেখে দেয়, তাই তালিকাটি ঠিক করুন, তারপর সেগুলো উদ্ধার করতে প্যানেলে প্রত্যাখ্যাত অংশে দেখুন।

Turnstile এবং আপনার কনটেন্ট সিকিউরিটি পলিসি

আরও দুটি বিষয় প্রযোজ্য শুধু তখনই, যখন আপনি সেগুলো ব্যবহার করেন। প্রথমটি, নিরাপত্তা ট্যাবের Turnstile চ্যালেঞ্জ বাধ্যতামূলক করুন সুইচ। FormFlow-এর বিল্ট-ইন Turnstile কী শুধু FormFlow যে পেজ সার্ভ করে সেগুলোর জন্য, তাই নিজের সাইটে আপনার নিজস্ব Cloudflare Turnstile কী লাগবে, যা টিম সেটিংস-এ দিতে হয়। এটি ছাড়া কপিতে YOUR_TURNSTILE_SITE_KEY প্লেসহোল্ডারটি থেকে যায় এবং আপনার পেজ থেকে আসা প্রতিটি সাবমিশন স্প্যাম হিসেবে স্কোর হয়।

দ্বিতীয়ত, আপনার সাইট কনটেন্ট সিকিউরিটি পলিসি পাঠালে কোড পান যে ডিরেক্টিভগুলো যোগ করতে হবে তা ছাপিয়ে দেয়, সেই লাইনে যা শুরু হয় "আপনার সাইট যদি কনটেন্ট সিকিউরিটি পলিসি (CSP) ব্যবহার করে" দিয়ে। সাধারণ কপির জন্য সেটি হলো একটি script-src যা 'self' ও challenges.cloudflare.com অনুমোদন করে, challenges.cloudflare.com-এর জন্য একটি frame-src, এবং আপনার ফর্মের এন্ডপয়েন্টের অরিজিনের জন্য একটি connect-src। লাইনটি এখান থেকে নয়, উইন্ডো থেকে কপি করুন, কারণ ওটি আপনার ফর্মের জন্য তৈরি হয়।

কাজ করছে কি না দেখুন

1. আপনার পেজ খুলুন এবং পেস্ট করা ফর্ম দিয়ে একটি টেস্ট এন্ট্রি পাঠান।

2. যেখানে যাওয়ার কথা সেখানেই পৌঁছেছেন কি না নিশ্চিত করুন: আপনার ধন্যবাদ পেজ, অথবা React বা Vue কপিতে নিশ্চিতকরণ বার্তা।

3. প্যানেলে সাবমিশনগুলো খুলে এন্ট্রিটি খুঁজুন। না পেলে কিছু বদলানোর আগে প্রত্যাখ্যাত অংশ দেখুন।

যে সীমাবদ্ধতাগুলো জানা দরকার

• পেস্ট করা কপি ফর্মের ফিল্ডে পরবর্তী পরিবর্তন অনুসরণ করে না, যদি না আপনি লাইভ রেন্ডারিং ব্যবহার করেন বা আবার কপি করেন।

• কপি করার সময়ই স্টাইল স্থির হয়ে যায়। পরে ফর্ম থেকে তা বদলানো যায় না।

• রিডাইরেক্ট শুধু নেটিভ ফর্মের ক্ষেত্রে প্রযোজ্য।

• অনুমোদিত উৎসসমূহ ব্রাউজারের ট্রাফিক সংকুচিত করে। এটি কাউকে প্রমাণীকরণ করে না।