अपनी वेबसाइट पर Google फॉर्म कैसे एम्बेड करें

जुलाई 2026 में अपडेट किया गया · 9 मिनट का पढ़ने का समय

विज़िटर्स को फॉर्म भरने के लिए साइट से बाहर भेजना रास्ते में उनमें से कुछ को खो देता है। Google फॉर्म को सीधे अपने पेज में एम्बेड करना लोगों को संदर्भ में रखता है — यह संपर्क फॉर्म, इवेंट साइन-अप, फीडबैक विजेट, या किसी भी ऐसी चीज़ के लिए उपयोगी है जिसे आप डिटूर के बजाय अपनी साइट का हिस्सा महसूस कराना चाहते हैं। Google एम्बेड कोड मुफ़्त में बनाता है; यहां इसे अच्छी तरह उपयोग करने का तरीका है।

बिल्ट-इन एम्बेड कोड प्राप्त करना

1. अपना फॉर्म खोलें और ऊपर-दाईं ओर Send पर क्लिक करें।
2. डायलॉग में, < > आइकन (एम्बेड HTML) पर क्लिक करें।
3. Google एक iframe स्निपेट बनाता है जो इस तरह दिखता है:

<iframe src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" width="640" height="921" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

4. Copy पर क्लिक करें, फिर उस स्निपेट को जहां भी आपकी साइट रॉ HTML स्वीकार करती है वहां पेस्ट करें।

चौड़ाई और ऊंचाई समायोजित करना

Google द्वारा बनाए गए डिफ़ॉल्ट आयाम एक उचित अनुमान हैं, लेकिन शायद ही कभी सटीक होते हैं। कोड में सीधे दो नंबरों को संपादित करें:

• चौड़ाई — इसे अपने पेज के कंटेंट कॉलम से मेल खाने के लिए सेट करें। एक आम विकल्प रैपिंग कंटेनर पर max-width के साथ width="100%" का संयोजन है, ताकि फॉर्म एक निश्चित पिक्सेल साइज़ में रहने के बजाय पेज के साथ स्केल हो।
• ऊंचाई — यह वह है जो समस्याएं पैदा करता है। जैसे-जैसे आप सवाल जोड़ते या हटाते हैं Google फॉर्म iframe को अपने आप रीसाइज़ नहीं करता, इसलिए अगर आपका फॉर्म ऊंचाई के मान से लंबा है, तो नीचे का हिस्सा कट जाता है और विज़िटर्स को सबमिट बटन ढूंढने के लिए एक छोटे बॉक्स के अंदर स्क्रॉल करना पड़ता है। संदेह होने पर, ऊंचाई को अपनी ज़रूरत से काफी लंबा सेट करें — छोटे फॉर्म के नीचे 200-300 पिक्सेल अतिरिक्त खाली जगह, लंबे फॉर्म पर कटे हुए सबमिट बटन से बहुत छोटी समस्या है।

WordPress पर एम्बेड करना

एक Custom HTML ब्लॉक जोड़ें (ब्लॉक एडिटर में) या HTML मोड में एक Text विजेट (क्लासिक एडिटर), और iframe कोड सीधे पेस्ट करें। WordPress इसे जैसा है वैसा रेंडर करता है — किसी प्लगइन की ज़रूरत नहीं, हालांकि ऐसे सरल एम्बेड के लिए Google फॉर्म को "इंपोर्ट" करने वाले फॉर्म प्लगइन अनावश्यक हैं।

Squarespace पर एम्बेड करना

पेज में एक Code Block जोड़ें (पेज संपादित करते समय ब्लॉक मेनू से), iframe HTML पेस्ट करें, और सेव करें। Squarespace के कोड ब्लॉक बिना किसी प्रतिबंध के इस तरह के रॉ एम्बेड को स्वीकार करते हैं, लेकिन ब्लॉक की चौड़ाई सेटिंग को अपने पेज के ग्रिड के अनुसार जांचें ताकि फॉर्म अपने कॉलम से ओवरफ्लो न हो।

Wix पर एम्बेड करना

