در گرویتی فرم، تنظیم الگو (Pattern) برای فیلد شماره موبایل یکی از چالشهای رایج کاربران ایرانی است. دلیل اصلی این مشکل، عدم پشتیبانی پیشفرض گرویتی فرم از فرمت شمارههای ایرانی، تنوع روش وارد کردن شماره (با صفر، بدون صفر، با کد کشور یا با اعداد فارسی) و نبود قابلیت اعتبارسنجی پیشرفته در نسخه پایه افزونه است.
در این مقاله یاد میگیرید چگونه با استفاده از regex، فیلد متنی و یک اسکریپت ساده جاوااسکریپت، شماره موبایل را بهدرستی اعتبارسنجی و بهصورت استاندارد ذخیره کنید.
فیلد شماره موبایل یکی از مهمترین فیلدهای هر فرم آنلاین است که برای دریافت شماره تماس کاربران استفاده میشود. این فیلد باید از ورود کاراکترهای نامعتبر جلوگیری کند و فقط شمارههایی با ساختار صحیح را بپذیرد.
در فرمسازهای وردپرس مانند گرویتی فرم (Gravity Forms)، تعریف صحیح این فیلد نقش کلیدی در دریافت اطلاعات معتبر دارد.
یکی از چالشهای کاربران ایرانی در گرویتی فرم، عدم پشتیبانی پیشفرض از فرمت شماره موبایل ایران است. بهطور پیشفرض، گرویتی فرم برای شمارههای آمریکایی یا کانادایی بهینهسازی شده، و شمارههایی مثل 0912xxxxxxx را بهدرستی اعتبارسنجی نمیکند.
در ادامه ۲ روش برای رفع مشکل ثبت شماره موبایل های ایران در فیلد شماره گرویتی فرم را به شما آموزش میدهیم…
گرویتی فرم قابلیتی با نام ماسک ورودی (Input Mask) در فیلدهای متنی ارائه میدهد؛ این روش بدون کد نویسی بوده و با تغییر در تنظیمات گرویتی فرمز انجام میشود:
۱. یک فیلد متن تکخطی به فرم اضافه کنید.
۲. در تب «عمومی»، گزینه ماسک ورودی را فعال کنید.
۳. گزینه «ویژه» را انتخاب کنید.
۴. در فیلد نمایشدادهشده، الگوی زیر را وارد کنید:
99999999999
این الگو شمارهای با ۱۱ رقم را میپذیرد، که با شماره موبایل ایرانی مطابق است.
| نماد | کاربرد | مثال |
|---|---|---|
| 9 | عدد اجباری | 99999999999 ← برای شماره موبایل مثل 09121234567 |
| a | حروف الفبا | aaa-aaa ← برای کد فعالسازی متنی |
| * | عدد یا حرف | ***-*** ← ترکیبی از حروف و اعداد |
| ? | کاراکتر اختیاری | 99999?-9999 ← هم 23462 و هم 23462-4062 قابل قبول است |
توضیح بیشتر جدول قوانین ساخت ماسک برای فیلد شماره موبایل در گرویتی فرم:
برای کنترل دقیقتر روی صحت شماره موبایل، میتوانید از الگوی regex در یک فیلد متن استفاده کنید. این روش برای کاربران حرفه ای تر که با کدنویسی آشنایی دارند پشنهاد میشود.
۱. افزودن یک فیلد متن (Text) از نوع تکخطی.
۲. فعالسازی گزینه Pattern و وارد کردن الگو:
pattern="^09\d{9}$"
title="شماره موبایل باید با 09 شروع شده و ۱۱ رقم باشد"
۳. افزودن اسکریپت جاوااسکریپت برای تبدیل اعداد فارسی به انگلیسی:
نکته: حتماً input_1 را با name یا id دقیق فیلد شماره موبایل در فرمتان جایگزین کنید.
<script>
document.addEventListener('DOMContentLoaded', function () {
const mobileField = document.querySelector('input[name="input_1"]'); // جایگزین کن با ID فیلد خودت
if (mobileField) {
mobileField.addEventListener('input', function () {
this.value = this.value.replace(/[۰-۹]/g, d => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d));
});
}
});
</script>
شما باید کد زیر را در همان صفحهای قرار دهید که فرم گرویتی نمایش داده میشود. برای این کار، سادهترین روش این است:
۱ . به صفحهای که فرم شما در آن قرار دارد (مثلاً «تماس با ما» یا «ثبتنام») بروید.
۲. در انتهای فرم یا پایین صفحه، یک بلوک HTML (در گوتنبرگ یا المنتور) اضافه کنید.
۳. کد جاوا اسکریپت بالا را در آن قرار دهید.