نحوه اضافه کردن محتوای HTML سفارشی در فرم‌های وردپرس

فرم‌ها فقط فیلدهای ورودی نیستند. گاهی اوقات شما نیاز دارید چیزی را توضیح دهید، بخش‌ها را تقسیم کنید، یک تصویر نشان دهید یا بین سوالات متن اضافه کنید. محتوای HTML سفارشی، فرم‌های استاتیک را به تجربیات هدایت‌شده تبدیل می‌کند. در اینجا نحوه اضافه کردن محتوای غنی به فرم‌های وردپرس شما آورده شده است.

بلوک HTML چیست؟

تعریف

بلوک HTML یک عنصر فرم ویژه است که محتوا را بدون دریافت ورودی نمایش می‌دهد. این بلوک HTML را بین فیلدهای فرم شما رندر می‌کند و به شما امکان می‌دهد متن، تصاویر، ویدیوها، جداکننده‌ها و موارد دیگر را اضافه کنید.

بلوک HTML در مقابل فیلدهای معمولی

چرا از بلوک‌های HTML استفاده کنیم؟

۱. دستورالعمل‌ها و راهنمایی‌ها

به کاربران کمک کنید تا بفهمند چه کاری باید انجام دهند:

• توضیح سوالات پیچیده
• زمینه را فراهم کنید
• الزامات فهرست
• بخش‌ها را راهنمایی کنید

۲. سازماندهی بصری

فرم‌های طولانی را بشکنید:

• سرفصل‌های بخش
• جداکننده‌های افقی
• جداکننده‌های بصری
• محتوای گروه‌بندی‌شده

۳. رسانه‌های غنی

اضافه کردن عناصر بصری:

• تصاویر و آیکون‌ها
• ویدیوهای جاسازی شده
• اینفوگرافیک
• نمودارها

4. حقوقی و انطباق

نمایش اطلاعات مهم:

• متن شرایط و ضوابط
• اعلامیه های حفظ حریم خصوصی
• تکذیبنامهها
• افشای اطلاعات مورد نیاز

5 نام تجاری

برند خود را تقویت کنید:

• آرم
• رنگ های برند
• یک ظاهر طراحی شده سفارشی
• ظاهر ثابت

اضافه کردن یک بلوک HTML

مرحله ۱: اضافه کردن فیلد

1. فرم خود را در A.F.B.
2. پیدا کردن HTML بلاک در فهرست فیلدها
3. آن را به موقعیت دلخواه در فرم خود بکشید

مرحله 2: محتوای خود را اضافه کنید

1. برای انتخاب آن، روی بلوک HTML کلیک کنید.
2. پنل تنظیمات را باز کنید
3. محتوای HTML خود را وارد کنید
4. پیش‌نمایش برای تأیید ظاهر

مرحله ۳: موقعیت و سبک

1. در صورت نیاز برای مرتب سازی مجدد بکشید
2. اضافه کردن استایل‌ها یا کلاس‌های درون‌خطی
3. تست روی فرانت‌اند

کاربردهای رایج بلوک‌های HTML

۱. سرفصل‌های بخش

اطلاعات شخصی لطفا اطلاعات تماس خود را در زیر وارد کنید.

یافته ها:

اطلاعات شخصی
لطفا اطلاعات تماس خود را در زیر ارائه دهید.

۲. جداکننده افقی

یافته ها: یک خط تمیز که بخش‌ها را از هم جدا می‌کند.

۳. جعبه دستورالعمل

 مهم: لطفاً قبل از ادامه، شماره سفارش خود را آماده داشته باشید.

۴. دستورالعمل‌های نقطه‌گذاری شده

قبل از ارسال، لطفاً اطمینان حاصل کنید: تمام فیلدهای مورد نیاز تکمیل شده است آدرس ایمیل شما صحیح است شما شرایط زیر را مرور کرده‌اید

5. تصویر

۶. ویدئوی جاسازی‌شده

۷. جعبه هشدار/هشدار

 ⚠️ هشدار: مطالب ارسالی پس از ارسال قابل ویرایش نیستند.

۸. جعبه موفقیت/اطلاعات

 ✓ پیشرفت شما به طور خودکار ذخیره می‌شود.

۹. اطلاعیه حریم خصوصی

