ساخت فرم ورود و ثبت‌نام پاپ‌آپ در وردپرس با Popup Maker

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

توی این آموزش از Popup Maker برای ساخت پنجره پاپ‌آپ استفاده می‌کنیم. البته Popup Maker خودش حساب کاربری یا فرم ورود نمی‌سازه و فقط فرم آماده وردپرس یا یک افزونه فرم‌ساز رو داخل پاپ‌آپ نشون می‌ده. برای نمونه، می‌تونید امکانات ورود و ثبت‌نام Forminator رو با نسخه فعلی وردپرس و PHP سایتتون بررسی کنید. قابلیت‌هایی مثل ثبت‌نام، بازیابی رمز، تأیید ایمیل و تغییر مسیر ممکنه با توجه به نسخه افزونه فرق کنن.

ساخت فرم ورود پاپ‌آپ در وردپرس چه کاربردی داره؟

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

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

قبل از ساخت فرم ورود پاپ‌آپ چه چیزهایی لازم دارید؟

فعال بودن ثبت‌نام کاربران در وردپرس

اگه می‌خواید بازدیدکننده‌ها خودشون حساب بسازن، از پیشخوان به «تنظیمات ← عمومی» برید و گزینه «هر کسی می‌تواند نام‌نویسی کند» رو فعال کنید. اگه فقط مدیر سایت برای کاربران حساب می‌سازه، نیازی نیست این گزینه فعال باشه.

انتخاب نقش پیش‌فرض برای کاربران تازه

توی همون صفحه، «نقش پیش‌فرض کاربر تازه» رو روی «مشترک» بذارید؛ مگر اینکه افزونه فروشگاهی یا عضویتی سایتتون به نقش کم‌دسترسی دیگه‌ای نیاز داشته باشه. نقش کاربری همون مجموعه اجازه‌هاییه که هر حساب داخل سایت داره. هیچ‌وقت مدیرکل، ویرایشگر یا نویسنده رو به‌عنوان نقش ثبت‌نام عمومی انتخاب نکنید.

تهیه نسخه پشتیبان و آزمایش در محیط امن

قبل از نصب افزونه‌ها، از فایل‌ها و پایگاه داده سایت نسخه پشتیبان بگیرید. بهتره تنظیمات رو اول روی نسخه آزمایشی سایت انجام بدید. نسخه آزمایشی یا Staging یک کپی خصوصی از سایتتونه و تغییراتش برای بازدیدکننده‌های سایت اصلی نمایش داده نمی‌شه.

انتخاب افزونه مناسب برای فرم ورود پاپ‌آپ

افزونه مناسب باید چه امکاناتی داشته باشه؟

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

توی این روش، افزونه فرم‌ساز وظیفه ساخت و پردازش فرم رو به عهده داره و Popup Maker فرم رو داخل پنجره پاپ‌آپ نشون می‌ده. جدا بودن این دو بخش باعث می‌شه بتونید فرم رو بیرون از پاپ‌آپ هم به کار ببرید. قبل از انتخاب Forminator یا هر افزونه دیگه‌ای، مطمئن بشید نسخه‌ای که نصب می‌کنید واقعاً ورود و ثبت‌نام کاربران وردپرس رو پردازش می‌کنه. برای دیدن گزینه‌های بیشتر هم می‌تونید معرفی بهترین افزونه‌های پاپ‌آپ وردپرس رو بخونید.

چطور از امن و به‌روز بودن افزونه مطمئن بشید؟

• تاریخ آخرین به‌روزرسانی و نسخه‌های سازگار رو توی صفحه رسمی افزونه ببینید.
• بخش پشتیبانی و مشکلات گزارش‌شده رو بخونید و ببینید پاسخ‌ها چقدر مفید هستن.
• فقط به تعداد نصب تکیه نکنید؛ افزونه رو روی نسخه آزمایشی سایتتون امتحان کنید.
• ورود، ثبت‌نام، ایمیل بازیابی رمز و عملکرد فرم روی موبایل رو خودتون آزمایش کنید.

آموزش ساخت فرم ورود پاپ‌آپ در وردپرس

افزونه فرم ورود پاپ‌آپ رو نصب و فعال کنید

از پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید. Forminator رو جست‌وجو کنید و افزونه منتشرشده توسط WPMU DEV رو نصب و فعال کنید. قبل از رفتن به مرحله بعد، داخل افزونه ببینید فرم ورود یا ثبت‌نام کاربر توی نسخه نصب‌شده در دسترس هست یا نه.

حالا همین مسیر رو برای Popup Maker طی کنید و افزونه منتشرشده توسط Popup Maker رو فعال کنید.

فرم ورود کاربران رو بسازید

از منوی Forminator به بخش فرم‌ها برید و ساخت یک فرم تازه رو شروع کنید. اگه الگوی ورود یا Login رو توی نسخه نصب‌شده می‌بینید، همون رو انتخاب کنید. یک فرم ورود معمولاً به فیلد نام کاربری یا ایمیل، رمز عبور، گزینه یادآوری و دکمه ورود نیاز داره.

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

فرم ثبت‌نام و بازیابی رمز عبور رو فعال کنید

اگه نسخه افزونه‌تون فرم ثبت‌نام کاربر داره، یک فرم تازه بسازید و هر فیلد رو به اطلاعات مرتبط در حساب وردپرس وصل کنید. این اتصال تعیین می‌کنه اطلاعات هر فیلد کجای حساب ذخیره بشه. مثلاً فیلد ایمیل باید به ایمیل حساب و فیلد نام کاربری به نام کاربری وصل بشه. اسم و جای این تنظیمات توی نسخه‌ها و افزونه‌های مختلف فرق می‌کنه؛ پس قبل از انتشار، حتماً یک حساب واقعی آزمایشی بسازید.

برای بازیابی رمز، لینک «رمزتون رو فراموش کردید؟» رو داخل فرم ورود بذارید و اون رو به مسیر معتبر بازیابی رمز وردپرس یا صفحه اختصاصی افزونه وصل کنید. بعد یک بار تمام مراحل بازیابی، از درخواست ایمیل تا انتخاب رمز تازه، رو خودتون انجام بدید. اگه افزونه فرم‌ساز این امکانات رو نداره، باید از راهکار سازگار دیگه‌ای برای ورود و ثبت‌نام کمک بگیرید.

پاپ‌آپ رو به دکمه ورود سایت وصل کنید

از منوی Popup Maker یک پاپ‌آپ تازه بسازید.

عنوانی مثل «ورود و ثبت‌نام» براش بنویسید و شورت‌کد فرم ورود رو داخل محتوای پاپ‌آپ بذارید. زیر فرم ورود هم می‌تونید لینک ثبت‌نام و بازیابی رمز رو اضافه کنید.

بعد توی تنظیمات پاپ‌آپ، یک Trigger یا محرک از نوع کلیک بسازید. محرک تعیین می‌کنه چه کاری پاپ‌آپ رو باز کنه. انتخابگر یا کلاسی رو که توی تنظیمات محرک می‌بینید کپی کنید و دکمه ورود سایت رو با همون مقدار تنظیم کنید. موقع وارد کردن کلاس در بخش «کلاس CSS اضافی»، نقطه اول کلاس رو ننویسید. اگه هدر سایتتون رو با المنتور ساختید، کلاس رو توی تنظیمات پیشرفته دکمه وارد کنید. چون اسم گزینه‌ها ممکنه بین نسخه‌ها فرق داشته باشه، در پایان حتماً با کلیک روی دکمه نتیجه رو آزمایش کنید.

شرایط نمایش و بسته شدن پاپ‌آپ رو تنظیم کنید

برای فرم ورود، باز شدن با کلیک معمولاً انتخاب بهتری از نمایش خودکاره. دکمه بستن، کلید Escape و کلیک بیرون پنجره رو برای بستن پاپ‌آپ فعال کنید تا کاربر داخل فرم گیر نکنه. اگه نمی‌خواید پاپ‌آپ برای کاربران واردشده دیده بشه، بررسی کنید نسخه افزونه‌تون شرط مربوط به وضعیت ورود کاربر رو داره یا نه. برای آشنایی بیشتر با تنظیمات این افزونه، مقاله ساخت پنجره پاپ‌آپ رو بخونید.

