فرم تماس 7 نسخه روسی. تمام فیلدهای فرم (برچسب ها)

فرم تماس 7
  • تمام فیلدهای فرم (برچسب ها)
  • چگونه یکی از فیلدها را اجباری کنیم: پست یا تلفن
  • فیلدهای مشروط برای افزونه فرم تماس 7
  • فرم تماس 7 افزونه اعتبار سنجی سفارشی

در مقاله قبلی با افزونه فرم تماس ۷ و تنظیمات آن آشنا شدیم. و در اینجا، تمام انواع فیلدهای پشتیبانی شده (برچسب های قالب فرم) و پارامترهای هر یک از آنها و همچنین سبک ها (کلاس های CSS) عناصر فرم به تفصیل مورد بحث قرار خواهند گرفت. این اسناد غیر رسمی برای همه تگ‌های قالب فرم تماس ۷ است.

نوع فیلد نوع عنصر فرم HTML را تعیین می کند: متن، "رادیو"، "انتخاب". نوع فیلد در نام تگ قالب فرم مشخص شده است.

نمونه‌ای از تگ فیلد متنی و کد HTML که خروجی آن است:

همچنین هر تگ (فیلد) گزینه های خاص خود را دارد (ویژگی های برچسب). گزینه های برچسب بعد از عنوان و نام فیلد مشخص می شوند. به عنوان مثال، بیایید یک ویژگی کلاس برای فیلد متن قبلی اضافه کنیم:

نحو تگ قالب فرم (فیلد):

ویژگی های (فیلد) را تگ کنید

شما می توانید از همان ویژگی ها (گزینه ها) در تگ های فرم های مختلف استفاده کنید. بنابراین برای اینکه توضیح هر صفت برای هر فیلد فرم تکرار نشود، توضیحات آنها را در قسمتی جداگانه قرار می دهیم.

ویژگی هایی که فقط می توانند برای یک تگ فرم خاص اعمال شوند، به طور جداگانه برای هر تگ فهرست می شوند.

* بلافاصله بعد از نوع فیلد، فیلد را اجباری می کند.
مثال: شناسه (خط)نام شناسه شناسه ویژگی css که برای طراحی فیلد استفاده می شود.
مثال: id:foo class (خط)نام کلاس. ویژگی کلاس css که برای طراحی فیلد استفاده می شود.
مثال: class:bar
شما می توانید چندین کلاس را مشخص کنید: minlength و maxlength (عدد)

اینها ویژگی های HTML5 هستند که ورودی کاراکترها را در یک فیلد، هم با یک آستانه پایین (حداقل) و هم یک آستانه بالا (حداکثر) محدود می کنند. کاربر نمی تواند نویسه های کمتر (minlength) یا نویسه های بیشتر (maxlength) را در فیلد وارد کند که توسط این مقادیر مشخص شده است.

برای minlength، اگر متن وارد شده کمتر از این مقدار باشد، کاربر اخطار "فیلد خیلی کوتاه است" دریافت می کند. و بالعکس برای حداکثر طول.

مثال ها:
حداقل طول: 10 -
حداکثر طول: 90 -
هر دو در یک زمان -

در نتیجه یک فیلد متنی دریافت می کنیم که اخطار می دهد و اگر کمتر از 10 یا بیشتر از 140 کاراکتر در آن وارد شود نامه ارسال نمی شود.

این پارامترها از انواع فیلدهای زیر پشتیبانی می کنند: متن، متن، ایمیل، آدرس اینترنتی، تلفن، مسابقه.

یک ورودی قدیمی برای این پارامترها وجود دارد:

پارامتر maxlength به صراحت اولویت دارد، بنابراین اگر maxlength:150 را اضافه کنید، 140 به 150 بازنویسی می شود.

اندازه (عدد)عرض فیلد متنی که با تعداد کاراکترهای یک فونت monospace تعیین می شود. می توان در سبک های CSS با استفاده از ویژگی width لغو شد.
مثال: اندازه: 50 -
پیش‌فرض: 40 پیش‌فرض (رشته/عدد)