اطلاعات شما تحت سیاست حفظ حریم خصوصی ما محافظت می‌شود. ما هرگز داده‌های شما را با اشخاص ثالث به اشتراک نمی‌گذاریم.

۱۰. خلاصه شرایط و ضوابط

 شرایط خدمات با ارسال این فرم، شما موافقت می‌کنید که...

نمونه‌هایی از طرح‌بندی فرم

فرم چند بخشی

[بلوک HTML: بخش ۱ - عنوان اطلاعات شخصی] فیلد نام فیلد ایمیل فیلد تلفن [بلوک HTML: جداکننده] [بلوک HTML: بخش ۲ - عنوان جزئیات پروژه] منوی کشویی نوع پروژه توضیحات textarea فیلد بودجه [بلوک HTML: جداکننده] [بلوک HTML: بخش ۳ - عنوان مراحل نهایی] آپلود فایل کادر انتخاب شرایط دکمه ارسال

فرم آموزشی

[بلوک HTML: پیام خوشامدگویی و دستورالعمل‌ها] [بلوک HTML: نشانگر مرحله ۱] سوال ۱ سوال ۲ [بلوک HTML: نشانگر مرحله ۲] سوال ۳ سوال ۴ [بلوک HTML: یادآوری بررسی] دکمه ارسال

فرم ثبت نام

[بلوک HTML: لوگوی شرکت] [بلوک HTML: عنوان و توضیحات موقعیت شغلی] فیلد نام فیلد ایمیل [بلوک HTML: دستورالعمل "بارگذاری رزومه" به همراه الزامات قالب] فیلد بارگذاری فایل [بلوک HTML: بیانیه فرصت برابر] دکمه ارسال

استایل‌دهی به بلوک‌های HTML

سبک های درون خطی

اضافه کردن استایل‌ها به طور مستقیم به عناصر:

محتوای استایل‌دار شما اینجا قرار می‌گیرد.

ویژگی‌های سبک رایج

پس‌زمینه: background: #f5f5f5; padding: padding: 15px; Margin: margin: 20px 0; Border: border: 1px solid #ddd; شعاع حاشیه: border-radius: 5px; اندازه فونت: font-size: 14px; رنگ: color: #333; تراز متن: text-align: center;

ایجاد جعبه‌های استایل‌دار

جعبه اطلاعات (آبی):

 ℹ️ پیام اطلاع‌رسانی اینجا

جعبه موفقیت (سبز):

 ✓ پیام موفقیت در اینجا

کادر هشدار (زرد):

 ⚠️ پیام هشدار اینجا

کادر خطا (قرمز):

 ✕ خطا یا هشدار مهم اینجا

نکات طراحی واکنش‌گرا

تصاویر

همیشه برای تصاویر واکنش‌گرا از max-width استفاده کنید:

فیلم های

از بسته‌بندی واکنش‌گرا برای ویدیوهای جاسازی‌شده استفاده کنید:

خوانایی متن

• از اندازه‌های نسبی فونت (em، rem) استفاده کنید
• طول خطوط را خوانا نگه دارید
• حاشیه مناسب در موبایل

بهترین روش

1. آن را مختصر نگه دارید

• متن کوتاه و قابل اسکن
• نکات مهم بالای پاراگراف‌ها
• فقط اطلاعات ضروری

2. سلسله مراتب بصری

• عنوان‌ها را پاک کنید
• یک ظاهر طراحی شده مداوم
• جریان منطقی

3. دسترسی

• متن جایگزین برای تصاویر
• کنتراست رنگی کافی
• HTML معنایی (h2، h3، p، ul)
• برای معنی فقط به رنگ تکیه نکنید

4. بیش از حد مصرف نکنید

• محتوای زیاد باعث سردرگمی می‌شود
• تعادل محتوا با فیلدهای ورودی
• هدف برای هر بلوک HTML

5. به طور کامل تست کنید

• پیش‌نمایش در دسکتاپ و موبایل
• بررسی کنید که همه لینک‌ها کار کنند
• بارگذاری تصاویر را تأیید کنید
• در مرورگرهای مختلف تست کنید

ایده‌های پیشرفته بلوک HTML

شاخص پیشرفت