فرم رو ذخیره و در حالت ناشناس مرورگر آزمایش کنید

پاپ‌آپ رو منتشر کنید و به صفحه‌ای برید که دکمه ورود توش قرار گرفته. آزمایش رو توی پنجره ناشناس مرورگر انجام بدید تا با حساب مدیر وارد سایت نباشید. روی دکمه ورود بزنید، فرم رو بفرستید و ببینید پاپ‌آپ و پیام‌های فرم درست کار می‌کنن یا نه.

تنظیم فرم ثبت‌نام کاربران

فیلدهای ضروری فرم رو مشخص کنید

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

سطح دسترسی کاربر تازه رو آزمایش کنید

بعد از ساخت فرم، با یک ایمیل آزمایشی حساب تازه‌ای بسازید. با همون حساب وارد سایت بشید و مطمئن بشید کاربر به پیشخوان یا بخش‌های مدیریتی دسترسی اضافه نداره. اگه فروشگاه ووکامرسی دارید، بررسی کنید نقش مناسب مشتری به حسابش داده شده باشه.

پیام‌های موفقیت و خطا رو ساده و واضح بنویسید

به‌جای پیام مبهم «خطایی رخ داد»، به کاربر بگید قدم بعدی چیه؛ مثلاً بنویسید «این ایمیل قبلاً ثبت شده؛ وارد حساب بشید یا رمزتون رو بازیابی کنید». بااین‌حال، توی فرم ورود مشخص نکنید دقیقاً کدوم بخش اطلاعات اشتباهه. پیام «اطلاعات ورود درست نیست» اطلاعات کمتری به فرد مهاجم می‌ده.

تأیید ایمیل و قوانین سایت رو تنظیم کنید

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

تغییر ظاهر فرم ورود و ثبت‌نام پاپ‌آپ

• رنگ و فونت: رنگ دکمه و متن رو با قالب سایت هماهنگ کنید و کنتراست کافی رو نگه دارید. راهنمای نصب فونت ایران سنس در وردپرس هم برای مدیریت فونت سایت به کارتون میاد.
• عرض فرم: برای دسکتاپ عرض متعادلی انتخاب کنید و روی موبایل اجازه بدید پنجره کمی از لبه‌های صفحه فاصله داشته باشه.
• دکمه‌ها: دکمه اصلی ورود باید از لینک ثبت‌نام و بازیابی رمز واضح‌تر دیده بشه.
• سادگی فرم: متن‌ها و فیلدهایی رو که برای ورود یا ساخت حساب لازم نیستن کنار بذارید.

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

تنظیم انتقال کاربر بعد از ورود و خروج

انتقال کاربر بعد از ورود به حساب

اگه کاربر وسط دیدن محصول، مقاله یا دوره وارد حسابش می‌شه، برگشتن به همون صفحه می‌تونه ادامه مسیر رو براش راحت‌تر کنه. اگه افزونه فرم چنین گزینه‌ای نداره، صفحه حساب کاربری یا داشبورد اعضا رو به‌عنوان مقصد بذارید.

انتقال کاربر بعد از ثبت‌نام

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

انتقال کاربر بعد از خروج از حساب

برای خروج، صفحه اصلی یا صفحه‌ای با پیام کوتاه «با موفقیت خارج شدید» انتخاب مناسبیه. مقصد باید عمومی باشه تا کاربر بعد از خروج با خطای دسترسی روبه‌رو نشه.

انتخاب مقصد متفاوت برای نقش‌های کاربری

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

افزایش امنیت فرم ورود پاپ‌آپ

• کپچا رو فعال کنید: اگه افزونه فرم‌ساز از کپچا پشتیبانی می‌کنه، اون رو برای کاهش درخواست‌های خودکار تنظیم و آزمایش کنید.
• تلاش‌های ناموفق رو محدود کنید: برای این کار معمولاً به افزونه امنیتی جداگانه‌ای نیاز دارید که با فرم ورودتون سازگار باشه.
• رمز قوی و تأیید دومرحله‌ای داشته باشید: تأیید دومرحله‌ای یعنی کاربر در کنار رمز، یک کد یا تأیید اضافه هم ارائه می‌ده. این قابلیت معمولاً با یک ابزار امنیتی جدا تنظیم می‌شه.
• اطلاعات حساس رو در خطاها نشون ندید: پیام ورود نباید تأیید کنه که یک نام کاربری داخل سایت هست یا نیست.
• اجزای سایت رو به‌روز نگه دارید: وردپرس، قالب و افزونه‌ها رو از منابع معتبر به‌روز کنید. مقاله اهمیت به‌روزرسانی سایت دلیل این کار رو کامل‌تر توضیح می‌ده.

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