مقدار فیلد پیش فرض

مثال: پیش‌فرض: مقدار.

اگر کاربری که فرم را پر می کند مجاز است، به طور پیش فرض می توانید مقدار گرفته شده از داده های نمایه او را جایگزین کنید. به عنوان مثال، اگر ویژگی default:user_email - را مشخص کنید، فیلد به طور خودکار با مقدار - "ایمیل کاربر فعلی" که در حال مشاهده فرم است پر می شود...

سایر فیلدهای ویژه ویژگی پیش فرض:

    پیش فرض:post_meta- مقدار متافیلدی که کلید آن برابر با نام فیلد خواهد بود را دریافت می کند. به عنوان مثال: فیلد فرمی را نمایش می دهد که مقدار آن با مقدار post metafield mymeta_key تنظیم می شود

    پیش فرض: دریافت- مقدار پارامتر GET را با کلید برابر با نام فیلد تنظیم می کند: - http://example.com/?mykey=value

    پیش فرض: ارسال- مقدار پارامتر POST را با کلید برابر با نام فیلد تنظیم می کند: - در POST داده mykey=value را ارسال می کنیم.

    پیش فرض: shortcode_attr- مقدار ویژگی shortcode را با کلید برابر با نام فیلد تنظیم می کند. به عنوان مثال، تگ قالب فرم عبارت است از:، سپس در شورت کد خود فرم، هنگام فراخوانی در محتوای پست، ویژگی mykey را مشخص می کنیم: . ادامه مطلب را در زیر بخوانید.

    همچنین، باید نام ویژگی کد کوتاه وردپرس را به لیست سفید اضافه کنید (زیرا وردپرس تمام ویژگی‌های کد کوتاه ناشناخته را حذف می‌کند...). این کار از طریق فیلتر انجام می شود:

    Add_filter("shortcode_atts_wpcf7"، "my_shortcode_atts_wpcf7"، 10, 3); تابع my_shortcode_atts_wpcf7($out، $pairs، $atts)( if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]؛ بازگشت $out؛ )

برای چک باکس، رادیو و انتخاب کنید:

  • پیش فرض: عدد - پیش فرض: 2- عنصر دوم لیست را انتخاب می کند...
  • پیش فرض: number_number - پیش فرض: 2_3- عنصر دوم و سوم لیست (برای چند انتخاب و چک باکس) را انتخاب می کند...

بیشتر بخوانید در مورد پیش فرضو گزینه های آن را در انتهای مقاله بخوانید.

مکان یا واترمارک (خط)

متنی که در ویژگی placeholder نشان داده خواهد شد.

این گزینه باید در انتهای همه گزینه های برچسب الگو استفاده شود: و نه

می تواند به کار رود واترمارکبه جای مکان نگهدار، این مترادف (نام مستعار) ویژگی است.

Akismet (خط)

حفاظت از هرزنامه نیاز به نصب و فعال سازی افزونه Akismet دارد.

  • akismet:نویسنده -
  • akismet:author_email -
  • akismet:author_url -

چگونه کار می کند؟ هنگام ارسال داده ها، مقادیر فیلدهای مشخص شده در سرور akismet پردازش می شود و در صورت عدم موفقیت، نامه ارسال نمی شود و کاربر خطا را مشاهده می کند:

وقتی روی هر یک از فیلدها تمرکز کنید، پیام ناپدید می شود.

تگ های قالب فرم (فیلدها)

در زیر تمام تگ های افزونه ای که می توانید در قالب فرم خود استفاده کنید آمده است. این تگ ها به ورودی HTML، ناحیه متنی و عناصر انتخابی تبدیل می شوند.

فیلدهای متنی شامل انواع زیر است: متن، ایمیل، آدرس اینترنتی، تلفن، ناحیه متنی و تگ شمارش ارتباط نزدیکی با فیلدهای متنی دارد.

