كيفية تضمين نموذج Google في موقعك الإلكتروني

تم التحديث في يوليو 2026 · وقت القراءة 9 دقائق

الإجابة السريعة: افتح نموذجك، انقر على Send، ثم انقر على أيقونة التضمين < > لنسخ كود iframe HTML. الصق ذلك الكود في كتلة Custom HTML أو Code في موقعك الإلكتروني. اضبط قيمتي width وheight في الكود حتى لا يُقتطع النموذج، خاصة إذا كان طويلًا.

إرسال الزوار خارج الموقع لملء نموذج يفقد بعضهم في الطريق. تضمين نموذج Google مباشرة في صفحتك يُبقي الأشخاص في السياق — مفيد لنماذج التواصل، والتسجيل في الفعاليات، وأدوات الملاحظات، أو أي شيء تريده أن يبدو جزءًا من موقعك وليس انحرافًا عنه. توفر Google كود التضمين مجانًا؛ إليك كيفية استخدامه بشكل جيد.

الحصول على كود التضمين المدمج

افتح نموذجك وانقر على Send في الزاوية العلوية.
في مربع الحوار، انقر على أيقونة < > (تضمين HTML).
تُنشئ 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>

انقر على Copy، ثم الصق ذلك المقطع أينما يقبل موقعك HTML خامًا.

ضبط العرض والارتفاع

الأبعاد الافتراضية التي تُنشئها Google تخمين معقول، لكنها نادرًا ما تكون دقيقة. حرّر الرقمين مباشرة في الكود:

العرض — اضبطه ليتطابق مع عمود محتوى صفحتك. خيار شائع هو width="100%" مع حد أقصى للعرض على حاوية ملفوفة، بحيث يتكيّف النموذج مع حجم الصفحة بدلًا من البقاء بحجم بكسل ثابت.
الارتفاع — هذا هو ما يسبب المشكلات. لا يعيد Google نماذج تحجيم iframe تلقائيًا عند إضافة أو إزالة أسئلة، لذا إذا كان نموذجك أطول من قيمة الارتفاع، يُقتطع الجزء السفلي ويضطر الزوار للتمرير داخل صندوق صغير للعثور على زر الإرسال. عند الشك، اضبط الارتفاع أعلى بشكل ملحوظ مما تظن أنك تحتاجه — مساحة فارغة إضافية بمقدار 200-300 بكسل أسفل نموذج قصير مشكلة أصغر بكثير من زر إرسال مقطوع في نموذج طويل.

التضمين في WordPress

أضف كتلة Custom HTML (في محرر الكتل) أو أداة Text في وضع HTML (المحرر الكلاسيكي)، والصق كود iframe مباشرة. يعرضه WordPress كما هو — لا حاجة لإضافة إضافية، رغم أن إضافات النماذج التي "تستورد" نماذج Google غير ضرورية لتضمين بسيط كهذا.

التضمين في Squarespace

أضف Code Block إلى الصفحة (من قائمة الكتل عند تحرير صفحة)، والصق كود iframe HTML، واحفظ. تقبل كتل الكود في Squarespace تضمينات خام كهذه دون قيود، لكن تحقق من إعداد عرض الكتلة مقابل شبكة صفحتك حتى لا يتجاوز النموذج عموده.

التضمين في Wix

يتطلب Wix استخدام عنصر Embed > Embed a Widget (أو "HTML iframe") من لوحة الإضافة، ثم لصق الكود في لوحة الإعدادات التي تفتح. على عكس WordPress وSquarespace، يعرض Wix HTML المضمّن داخل غلاف iframe خاص به، لذا قد تحتاج إلى تعديل حجم العنصر على اللوحة بالإضافة إلى تحرير قيمة ارتفاع الكود.

التضمين في صفحة HTML عادية

إذا كنت تكتب صفحة يدويًا بالكود، الصق مقطع iframe مباشرة في body أينما تريد ظهور النموذج — لا حاجة لمعالجة خاصة. من الجيد لفّه في div حاوية بحد أقصى للعرض حتى لا يمتد النموذج من حافة إلى حافة على الشاشات العريضة.

المشكلات الشائعة

النموذج مقطوع من الأسفل. هذه دائمًا تقريبًا مشكلة ارتفاع — راجع ملاحظة الضبط أعلاه. زد قيمة الارتفاع حتى يتناسب النموذج بالكامل، بما في ذلك زر الإرسال وأي أخطاء "required" قد تظهر، دون شريط تمرير داخلي.
النموذج المضمّن لا يبدو متجاوبًا على الجوال. العرض بالبكسل الثابت لا ينكمش للشاشات الصغيرة. اضبط width="100%" في iframe واترك حد CSS الأقصى للعرض على العنصر الأصل يتحكم في الحد الأعلى، بحيث يتقلص طبيعيًا على الهواتف.
النموذج يُحمَّل فارغًا أو يعرض خطأ "refused to connect". يعني هذا عادةً أن الصفحة المضمّن فيها تُخدَّم عبر شبكة أو وسيط نظام إدارة محتوى يمنع إطارات iframe الخارجية. تحقق من إعدادات Content-Security-Policy لموقعك إذا كنت تديرها مباشرة، لأن قاعدة frame-src مقيّدة يمكن أن تمنع نطاق Google بصمت.
النموذج يومض "Loading…" ولا ينتهي أبدًا. تأكد من أن إعداد مشاركة النموذج يسمح لأي شخص لديه الرابط بمشاهدته — إذا كان مقيّدًا بأشخاص محددين أو مؤسستك فقط، سيفشل iframe المضمّن في صفحة عامة في التحميل للزوار الخارجيين بنفس الطريقة التي يفشل بها رابط مباشر.
يبدو التنسيق غير متناسق مع بقية الصفحة. يعرض Google نماذج خطوطه وألوانه الخاصة داخل iframe ولا يرث CSS موقعك — لا توجد طريقة مدعومة لإعادة تصميم المظهر الداخلي للنموذج من خارج iframe، فقط الحاوية المحيطة به.

