تیار کردہ کمپوننٹ کے ساتھ اپنی ویب سائٹ پر فارم ایمبیڈ کریں

فارم کو FormFlow کے کسی صفحے کی ضرورت نہیں۔ اگر آپ کی اپنی ویب سائٹ پہلے سے ہے تو آپ فارم کا تیار کردہ کمپوننٹ اس میں پیسٹ کر سکتے ہیں اور اپنے وزیٹرز کو اپنے ہی صفحات پر رکھ سکتے ہیں۔ یہ ٹیوٹوریل کاپی کرنے اور پیسٹ کرنے کا احاطہ کرتا ہے، اور ان دو باتوں کا جو بعد میں لوگوں کو سب سے زیادہ حیران کرتی ہیں: بھیجیں دبانے کے بعد وزیٹر کہاں پہنچتا ہے، اور جب آپ بعد میں فارم کی فیلڈز بدلتے ہیں تو کیا ہوتا ہے۔ ایمبیڈ کرنے کی سہولت v1.0.0 سے FormFlow کا حصہ ہے۔

آپ کو کیا چاہیے

کم از کم ایک فیلڈ والا فارم، اور آپ کا اپنا ایک صفحہ جہاں آپ HTML، یا Blade، Vue یا React فائل میں پیسٹ کر سکیں۔ آپ کو ہوسٹ کردہ صفحے کی ضرورت نہیں، جو صرف ادا شدہ پلان پر دستیاب ہے۔ کوڈ حاصل کریں آپ کا پلان نہیں جانچتا، اس لیے مفت پلان پر موجود ٹیم بھی فارم ایمبیڈ کر سکتی ہے۔ پلان کا سبمشن الاؤنس پھر بھی اس پر لاگو رہتا ہے جو فارم کو موصول ہوتا ہے۔

تیار کردہ کمپوننٹ کاپی کریں

1. پینل میں فارم کھولیں۔ ایڈیٹر کے ہیڈر میں کوڈ حاصل کریں دبائیں۔ جس فارم کو کبھی کوئی سبمشن موصول نہیں ہوا اس پر یہ نمایاں بٹن ہے۔ باقی ہر فارم پر یہ ٹولز کے نیچے ہوتا ہے۔ فارمز کی فہرست میں بھی ہر قطار پر کوڈ حاصل کریں کا ایکشن موجود ہے۔

2. ونڈو کا عنوان پیسٹ کے لیے تیار کمپوننٹ ہے۔ اس کی پہلی سطر میں "اپنے فارم کو یہاں بھیجیں" لکھا ہوتا ہے، اس کے بعد فارم کا اینڈ پوائنٹ، جو فارم کے ٹوکن پر ختم ہوتا ہے۔ آپ کے صفحے کو صرف یہی ایک پتہ چاہیے۔

3. ایک اسٹائل منتخب کریں۔ ایک اسٹائل ہر ٹیب اور پیش منظر کو چلاتا ہے، اور Minimal پہلے سے طے شدہ ہے۔ اسٹائل کاپی میں لکھ دیا جاتا ہے، اس لیے بعد میں دوسرا اسٹائل چاہیے تو دوبارہ کاپی کرنا ہوگا۔

4. اپنے اسٹیک کا ٹیب چنیں: HTML، Blade، Vue یا React۔ پیش منظر ٹیب HTML ورژن کو پینل کے اندر دکھاتا ہے تاکہ آپ کچھ پیسٹ کرنے سے پہلے اسے دیکھ لیں۔

5. ٹیب کے اوپر کلپ بورڈ پر کاپی کریں کا بیج دبائیں اور نتیجہ اپنے صفحے میں وہاں پیسٹ کریں جہاں فارم نظر آنا چاہیے۔

HTML کاپی میں کیا ہوتا ہے

HTML ٹیب ایک عام فارم ہے جو آپ کے فارم کے اینڈ پوائنٹ پر پوسٹ کرتا ہے۔ یہ ای میل فیلڈ والے فارم کا مختصر نمونہ ہے۔ YOUR_FORM_TOKEN ٹوکن کی جگہ کھڑا ہے، اور اصل کاپی میں سب سے پہلے ایک style عنصر آتا ہے جس میں اسٹائل کا CSS ہوتا ہے۔

<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 فارم جمع کرانے والے ایک خام JSON جواب پر جائیں گے۔"

1. فارم کے ایڈیٹر میں ترسیل ٹیب کھولیں۔

2. بھیجنے والا کہاں پہنچتا ہے کے تحت، جمع کرانے والوں کو ری ڈائریکٹ کریں برائے میں اپنی ہی سائٹ کا شکریہ کا صفحہ لکھیں۔ یہ http یا https پتہ ہونا چاہیے۔

3. فارم محفوظ کریں۔