دو نوع فیلد عددی وجود دارد: عدد و محدوده. اینها فیلدهای HTML5 هستند، بنابراین مرورگرهای قدیمی از آنها پشتیبانی نمی کنند و در عوض یک فیلد متنی را نمایش می دهند.

متن

فیلد متنی یک خطی

گزینه های پشتیبانی شده (ویژگی ها):

  • کلاس
  • Minlengthو بیشترین طول
  • اندازه
  • نگهدارنده مکان
  • پیش فرض- می توانید از: user_login، user_first_name، user_last_name، user_nickname، user_display_name استفاده کنید
  • akismet:نویسنده

پست الکترونیک

فیلد برای وارد کردن ایمیل در نظر گرفته شده است.

ویژگی های پشتیبانی شده:

  • کلاس
  • Minlengthو بیشترین طول
  • اندازه
  • نگهدارنده مکان
  • akismet:author_email
  • پیش فرض:user_emailیا پیش فرض: [email protected]

آدرس اینترنتی

فیلد برای وارد کردن آدرس اینترنتی (URL).

ویژگی های پشتیبانی شده:

  • کلاس
  • Minlengthو بیشترین طول
  • اندازه
  • نگهدارنده مکان
  • akismet:author_url
  • پیش فرض:user_urlیا مقدار پیش فرض

تلفن

فیلد برای وارد کردن شماره تلفن.

ویژگی های پشتیبانی شده:

  • کلاس
  • Minlengthو بیشترین طول
  • اندازه
  • نگهدارنده مکان

ناحیه متنی

فیلد برای وارد کردن متن چند خطی.

ویژگی های پشتیبانی شده:

  • کلاس
  • Minlengthو بیشترین طول
  • نگهدارنده مکان
  • (cols)x (ردیف)- که در آن cols عرض فیلد بر حسب کاراکتر و ردیف ها ارتفاع فیلد در خطوط متن است. دارای 3 فرمت: (cols)x(rows)، (cols)x و x(rows).

برای textarea، مقدار فیلد را می توان به دو صورت تعیین کرد:

  1. متن پیش فرض...

اگر ناحیه متنی حاوی تگ های html باشد، پس از ارسال فرم ممکن است یک خطای سرور 500 دریافت کنید!

شمارش (شمارشمار کاراکتر)

تگ count به شما امکان می دهد زمانی که می خواهید به کاربر نشان دهید چند کاراکتر وارد شده است یا چند کاراکتر تا حداکثر مقدار باقی مانده است (اگر پارامتر حداکثر طول باشد) یک شمارنده تنظیم کنید.

برای فعال کردن شمارنده، باید یک تگ شمارنده را در قالب فرم وارد کنید که نام فیلد متنی را که برای آن کاراکترها شمارش می‌کند، نشان دهد.

تگ شمارنده را می توان در هر جایی از قالب فرم استفاده کرد.

به عنوان مثال، ما یک فیلد متنی برای یک پیام داریم:

سپس این کار را انجام می دهیم:

این فیلد به حداقل 10 و حداکثر 140 کاراکتر محدود شده است. در این حالت شمارنده نشان می دهد که چند کاراکتر وارد شده است.

گاهی اوقات نشان دادن تعداد کاراکترهای باقی مانده برای وارد کردن راحت تر است، زیرا کاربر از حداکثر محدودیت اطلاعی ندارد. برای این کار باید گزینه down - را در تگ مشخص کنید.

عدد

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

از ویژگی ها پشتیبانی می کند:

  • کلاس
  • نگهدارنده مکان
  • دقیقه
  • حداکثر

دامنه

لغزنده برای انتخاب اعداد در محدوده مشخص شده.

از ویژگی ها پشتیبانی می کند:

  • کلاس
  • نگهدارنده مکان- فقط در مرورگرهایی نمایش داده می شوند که از این نوع فیلد پشتیبانی نمی کنند و به جای آن یک فیلد متنی نمایش می دهند.
  • دقیقه- مقدار کمتر را برای وارد کردن یک عدد تنظیم می کند: min:20
  • حداکثر- مقدار بالایی را برای وارد کردن یک عدد تنظیم می کند: min:100
  • گام- مرحله تغییر شماره را برای لغزنده ها و فیلدهای ورودی اعداد تنظیم می کند: min:5