Wix को Add पैनल से इसके Embed > Embed a Widget (या "HTML iframe") एलिमेंट का उपयोग करने की ज़रूरत होती है, फिर खुलने वाले सेटिंग्स पैनल में कोड पेस्ट करें। WordPress और Squarespace के विपरीत, Wix एम्बेड किए गए HTML को अपने खुद के iframe रैपर के अंदर रेंडर करता है, इसलिए आपको कोड की ऊंचाई का मान संपादित करने के अलावा कैनवास पर एलिमेंट के साइज़ को भी थोड़ा एडजस्ट करने की ज़रूरत पड़ सकती है।

सादे HTML पेज में एम्बेड करना

अगर आप हाथ से पेज कोड कर रहे हैं, तो जहां भी आप फॉर्म दिखाना चाहते हैं वहां iframe स्निपेट को सीधे बॉडी में पेस्ट करें — किसी विशेष हैंडलिंग की ज़रूरत नहीं। इसे max-width वाले कंटेनर div में लपेटना एक अच्छा विचार है ताकि फॉर्म चौड़ी स्क्रीन पर किनारे से किनारे तक न फैले।

आम समस्याएं

1. फॉर्म नीचे से कट रहा है। यह लगभग हमेशा ऊंचाई की समस्या है — ऊपर दिया गया समायोजन नोट देखें। ऊंचाई का मान तब तक बढ़ाएं जब तक पूरा फॉर्म, जिसमें सबमिट बटन और दिखाई देने वाली कोई भी "required" त्रुटियां शामिल हैं, बिना अंदरूनी स्क्रॉलबार के फिट न हो जाए।
2. एम्बेड किया गया फॉर्म मोबाइल पर रिस्पॉन्सिव नहीं दिखता। एक निश्चित पिक्सेल चौड़ाई छोटी स्क्रीन के लिए सिकुड़ती नहीं है। iframe में width="100%" सेट करें और पैरेंट एलिमेंट पर CSS max-width को ऊपरी सीमा नियंत्रित करने दें, ताकि यह फोन पर स्वाभाविक रूप से नीचे स्केल हो जाए।
3. फॉर्म खाली लोड होता है या "refused to connect" त्रुटि दिखाता है। इसका आमतौर पर मतलब है कि जिस पेज पर इसे एम्बेड किया गया है वह एक नेटवर्क या CMS प्रॉक्सी के ज़रिए परोसा जाता है जो थर्ड-पार्टी iframes को ब्लॉक करती है। अगर आप इन्हें सीधे प्रबंधित करते हैं तो अपनी साइट की Content-Security-Policy सेटिंग्स जांचें, क्योंकि एक प्रतिबंधात्मक frame-src नियम चुपचाप Google के डोमेन को ब्लॉक कर सकता है।
4. फॉर्म "Loading…" फ्लैश करता है और कभी पूरा नहीं होता। पुष्टि करें कि फॉर्म की शेयरिंग सेटिंग लिंक वाले किसी को भी इसे देखने की अनुमति देती है — अगर यह विशिष्ट लोगों या केवल आपके संगठन तक सीमित है, तो सार्वजनिक पेज पर एम्बेड किया गया iframe बाहरी विज़िटर्स के लिए उसी तरह लोड होने में विफल होगा जैसे एक सीधा लिंक होता।
5. स्टाइलिंग पेज के बाकी हिस्से से मेल नहीं खाती। Google फॉर्म iframe के अंदर अपने खुद के फॉन्ट और रंग रेंडर करता है और आपकी साइट के CSS को इनहेरिट नहीं करता — iframe के बाहर से फॉर्म की आंतरिक उपस्थिति को दोबारा स्टाइल करने का कोई समर्थित तरीका नहीं है, केवल इसके आसपास के कंटेनर को।

एम्बेडिंग और पेज लोड प्रदर्शन