React اور Vue کاپیاں مختلف طریقے سے کام کرتی ہیں۔ وہ پس منظر میں پوسٹ کرتی ہیں اور اپنا تصدیقی پیغام اسی جگہ دکھاتی ہیں، اس لیے ری ڈائریکٹ صرف HTML اور Blade کے لیے معنی رکھتا ہے۔

پوسٹس کے آنے کی جگہ محدود کریں

پہلے سے طے شدہ طور پر فارم کسی بھی اوریجن سے پوسٹ قبول کرتا ہے۔ سیکیورٹی ٹیب میں، جمع شدہ ردعمل کہاں سے آ سکتے ہیں کے تحت، اجازت یافتہ اوریجنز صرف ہوسٹ نیم لیتا ہے، بغیر scheme یا path کے۔ اس کا ہیلپر ٹیکسٹ کہتا ہے کہ خالی فہرست کسی بھی اوریجن کو اجازت دیتی ہے۔ اپنی سائٹ کا ہوسٹ نیم شامل کریں، مثلاً example.com، اور دوسرے اوریجنز کی پوسٹس واپس کر دی جاتی ہیں۔ اس کے نیچے والا سوئچ، بغیر Origin ہیڈر کے سبمشنز کو مسترد کریں، ان پوسٹس کو بھی واپس کرتا ہے جن میں کوئی اوریجن ہو ہی نہیں۔

اگر آپ کے صفحے سے بھیجی گئی ٹیسٹ پوسٹ واپس کر دی جائے تو عموماً ہوسٹ نیم کی غلط ٹائپنگ وجہ ہوتی ہے۔ FormFlow ایسی مسترد شدہ سبمشنز رکھتا ہے جن پر آپ عمل کر سکتے ہیں، اس لیے فہرست درست کریں، پھر انہیں بازیاب کرنے کے لیے پینل میں مسترد شدہ دیکھیں۔

Turnstile اور آپ کی Content Security Policy

دو مزید باتیں صرف تب لاگو ہوتی ہیں جب آپ انہیں استعمال کریں۔ پہلی، سیکیورٹی ٹیب کا Turnstile چیلنج لازمی قرار دیں سوئچ۔ FormFlow کی بلٹ ان Turnstile کی (key) صرف ان صفحات کا احاطہ کرتی ہے جو FormFlow پیش کرتا ہے، اس لیے اپنی سائٹ پر آپ کو اپنی Cloudflare Turnstile کی چاہیے، جو ٹیم کی ترتیبات میں درج کی جاتی ہے۔ اس کے بغیر کاپی میں YOUR_TURNSTILE_SITE_KEY کا پلیس ہولڈر ہوتا ہے اور آپ کے صفحے سے آنے والی ہر سبمشن کو سپیم کے طور پر نشان زد کیا جاتا ہے۔

دوسری، اگر آپ کی سائٹ Content Security Policy بھیجتی ہے تو کوڈ حاصل کریں شامل کی جانے والی ہدایات اس سطر پر دکھاتا ہے جو "اگر آپ کی سائٹ Content Security Policy (CSP) استعمال کرتی ہے" سے شروع ہوتی ہے۔ سادہ کاپی کے لیے یہ ایک script-src ہے جو 'self' اور challenges.cloudflare.com کو اجازت دیتا ہے، challenges.cloudflare.com کے لیے ایک frame-src، اور آپ کے فارم کے اینڈ پوائنٹ کے اوریجن کے لیے ایک connect-src۔ سطر یہاں سے نہیں بلکہ ونڈو سے کاپی کریں، کیونکہ وہ آپ کے فارم کے لیے بنتی ہے۔

جانچیں کہ یہ کام کرتا ہے

1. اپنا صفحہ کھولیں اور پیسٹ کیے ہوئے فارم سے ایک ٹیسٹ اندراج بھیجیں۔

2. تصدیق کریں کہ آپ وہیں پہنچتے ہیں جہاں توقع ہے: آپ کا شکریہ کا صفحہ، یا React یا Vue کاپی میں تصدیقی پیغام۔

3. پینل میں سبمشنز کھولیں اور اندراج تلاش کریں۔ اگر وہ غائب ہے تو کچھ بدلنے سے پہلے مسترد شدہ دیکھیں۔

جاننے کے لیے حدود

• پیسٹ کی ہوئی کاپی فارم کی فیلڈز میں بعد کی تبدیلیوں کی پیروی نہیں کرتی، جب تک آپ لائیو رینڈرنگ استعمال نہ کریں یا دوبارہ کاپی نہ کریں۔

• کاپی کرتے وقت اسٹائل طے ہو جاتا ہے۔ بعد میں اسے فارم سے نہیں بدلا جا سکتا۔

• ری ڈائریکٹ صرف نیٹیو فارمز پر لاگو ہوتا ہے۔

• اجازت یافتہ اوریجنز براؤزر کی ٹریفک کو محدود کرتا ہے۔ یہ کسی کی شناخت کی تصدیق نہیں کرتا۔