التضمين وأداء تحميل الصفحة

يُحمّل نموذج Google المضمّن محتوى iframe الخاص به بشكل منفصل عن بقية صفحتك، مما يضيف طلب شبكة إضافيًا وتأخيرًا صغيرًا قبل ظهور النموذج نفسه — عادة لا يُلاحَظ، لكن يستحق المعرفة إذا كنت تدقق سرعة الصفحة. إذا كان النموذج أسفل الطية، فكّر في التحميل الكسول لـiframe (بإضافة loading="lazy" إلى وسم iframe) حتى لا ينافس على النطاق الترددي مع المحتوى الذي يراه الزوار فورًا. هذه سمة HTML أصلية تدعمها جميع المتصفحات الحديثة ولا تتطلب أي سكريبت إضافي.

اعتبارات إمكانية الوصول

لأن محتوى النموذج يعيش داخل iframe خاص بـGoogle، فإن إمكانية الوصول إليه — تسميات قارئ الشاشة، والتنقل بلوحة المفاتيح، وترتيب التركيز — يحددها Google نماذج نفسه وليس أي شيء تتحكم فيه على صفحتك. الشيء الوحيد الذي يمكنك تحسينه من جهتك هو إضافة سمة title وصفية إلى وسم iframe (مثلًا، title="Event registration form")، والتي تعلنها قارئات الشاشة قبل الدخول إلى المحتوى المضمّن. لنظرة أوسع على مدى إمكانية وصول Google نماذج بشكل افتراضي، راجع دليلنا حول إمكانية وصول Google نماذج.

التضمين مقابل الربط الخارجي فقط

يُبقي التضمين الزوار في صفحتك، ويتناسب مع التصميم المحيط لموقعك، ويمكن أن يقلل من التسرب الذي يحدث عندما يُعاد توجيه شخص ما إلى نطاق غير مألوف. إنه الخيار الأفضل للنماذج القصيرة الموضوعة في صفحة مخصصة — مثل نموذج تواصل أو أداة ملاحظات سريعة.

الربط الخارجي أبسط في الإعداد (لا حاجة لضبط الارتفاع)، ويمنح النموذج تخطيطه الكامل غير المقيد، ويتجنب شعور التمرير داخل صندوق الذي يمكن أن تُحدثه النماذج الطويلة أو متعددة الأقسام في iframe ضيّق. إذا كان نموذجك طويلًا، أو يحتوي على رفع ملفات، أو يستخدم أسئلة شبكية، فإن الربط المباشر إليه — راجع دليلنا حول مشاركة نموذج Google — عادةً ما يكون التجربة الأكثر راحة للمستجيبين.

التضمين لنموذج تواصل

يحظى التضمين بشعبية خاصة لتحويل نموذج Google إلى نموذج تواصل مجاني في موقع أعمال أو محفظة أعمال — بلا خادم خلفي، ولا إعداد خادم بريد إلكتروني، وتصل الردود مباشرة إلى جدول بيانات Google يمكنك مراجعته في أي وقت. إذا كان هذا هدفك تحديدًا، يغطي دليلنا المخصص حول استخدام Google نماذج كنموذج تواصل لموقعك اختيارات الحقول وإعدادات تقليل البريد المزعج التي يستحق إضافتها فوق التضمين الأساسي.

الأسئلة الشائعة

لماذا يظهر نموذج Google المضمّن مقصوصًا؟

يستخدم كود التضمين الافتراضي ارتفاعًا ثابتًا، قد يكون أقصر من نموذجك الفعلي. زد قيمة الارتفاع في سمة style الخاصة بـiframe، أو اضبطها أعلى بكثير من محتوى النموذج حتى لا يُقطع شيء.

هل من الأفضل تضمين نموذج Google أم الاكتفاء بالربط إليه؟

التضمين يُبقي الزوار في موقعك ويتناسب مع تصميم صفحتك، مما قد يحسّن معدلات الإكمال. الربط الخارجي يفتح تجربة النموذج الكاملة غير المقيدة وهو أبسط في الإعداد. للنماذج القصيرة في صفحة مخصصة، يعمل التضمين عادة بشكل أفضل؛ أما للنماذج الطويلة أو المعقدة، فإن الربط الخارجي يتجنب التمرير الضيق داخل iframe.

هل يمكنني تضمين نموذج Google في WordPress أو Squarespace؟

نعم. الصق كود تضمين iframe في كتلة Custom HTML في WordPress، أو Code Block في Squarespace وWix. تدعم المنصات الثلاث تضمينات HTML خام لهذا الغرض.

لماذا يعرض نموذج Google المضمّن لدي مربعًا فارغًا أو يرفض الاتصال؟

يحدث هذا عادةً بسبب سياسة Content-Security-Policy مقيّدة في موقعك تمنع إطارات iframe من جهات خارجية، أو لأن إعدادات مشاركة النموذج مقيّدة بأشخاص محددين بدلاً من أي شخص لديه الرابط. تأكد من أن النموذج مشترك مع "Anyone with the link" وتحقق من أي قيود frame-src قد يفرضها موقعك أو نظام إدارة المحتوى.