چک باکس و رادیو

  • دکمه های رادیویی- اینها سوئیچ هایی هستند که به شما امکان می دهند از بین چندین گزینه فقط یک گزینه را انتخاب کنید.
  • چک باکس ها- اینها چک باکس هایی هستند که به شما امکان می دهند چندین گزینه را همزمان انتخاب کنید.

ویژگی های پشتیبانی شده:

  • پیش فرض- مقدار پیش فرض فیلد به عنوان مثال default:2 به این معنی است که وقتی فیلد نمایش داده می شود گزینه دوم پاسخ از قبل انتخاب شده است. برای چک باکس ها می توانید چندین مقدار را مانند این پیش فرض تعیین کنید: 1_2_3

    first_as_label- به طور پیش فرض، ابتدا چک باکس (دکمه رادیویی) و سپس کتیبه (او) می آید. با گذراندن این پارامتر، آنها را تعویض خواهید کرد.

    use_label_element- یک چک باکس یا دکمه رادیویی را در یک برچسب قرار می دهد که به شما امکان می دهد یک عنصر را با کلیک بر روی نام آن انتخاب کنید.

    انحصاری- با تعیین این پارامتر فقط 1 عنصر را می توان از چک باکس انتخاب کرد. این قابلیت مبتنی بر جاوا اسکریپت است. دکمه های رادیویی به دلیل ماهیت خاص خود از این گزینه پشتیبانی نمی کنند.

    متن آزاد- به شما امکان می دهد یک فیلد متنی را به آخرین عنصر اضافه کنید. هنگامی که آخرین عنصر انتخاب شود و کاربر بتواند پاسخ خود را تکمیل کند، برای تکمیل در دسترس می شود.

  • داده ها- مقداری را از برگه ای با کشورهای جهان به عنوان مثال data:countries دریافت می کند.

چین هند سن مارینو

انتخاب کنید

به شما امکان می دهد گزینه های پاسخ را از یک لیست کشویی انتخاب کنید. به دو صورت قابل استفاده است:

ویژگی های:

  • کلاس
  • پیش فرض- پیش فرض: 2 یا پیش فرض: 2_3_4
  • چندگانه- به شما امکان می دهد چندین گزینه پاسخ را انتخاب کنید
  • شامل_خالی- خط "- - -" را به عنوان اولین گزینه پاسخ اضافه کنید
  • first_as_label
  • داده ها
  • موارد- گزینه های پاسخ

تاریخ

فیلد برای انتخاب تاریخ تقویم. این یک نوع HTML5 است و توسط مرورگرهای قدیمی پشتیبانی نمی شود.

ویژگی های:

  • کلاس
  • نگهدارنده مکان
  • دقیقه- مقدار کمتر تاریخ ممکن، به عنوان مثال min:2016-01-01 . قالب تاریخ نسبی پشتیبانی می شود، به عنوان مثال امروز + 10 روز، امروز - 2 هفته و غیره.
  • حداکثر- مقدار بالای یک تاریخ ممکن، به عنوان مثال min:2017-01-01 . فرمت تاریخ نسبی پشتیبانی می شود، درست مانند دقیقه.
  • گام- مرحله تغییر تاریخ به روز، به عنوان مثال مرحله: 3. اگر مقدار پایین 2016-01-01 و مرحله 3 باشد، در مرحله بعدی تاریخ 2016-01-04 و غیره نمایش داده می شود.

هنگامی که یک برچسب را در یک الگوی نامه درج می کنید، تاریخ را در نامه به فرمت YYYY-MM-DD (2016-12-25) دریافت خواهید کرد - این مشخص نیست. بنابراین، می‌توانید یک الگوی بصری‌تر مشخص کنید؛ برای این کار، از ساختار [_format_(نام فیلد) «(قالب تاریخ)»] استفاده کنید.

[_format_your-date "D, d M y"]