۱  ۲  ۳ مرحله ۲ از ۳: جزئیات پروژه

طرح دو ستونی

گزینه الف شرح گزینه الف... گزینه ب توضیحات گزینه ب...

بخش تاشو (جزئیات/خلاصه)

برای خواندن شرایط کامل کلیک کنید متن کامل شرایط و ضوابط در اینجا ...

فهرست نمادها

✓ ارسال رایگان برای سفارش‌های بالای ۵۰ دلار ✓ ضمانت بازگشت وجه تا 30 روز ✓ پشتیبانی مشتری ۲۴ ساعته

شمارش معکوس/فوریت

 🔥 پیشنهاد ویژه با مدت محدود - برای واجد شرایط بودن، تا جمعه ارسال کنید!

ملاحظات امنیتی

چه چیزی امن است؟

• تگ‌های استاندارد HTML (p، div، h1-h6، ul، li و غیره)
• سبک‌های درون‌خطی
• تصاویر از منابع معتبر
• ویدیوهای جاسازی‌شده از پلتفرم‌های اصلی

چه چیزی باید اجتناب شود

• جاوا اسکریپت در بلوک‌های HTML (ممکن است حذف شود)
• اسکریپت‌های خارجی
• منابع iframe غیرقابل اعتماد
• عناصر فرم درون بلوک‌های HTML

نکته‌ای در مورد محدودیت‌های اسکریپت

بیشتر سازندگان فرم، HTML را برای جلوگیری از حملات XSS پاکسازی می‌کنند. جاوا اسکریپت و برخی تگ‌های خاص ممکن است به دلایل امنیتی به طور خودکار حذف شوند.

عیب یابی

رندر نشدن HTML

• بررسی خطاهای نحوی
• تأیید کنید که برچسب‌ها به درستی بسته شده‌اند
• ممکن است برخی از برچسب‌ها محدود شوند

استایل اعمال نشده است

• بررسی سینتکس استایل درون‌خطی
• CSS قالب ممکن است نادیده گرفته شود
• از سبک‌های خاص‌تر یا !important استفاده کنید

تصاویر نمایش داده نمی‌شوند

• تأیید کنید که آدرس تصویر درست است
• بررسی مجوزهای تصویر
• از آدرس کامل اینترنتی (https://…) استفاده کنید

اختلال در طرح‌بندی در موبایل

• اضافه کردن حداکثر عرض: ۱۰۰٪ به تصاویر
• از طرح‌بندی‌های انعطاف‌پذیر (flexbox) استفاده کنید
• روی دستگاه موبایل واقعی تست کنید

خلاصه

افزودن محتوای HTML سفارشی به فرم‌ها:

1. اضافه کردن بلوک HTML - به فرم خود بکشید
2. محتوا را وارد کنید – HTML در پنل تنظیمات
3. موقعیت مناسب – بین فیلدهای مرتبط
4. در صورت نیاز استایل دهید – استایل‌ها یا کلاس‌های درون‌خطی
5. در دسترس نگه دارید متن جایگزین، کنتراست، HTML معنایی
6. تست واکنش‌گرا – دسکتاپ و موبایل

نتیجه

بلوک‌های HTML فرم‌ها را از پرسشنامه‌های ساده به تجربیات هدایت‌شده تبدیل می‌کنند. در صورت نیاز کاربران، زمینه را اضافه کنید، فرم‌های طولانی را به بخش‌های منطقی سازماندهی کنید و رسانه‌های غنی را برای تعامل و اطلاع‌رسانی در نظر بگیرید. چه عنوان بخش، کادر دستورالعمل یا ویدیوی جاسازی‌شده باشد، محتوای HTML سفارشی فرم‌های شما را مؤثرتر و کاربرپسندتر می‌کند.

سازنده فرم خودکار شامل نوع فیلد HTML Block است که به شما امکان می‌دهد هر محتوای HTML را بین فیلدهای فرم خود اضافه کنید. فرم‌های حرفه‌ای و آموزنده‌ای ایجاد کنید که کاربران را در فرآیند ارسال راهنمایی کند.

آماده‌اید تا فرم‌هایتان را بهبود ببخشید؟ دانلود فرم ساز خودکار و از همین امروز شروع به اضافه کردن محتوای سفارشی کنید.