जनरेट किए गए कंपोनेंट से अपनी वेबसाइट पर फ़ॉर्म एम्बेड करें

फ़ॉर्म को 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 टोकन की जगह खड़ा है, और असली कॉपी में सबसे पहले एक 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 के लिए मायने रखता है।

तय करें कि पोस्ट कहाँ से आ सकती हैं

डिफ़ॉल्ट रूप से फ़ॉर्म किसी भी ऑरिजिन से आई पोस्ट स्वीकार करता है। 'सुरक्षा' टैब में 'सबमिशन कहाँ से आ सकते हैं' के नीचे, 'अनुमत ऑरिजिन' में केवल होस्टनेम लिए जाते हैं, बिना स्कीम या पाथ के। उसके सहायता पाठ के अनुसार खाली सूची का मतलब है कि कोई भी ऑरिजिन चलेगा। अपनी साइट का होस्टनेम जोड़ें, जैसे 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. पैनल में 'सबमिशन' खोलें और एंट्री ढूँढें। अगर वह नहीं है, तो कुछ भी बदलने से पहले 'अस्वीकृत' जाँचें।

जिन सीमाओं को जानना चाहिए

• पेस्ट की गई कॉपी फ़ॉर्म के फ़ील्ड में बाद के बदलावों को तब तक नहीं अपनाती जब तक आप लाइव रेंडरिंग न इस्तेमाल करें या दोबारा कॉपी न करें।

• शैली कॉपी करते समय तय हो जाती है। उसे बाद में फ़ॉर्म से नहीं बदला जा सकता।

• रीडायरेक्ट केवल नेटिव फ़ॉर्म पर लागू होता है।

• अनुमत ऑरिजिन ब्राउज़र ट्रैफ़िक को सीमित करते हैं। वे किसी की पहचान प्रमाणित नहीं करते।