एक एम्बेड किया गया Google फॉर्म अपने पेज के बाकी हिस्से से अलग अपनी खुद की iframe सामग्री लोड करता है, जो फॉर्म खुद दिखाई देने से पहले एक अतिरिक्त नेटवर्क रिक्वेस्ट और थोड़ी देरी जोड़ता है — आमतौर पर ध्यान देने लायक नहीं, लेकिन अगर आप पेज स्पीड ऑडिट कर रहे हैं तो जानना ज़रूरी है। अगर फॉर्म फोल्ड के नीचे है, तो iframe को लेज़ी-लोड करने पर विचार करें (iframe टैग में loading="lazy" जोड़कर) ताकि यह उस सामग्री के साथ बैंडविड्थ के लिए प्रतिस्पर्धा न करे जो विज़िटर्स तुरंत देखते हैं। यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित एक नेटिव HTML विशेषता है और इसके लिए किसी अतिरिक्त स्क्रिप्ट की ज़रूरत नहीं है।

एक्सेसिबिलिटी संबंधी विचार

चूंकि फॉर्म की सामग्री Google के अपने iframe के अंदर रहती है, इसकी एक्सेसिबिलिटी — स्क्रीन रीडर लेबल, कीबोर्ड नेविगेशन, फोकस ऑर्डर — आपके पेज पर आपके नियंत्रण की किसी चीज़ के बजाय Google फॉर्म द्वारा ही निर्धारित होती है। एक चीज़ जिसे आप अपनी ओर से सुधार सकते हैं वह है iframe टैग में एक वर्णनात्मक title विशेषता जोड़ना (उदाहरण के लिए, title="Event registration form"), जिसे स्क्रीन रीडर एम्बेड की गई सामग्री में प्रवेश करने से पहले घोषित करते हैं। Google फॉर्म बिना किसी अतिरिक्त काम के कितना एक्सेसिबल है, इस पर व्यापक नज़र के लिए Google फॉर्म एक्सेसिबिलिटी पर हमारी गाइड देखें।

एम्बेड करना बनाम सिर्फ लिंक करना

एम्बेड करना विज़िटर्स को आपके पेज पर रखता है, आपकी साइट के आसपास के डिज़ाइन से मेल खाता है, और उस ड्रॉप-ऑफ को कम कर सकता है जो तब होता है जब किसी को किसी अपरिचित डोमेन पर रीडायरेक्ट किया जाता है। यह किसी समर्पित पेज पर रखे गए छोटे फॉर्म के लिए बेहतर विकल्प है — जैसे संपर्क फॉर्म या त्वरित फीडबैक विजेट।

लिंक करना सेट करना आसान है (कोई ऊंचाई-ट्यूनिंग की ज़रूरत नहीं), फॉर्म को इसका पूरा, असीमित लेआउट देता है, और तंग iframe में लंबे या बहु-सेक्शन फॉर्म द्वारा बनाई जा सकने वाली बॉक्स-के-अंदर-स्क्रॉलिंग की भावना से बचाता है। अगर आपका फॉर्म लंबा है, इसमें फाइल अपलोड हैं, या ग्रिड सवाल का उपयोग करता है, तो इसे सीधे लिंक करना — Google फॉर्म शेयर करने पर हमारी गाइड देखें — आमतौर पर फॉर्म भरने वालों के लिए ज़्यादा आरामदायक अनुभव है।

संपर्क फॉर्म के लिए एम्बेड करना

Google फॉर्म को किसी बिज़नेस या पोर्टफोलियो साइट पर मुफ़्त संपर्क फॉर्म में बदलने के लिए एम्बेड करना खासतौर पर लोकप्रिय है — कोई बैकएंड नहीं, कोई ईमेल सर्वर सेटअप नहीं, और जवाब सीधे एक Google Sheet में आते हैं जिसे आप कभी भी जांच सकते हैं। अगर यह विशेष रूप से आपका लक्ष्य है, तो अपनी वेबसाइट के लिए संपर्क फॉर्म के रूप में Google फॉर्म का उपयोग करना पर हमारी समर्पित गाइड फील्ड विकल्पों और स्पैम-कमी सेटिंग्स को कवर करती है जो बुनियादी एम्बेड के ऊपर जोड़ने लायक हैं।

अक्सर पूछे जाने वाले सवाल

संबंधित गाइड

• Google फॉर्म कैसे शेयर करें
• Google फॉर्म का संपर्क फॉर्म के रूप में उपयोग करना
• Google फॉर्म कैसे बनाएं
• WordPress में Google फॉर्म एम्बेड करना, विस्तार से
• Google फॉर्म एक्सेसिबिलिटी गाइड