چگونه یک فرم گوگل را در وبسایت خود جاسازی کنیم
پاسخ سریع: فرم خود را باز کنید، روی Send کلیک کنید، سپس روی آیکون جاسازی < > کلیک کنید تا کد HTML مربوط به iframe کپی شود. آن کد را در یک بلوک Custom HTML یا Code در وبسایت خود جایگذاری کنید. مقادیر width و height را در کد تنظیم کنید تا فرم بریده نشود، بهخصوص اگر طولانی باشد.
فرستادن بازدیدکنندگان به خارج از سایت برای پر کردن فرم، برخی از آنها را در این مسیر از دست میدهد. جاسازی مستقیم یک فرم گوگل در صفحهتان افراد را در همان زمینه نگه میدارد — مفید برای فرمهای تماس، ثبتنام رویداد، ابزارکهای بازخورد، یا هر چیزی که میخواهید بخشی از سایتتان به نظر برسد نه یک مسیر انحرافی. گوگل کد جاسازی را بهطور رایگان میسازد؛ در ادامه نحوه استفاده درست از آن آمده است.
دریافت کد جاسازی داخلی
- فرم خود را باز کنید و روی Send در گوشه بالا سمت راست کلیک کنید.
- در پنجره، روی آیکون < > (embed HTML) کلیک کنید.
- گوگل قطعهکد 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 خام میپذیرد جایگذاری کنید.
تنظیم عرض و ارتفاع
ابعاد پیشفرضی که گوگل تولید میکند حدس منطقی است اما بهندرت دقیق. دو عدد را مستقیماً در کد ویرایش کنید:
- عرض — آن را متناسب با ستون محتوای صفحهتان تنظیم کنید. یک انتخاب رایج
width="100%"همراه با یک max-width روی یک ظرف پوششی است، تا فرم با صفحه مقیاس شود بهجای اینکه در اندازه پیکسلی ثابت بماند. - ارتفاع — این چیزی است که مشکل ایجاد میکند. گوگل فرمز هنگام افزودن یا حذف سؤالات، اندازه iframe را بهطور خودکار تغییر نمیدهد، پس اگر فرم شما طولانیتر از مقدار ارتفاع باشد، پایین آن بریده میشود و بازدیدکنندگان باید درون یک جعبه کوچک اسکرول کنند تا دکمه ارسال را پیدا کنند. در صورت تردید، ارتفاع را بهطور محسوسی بلندتر از آنچه فکر میکنید لازم است تنظیم کنید — ۲۰۰ تا ۳۰۰ پیکسل فضای خالی اضافی زیر یک فرم کوتاه مشکل بسیار کوچکتری نسبت به دکمه ارسال بریدهشده در یک فرم طولانی است.
جاسازی در وردپرس
یک بلوک Custom HTML (در ویرایشگر بلوکی) یا یک ابزارک Text در حالت HTML (ویرایشگر کلاسیک) اضافه کنید، و کد iframe را مستقیماً در آن جایگذاری کنید. وردپرس آن را همانطور که هست نمایش میدهد — نیازی به افزونه نیست، هرچند افزونههای فرمی که فرمهای گوگل را «وارد» میکنند برای جاسازی سادهای مثل این ضروری نیستند.
جاسازی در اسکوئرسپیس
یک Code Block به صفحه اضافه کنید (از منوی بلوک هنگام ویرایش صفحه)، کد HTML مربوط به iframe را جایگذاری کنید، و ذخیره کنید. بلوکهای کد اسکوئرسپیس بدون محدودیت جاسازیهای خام مانند این را میپذیرند، اما تنظیم عرض بلوک را در برابر شبکه صفحهتان بررسی کنید تا فرم از ستون خود بیرون نزند.
جاسازی در ویکس
ویکس نیاز دارد از عنصر Embed > Embed a Widget (یا "HTML iframe") خود از پنل Add استفاده کنید، سپس کد را در پنل تنظیماتی که باز میشود جایگذاری کنید. برخلاف وردپرس و اسکوئرسپیس، ویکس HTML جاسازیشده را درون پوشش iframe خودش نمایش میدهد، پس ممکن است لازم باشد علاوه بر ویرایش مقدار ارتفاع کد، اندازه عنصر را روی بوم نیز تنظیم کنید.
جاسازی در یک صفحه HTML ساده
اگر صفحهای را دستی کدنویسی میکنید، قطعهکد iframe را مستقیماً در body هر جا که میخواهید فرم ظاهر شود جایگذاری کنید — نیازی به دستکاری خاصی نیست. ایده خوبی است آن را در یک div ظرفی با max-width قرار دهید تا فرم روی صفحههای عریض از لبه تا لبه کشیده نشود.
مشکلات رایج
- فرم از پایین بریده شده است. این تقریباً همیشه مشکل ارتفاع است — به نکته تنظیم بالا مراجعه کنید. مقدار ارتفاع را افزایش دهید تا کل فرم، از جمله دکمه ارسال و هر خطای "required" که ممکن است ظاهر شود، بدون نوار اسکرول داخلی جا شود.
- فرم جاسازیشده روی موبایل ریسپانسیو به نظر نمیرسد. عرض پیکسلی ثابت برای صفحات کوچک کوچک نمیشود.
width="100%"را در iframe تنظیم کنید و اجازه دهید یک max-width در CSS روی عنصر والد حد بالایی را کنترل کند، تا بهطور طبیعی روی گوشیها کوچک شود. - فرم بهصورت خالی بارگذاری میشود یا خطای «refused to connect» نشان میدهد. این معمولاً یعنی صفحهای که در آن جاسازی شده از طریق شبکه یا پروکسی سیستم مدیریت محتوایی ارائه میشود که iframeهای شخصثالث را مسدود میکند. اگر تنظیمات Content-Security-Policy سایت خود را مستقیماً مدیریت میکنید، آنها را بررسی کنید، زیرا یک قانون محدودکننده
frame-srcمیتواند بهطور بیصدا دامنه گوگل را مسدود کند. - فرم پیام "Loading…" را نشان میدهد و هرگز کامل نمیشود. مطمئن شوید تنظیم اشتراکگذاری فرم اجازه میدهد هر کسی با لینک آن را ببیند — اگر فقط به افراد خاص یا سازمان شما محدود شده باشد، یک iframe جاسازیشده در صفحهای عمومی برای بازدیدکنندگان خارجی همانطور که یک لینک مستقیم شکست میخورد، بارگذاری نخواهد شد.
- ظاهر آن با بقیه صفحه هماهنگ نیست. گوگل فرمز فونتها و رنگهای خودش را درون iframe نمایش میدهد و CSS سایت شما را به ارث نمیبرد — هیچ راه پشتیبانیشدهای برای تغییر ظاهر داخلی فرم از بیرون iframe وجود ندارد، فقط ظرف اطراف آن.
جاسازی و عملکرد بارگذاری صفحه
یک فرم گوگل جاسازیشده محتوای iframe خودش را جدا از بقیه صفحه شما بارگذاری میکند، که یک درخواست شبکه اضافی و تأخیری کوچک پیش از ظاهر شدن خود فرم اضافه میکند — معمولاً بهاندازهای نیست که محسوس باشد، اما اگر در حال بررسی سرعت صفحه هستید، ارزش دانستن دارد. اگر فرم زیر خط تا صفحه قرار دارد، بارگذاری تنبل iframe را در نظر بگیرید (افزودن loading="lazy" به تگ iframe) تا با محتوایی که بازدیدکنندگان فوراً میبینند برای پهنای باند رقابت نکند. این یک ویژگی بومی HTML است که همه مرورگرهای مدرن از آن پشتیبانی میکنند و نیازی به اسکریپت اضافی ندارد.
ملاحظات دسترسیپذیری
از آنجا که محتوای فرم درون iframe خود گوگل قرار دارد، دسترسیپذیری آن — برچسبهای صفحهخوان، ناوبری با صفحهکلید، ترتیب فوکوس — توسط خود گوگل فرمز تعیین میشود نه چیزی که شما در صفحهتان کنترل کنید. تنها چیزی که میتوانید از سمت خود بهبود دهید افزودن یک ویژگی title توصیفی به تگ iframe است (برای مثال، title="Event registration form")، که صفحهخوانها پیش از ورود به محتوای جاسازیشده آن را اعلام میکنند. برای نگاهی گستردهتر به میزان دسترسیپذیری گوگل فرمز بهطور پیشفرض، راهنمای ما درباره دسترسیپذیری گوگل فرمز را ببینید.
جاسازی در برابر فقط لینکدهی به بیرون
جاسازی بازدیدکنندگان را در صفحه شما نگه میدارد، با طراحی اطراف سایت شما همخوانی دارد، و میتواند افت نرخی که هنگام هدایت شدن کسی به دامنهای ناآشنا اتفاق میافتد را کاهش دهد. این انتخاب بهتری برای فرمهای کوتاه قرارگرفته در صفحهای اختصاصی است — مانند یک فرم تماس یا ابزارک بازخورد سریع.
لینکدهی به بیرون راهاندازی سادهتری دارد (نیازی به تنظیم ارتفاع نیست)، چیدمان کامل و نامحدود فرم را ارائه میدهد، و از حس اسکرولکردن درون یک جعبه که فرمهای طولانی یا چندبخشی میتوانند در یک iframe تنگ ایجاد کنند جلوگیری میکند. اگر فرم شما طولانی است، آپلود فایل دارد، یا از سؤالات جدولی استفاده میکند، لینکدهی مستقیم به آن — راهنمای ما درباره اشتراکگذاری فرم گوگل را ببینید — معمولاً تجربه راحتتری برای پاسخدهندگان است.
جاسازی برای یک فرم تماس
جاسازی بهویژه برای تبدیل یک فرم گوگل به فرم تماس رایگان در سایتی تجاری یا نمونهکارها محبوب است — بدون بکاند، بدون راهاندازی سرور ایمیل، و پاسخها مستقیماً در یک شیت گوگل قرار میگیرند که هر زمان میتوانید بررسی کنید. اگر هدف شما دقیقاً همین است، راهنمای اختصاصی ما درباره استفاده از گوگل فرمز بهعنوان فرم تماس وبسایت شما انتخاب فیلدها و تنظیمات کاهش اسپم را که ارزش افزودن روی جاسازی ساده دارند، پوشش میدهد.
سؤالات متداول
چرا فرم گوگل جاسازیشده من بریده شده است؟
کد جاسازی پیشفرض از ارتفاع ثابتی استفاده میکند که میتواند کوتاهتر از فرم واقعی شما باشد. مقدار ارتفاع را در ویژگی style مربوط به iframe افزایش دهید، یا آن را بهاندازه کافی بالاتر از محتوای فرم تنظیم کنید تا چیزی بریده نشود.
بهتر است فرم گوگل را جاسازی کنم یا فقط به آن لینک بدهم؟
جاسازی، بازدیدکنندگان را در سایت شما نگه میدارد و با چیدمان صفحه شما همخوانی دارد، که میتواند نرخ تکمیل را بهبود دهد. لینکدهی به بیرون، تجربه کامل و نامحدود فرم را باز میکند و راهاندازی سادهتری دارد. برای فرمهای کوتاه در صفحهای اختصاصی، جاسازی معمولاً بهتر عمل میکند؛ برای فرمهای طولانی یا پیچیده، لینکدهی به بیرون از اسکرول تنگ درون یک iframe جلوگیری میکند.
آیا میتوانم فرم گوگل را در وردپرس یا اسکوئرسپیس جاسازی کنم؟
بله. کد جاسازی iframe را در یک بلوک Custom HTML در وردپرس، یا یک Code Block در اسکوئرسپیس و ویکس جایگذاری کنید. هر سه پلتفرم از جاسازی HTML خام برای این منظور پشتیبانی میکنند.
چرا فرم گوگل جاسازیشده من یک جعبه خالی نشان میدهد یا از اتصال امتناع میکند؟
این معمولاً به دلیل یک Content-Security-Policy محدودکننده در سایت شما است که iframeهای شخصثالث را مسدود میکند، یا به دلیل اینکه تنظیمات اشتراکگذاری فرم به افراد خاص محدود شده نه هر کسی با لینک. مطمئن شوید فرم با «Anyone with the link» به اشتراک گذاشته شده و هر محدودیت frame-src که سایت یا سیستم مدیریت محتوای شما ممکن است اعمال کند را بررسی کنید.