آزمایش فرم قبل از انتشار

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

حل مشکلات رایج فرم ورود پاپ‌آپ

پاپ‌آپ با کلیک روی دکمه باز نمی‌شه

اول ببینید پاپ‌آپ منتشر شده و محرک کلیک هم فعاله یا نه. بعد مطمئن بشید کلاس CSS رو بدون نقطه ابتدایی و فاصله اضافه توی تنظیمات دکمه گذاشتید. در آخر کش سایت و مرورگر رو پاک کنید و دوباره توی پنجره ناشناس آزمایش کنید.

فرم بعد از ارسال فقط در حال بارگذاری می‌مونه

این مشکل ممکنه به خطای JavaScript، کش یا مسدود شدن درخواست AJAX مربوط باشه. AJAX روشی برای فرستادن فرم بدون بارگذاری دوباره کل صفحه‌ست. بهینه‌سازی JavaScript رو موقتاً روی نسخه آزمایشی خاموش کنید و افزونه‌ها رو یکی‌یکی بررسی کنید. اگه درخواست‌های سایت کند هستن، راهنمای افزایش سرعت admin-ajax.php در وردپرس هم کمکتون می‌کنه.

ایمیل ثبت‌نام یا بازیابی رمز ارسال نمی‌شه

اول پوشه اسپم و آدرس ایمیل مدیریت سایت رو بررسی کنید. بعد می‌تونید ارسال ایمیل وردپرس رو با یک افزونه معتبر SMTP تنظیم و آزمایش کنید. SMTP یک روش استاندارد برای فرستادن ایمیله، ولی به‌تنهایی تضمین نمی‌کنه که همه ایمیل‌ها حتماً به مقصد برسن.

کاربر بعد از ورود به صفحه اشتباه می‌ره

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

فرم در موبایل درست نمایش داده نمی‌شه

عرض ثابت و زیاد رو بردارید و برای پاپ‌آپ حاشیه کناری بذارید. ارتفاع پنجره نباید دکمه ثبت فرم رو بیرون صفحه نگه داره. اسکرول داخل پاپ‌آپ و باز شدن صفحه‌کلید موبایل رو هم حتماً آزمایش کنید.

پاپ‌آپ با قالب یا افزونه‌های دیگه تداخل داره

اول کش و بهینه‌سازی فایل‌ها رو موقتاً خاموش کنید. بعد روی نسخه آزمایشی، قالب پیش‌فرض وردپرس رو فعال کنید و افزونه‌ها رو یکی‌یکی غیرفعال کنید تا عامل تداخل پیدا بشه. این آزمایش رو روی سایت زنده انجام ندید؛ چون ممکنه بخشی از سایت برای کاربران از کار بیفته.

جمع‌بندی

برای ساخت فرم ورود پاپ‌آپ در وردپرس، اول ثبت‌نام و نقش پیش‌فرض کاربران رو تنظیم کنید. بعد سراغ یک افزونه سازگار برای پردازش ورود و ثبت‌نام برید، شورت‌کد فرم رو داخل Popup Maker بذارید و پاپ‌آپ رو به دکمه ورود وصل کنید.

البته کار با انتشار فرم تموم نمی‌شه. ورود، ثبت‌نام، بازیابی رمز، ایمیل‌ها، نمایش موبایل و سطح دسترسی حساب تازه رو هم آزمایش کنید. یک فرم کوتاه با پیام‌های روشن و چند لایه امنیتی، ورود رو برای کاربر راحت می‌کنه و دردسر امنیتی تازه‌ای هم برای سایتتون نمی‌سازه.

سؤال‌های متداول

تیم تولید محتوا

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