आप किसी खास फ़ॉर्म टूल में फ़ॉर्म बनाते हैं। अब आपको वह फ़ॉर्म अपनी वेबसाइट पर लगाना है। अगर आपकी वेबसाइट किसी दूसरे प्लेटफ़ॉर्म पर है, तो आप कोड कॉपी-पेस्ट नहीं कर सकते। आप उसे एम्बेड करते हैं। एम्बेड किया फ़ॉर्म आपकी साइट पर दिखता है पर रहता कहीं और है।
इस लेख में बताया गया है कि फ़ॉर्म कैसे एम्बेड करें, iframe कैसे काम करते हैं, क्रॉस-डोमेन सुरक्षा क्या है और एम्बेड किए फ़ॉर्म की आम समस्याएं क्या हैं।
एम्बेडेड फ़ॉर्म क्या है?
एम्बेडेड फ़ॉर्म वह फ़ॉर्म है जो एक सर्वर पर रहता है पर दूसरी वेबसाइट पर दिखता है। फ़ॉर्म wemasy.in पर होस्ट है पर आपकी साइट पर <iframe src="https://wemasy.com/form/abc123"></iframe> जैसे iframe से दिखता है।
iframe किसी दूसरे पेज में एक खिड़की बनाता है। उस पेज में फ़ॉर्म होता है। यूज़र को लगता है कि फ़ॉर्म आपकी साइट पर है। तकनीकी रूप से वह एक कंटेनर के अंदर अलग पेज है।
iframe कैसे काम करते हैं
iframe एक इनलाइन फ़्रेम है। यह आपके पेज के अंदर एक बिल्कुल अलग पेज लोड करता है। उस अलग पेज का अपना HTML, CSS और JavaScript होता है। वह सैंडबॉक्स में रहता है, यानी वह आपके पेज तक नहीं पहुंच सकता और आपका पेज उस तक नहीं।
iframe सुरक्षा के लिए अलगाव देते हैं: फ़ॉर्म टूल आपके पेज का डेटा नहीं देख सकता, आपका पेज फ़ॉर्म का डेटा नहीं देख सकता, और अगर फ़ॉर्म क्रैश हो तो आपका पेज क्रैश नहीं होता। पर iframe के नुकसान भी हैं: पेज और फ़ॉर्म के बीच सीधा संवाद सीमित, SEO पर संभावित असर (Google शायद फ़ॉर्म का कंटेंट इंडेक्स न करे), धीमा लोड, और क्रॉस-डोमेन कुकी सपोर्ट की कमी।
iframe से फ़ॉर्म एम्बेड करना
ज़्यादातर फ़ॉर्म बिल्डर <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe> जैसा एम्बेड कोड देते हैं। इस कोड को अपनी वेबसाइट के HTML में कॉपी-पेस्ट करें, तो फ़ॉर्म कंटेनर के अंदर दिखेगा। एक आम समस्या यह है कि तय ऊंचाई से स्क्रॉलिंग की दिक्कत होती है। अगर फ़ॉर्म आपकी रखी ऊंचाई से लंबा है, तो फ़ॉर्म iframe के अंदर स्क्रॉल होता है (खराब अनुभव)। आपको फ़ॉर्म की सटीक ऊंचाई पता होनी चाहिए, पर फ़ॉर्म कंडीशनल लॉजिक के हिसाब से बढ़ते-घटते हैं, इसलिए ऊंचाई तय नहीं रहती। इसका हल है iframe और पैरेंट पेज के बीच संवाद के लिए postMessage वाले ऑटो-रीसाइज़िंग iframe। जब फ़ॉर्म का साइज़ बदलता है, वह पैरेंट पेज को iframe रीसाइज़ करने को कहता है। पैरेंट पेज की JavaScript iframe से आने वाले मैसेज window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } }); से सुनती है। iframe के अंदर का फ़ॉर्म अपनी ऊंचाई parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*'); से भेजता है, इसलिए iframe अपने आप फ़ॉर्म के कंटेंट के हिसाब से फैल जाता है।
क्रॉस-डोमेन सुरक्षा
सुरक्षा के लिए iframe सैंडबॉक्स में रहते हैं। फ़ॉर्म आपके पेज का डेटा नहीं देख सकता। आपका पेज फ़ॉर्म का डेटा नहीं देख सकता। यह अच्छा है।
<iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe> में sandbox एट्रिब्यूट के साथ सावधान रहें। sandbox एट्रिब्यूट सीमित करता है कि iframe क्या कर सकता है। allow-same-origin से iframe कुकी और सेशन स्टोरेज देख सकता है, allow-scripts से JavaScript चल सकती है, और allow-forms से फ़ॉर्म सबमिट हो सकता है। सिर्फ़ वही sandbox अनुमतियां चालू करें जो आपको सच में चाहिए, क्योंकि डिफ़ॉल्ट (सब अनुमतियां बंद) सबसे सुरक्षित है पर ज़्यादातर फ़ॉर्म तोड़ देता है।
एम्बेडेड फ़ॉर्म के साथ फ़ॉर्म सबमिशन
जब यूज़र iframe के अंदर फ़ॉर्म सबमिट करता है, तो सबमिशन iframe के अंदर होता है और फ़ॉर्म डेटा को फ़ॉर्म बिल्डर के सर्वर पर भेजता है (आपके सर्वर पर नहीं)। आपका सर्वर फ़ॉर्म डेटा कभी नहीं देखता, क्योंकि फ़ॉर्म टूल उसे रखता है और आप उसे बाद में API या ईमेल नोटिफ़िकेशन से पाते हैं। अगर आपको ज़्यादा कंट्रोल चाहिए, तो आपको सबमिशन को बीच में पकड़ना होगा। इसके लिए फ़ॉर्म टूल को पैरेंट पेज को window.parent.postMessage({ type: 'submit', data: formData }, origin); से postMessage भेजना होगा, फिर पैरेंट पेज डेटा के साथ कुछ कर सकता है (अपने सर्वर पर भेजना, कस्टम थैंक यू पेज दिखाना, आदि)।
एम्बेडेड फ़ॉर्म के लिए मोबाइल की बातें
मोबाइल पर iframe समस्या बन सकते हैं। फ़ॉर्म छोटा होता है और उसके साथ काम करना मुश्किल। अगर iframe ऑटो-रीसाइज़िंग सपोर्ट नहीं करता, तो वह ठीक से रीसाइज़ नहीं होगा।
मोबाइल पर बेहतर तरीका है iframe एम्बेड करने की जगह फ़ुल-पेज फ़ॉर्म की लिंक देना। व्यूपोर्ट साइज़ पता करें और मोबाइल पर लिंक बटन दिखाएं, पर डेस्कटॉप पर एम्बेड करें: if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Open form</a>'; } else { // embed the iframe }।
एम्बेडेड फ़ॉर्म का परफ़ॉर्मेंस पर असर
iframe अतिरिक्त बोझ जोड़ते हैं। हर iframe एक अलग HTTP रिक्वेस्ट है। वह अपना HTML, CSS और JavaScript लोड करता है। इससे आपका पेज धीमा होता है।
iframe को लेज़ी लोड करें, यानी जब तक यूज़र उसके पास तक स्क्रॉल न करे तब तक लोड न करें: <iframe data-src="https://..." style="display: none"></iframe> और window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });। iframe तभी लोड होता है जब यूज़र उसे देखने ही वाला हो।
एम्बेडेड फ़ॉर्म कब इस्तेमाल करें और विकल्प कब
एम्बेडेड फ़ॉर्म तब इस्तेमाल करें जब आप अपनी वेबसाइट को कस्टमाइज़ नहीं कर सकते (जैसे किसी बंद होस्टेड वेबसाइट बिल्डर पर) या आप फ़ॉर्म टूल को अपनी साइट से अलग रखना चाहते हैं।
नेटिव फ़ॉर्म तब इस्तेमाल करें जब वेबसाइट आपके कंट्रोल में हो और आपको परफ़ॉर्मेंस चाहिए। आपके अपने टेक स्टैक पर बना फ़ॉर्म तेज़ लोड होता है और बेहतर जुड़ता है।
होस्टेड (स्टैंडअलोन) फ़ॉर्म तब इस्तेमाल करें जब आप सरलता चाहते हैं। बिल्डर के डोमेन पर फ़ॉर्म सेट करना सबसे आसान है पर कम प्रोफ़ेशनल दिखता है।
WEMASY में फ़ॉर्म
WEMASY में फ़ॉर्म टूल है, और आप फ़ॉर्म सीधे अपनी वेबसाइट पर बना सकते हैं। आप मुफ़्त में शुरू कर सकते हैं और पेड प्लान 7 दिन आज़मा सकते हैं।
अपने WEMASY प्लान के बारे में जानें।