reCAPTCHA (محافظت از هرزنامه)

فرم تماس 7، با شروع از نسخه 4.3، در ارتباط با سرویس reCAPTCHA، به شما امکان می دهد با هرزنامه ها مبارزه کنید. برای استفاده از reCAPTCHA باید یک حساب Google داشته باشید، جایی که می توانید کلیدهای استفاده از سرویس API را دریافت کنید.

برای دریافت این کلیدها نیاز دارید:

  1. رفتن به پنل مدیریت reCAPTCHA.
  2. ثبت سایت
  3. یک کلید سایت و یک کلید مخفی دریافت کنید (اینها دو کلید متفاوت هستند: یک کلید سایت می تواند وجود داشته باشد، اما کلیدهای مخفی زیادی وجود دارد).

ویژگی های:

  • کلاس
  • موضوع- طرح رنگ ویجت. می تواند تیره یا روشن (پیش فرض) باشد.
  • اندازه- اندازه ویجت می تواند فشرده (فشرده) یا معمولی (پیش فرض) باشد.

حالا در قالب فرم از تگ استفاده کنید.

آزمون (پرسش و پاسخ)

در این قسمت از کاربر سوالی پرسیده می شود و باید به آن پاسخ دهد در غیر این صورت نامه ارسال نخواهد شد. این فیلد زمانی ظاهر شد که با استفاده از حروف کپچا با هرزنامه مبارزه شد (هنوز هیچ reCAPTCHA وجود نداشت). استفاده از حروف کپچا محدودیت هایی را هم بر روی سرور (کتابخانه های گرافیکی مورد نیاز) و هم برای شخص (خطاهای درک بصری) اعمال کرد. این روش این نواقص را برطرف کرد.

ویژگی های:

  • کلاس
  • اندازه- اندازه و طول میدان ممکن است یکی از مقادیر حذف شود.

مثال نشان می دهد که پرسش و پاسخ با علامت | از هم جدا شده اند . پرسش و پاسخ را می توان به هر شکلی نوشت، به عنوان مثال ریاضی:

می‌توانید چندین جفت پرسش و پاسخ را مشخص کنید؛ هر بار که فرم نمایش داده می‌شود، سؤال به‌طور تصادفی انتخاب می‌شود:

برای این فیلد می توانید پارامترهای minlength و maxlength را مشخص کنید:

هنگام ایجاد یک برچسب مسابقه با چندین سوال با استفاده از یک ژنراتور، هر جفت سوال و پاسخ را در یک خط جدید بنویسید.

پنهان شده است

فیلد پنهان - برای کاربر قابل مشاهده نیست. می تواند اطلاعات ارزشمند را ذخیره کند. اطلاعات را می توان با استفاده از جاوا اسکریپت اضافه کرد یا با استفاده از گزینه پیش فرض ایجاد کرد.

ویژگی های:

  • کلاس
  • پیش فرض- می توانید پارامتری را در اینجا ارسال کنید که طبق یک قانون خاص تبدیل می شود. در توضیحات ویژگی (گزینه های ابتدای مقاله) بیشتر بخوانید.

ارسال

دکمه ارسال اطلاعات فرم (ارسال). وقتی روی این دکمه کلیک می کنید، تمام داده های فرم به سرور ارسال می شود.

ویژگی های:

  • کلاس

می توانید متن دکمه را مشخص کنید:

نمونه ای از استفاده از تمام پارامترهای پشتیبانی شده:

آژاکس لودر

لطفا توجه داشته باشید که برچسب که در آن آیکون دانلود بارگذاری می شود اگر روی ارسال فرم کلیک کنید به همراه دکمه ارسال یا بهتر است بگوییم بعد از آن اضافه می شود.

بنابراین، برای مثال، اگر برچسب را با یک دکمه HTML آماده جایگزین کنید. گاهی اوقات زمانی که چیدمان دکمه مناسب نیست به این کار نیاز است. به عنوان مثال، اگر می خواهید دکمه ارسال به شکل زیر باشد: