درود بر شما همراهان گرامی. امروز قصد داریم تا آموزش ساخت فرم تماس با ما توسط افزونه WP Forms در وردپرس را به شما آموزش دهیم. ابتدا میخواهیم کمی با افزونه WP Forms و کاربرد آن در وردپرس بیشتر آشنا شویم.
در این مقاله چی قراره یاد بگیریم؟
آشنایی با افزونه WP Forms
با افزونه WP Forms در وردپرس، به سادگی میتوانید با چند کشیدن و رها کردن (drag and drop) بدون هیچ دانش کد نویسی و برنامهنویسی فرمهای مختلف را بسازید. این افزونه یکی از معروفترین افزونهها در زمینه ساخت فرم است و کاربرد بسیاری در ساخت فرمهای مختلف دارد. این فرمها عبارتند از:
- تماس
- سفارش
- عضویت
- رزرو
- نظرسنجی
- ثبتنام
- پرداخت و غیره…
چرا باید از افزونه WP Forms استفاده کنیم؟
هنگامی که صحبت از ساخت فرم در وردپرس میشود، نام افزونههای Contact Form 7, Ninja Forms, Formidable Forms, Gravity Forms و WPForms به یاد میآید. برخی از این افزونهها بسیار پیچیده هستند و نیاز به دانش زیاد دارند. اما در افزونه WPForms همه چیز خیلی ساده است. در ادامه چند دلیل برای استفاده از این افزونه را به شما توضیح میدهیم.
۱. طراحی ساده با سیستم کشیدن و رها کردن: با استفاده از روش Drag & Drop به سادگی با چند کلیک موس میتوانید تمام انواع فرم حتی فرمهای پیچیده چندمرحلهای و ویژه را طراحی کنید.
۲. قالبهای آماده برای صرفهجویی در زمان: این افزونه دهها مدل قالب آماده برای طراحی فرمهای تماس، رزرو، مشاوره و … دارد که تنها کافی است نام و متن آنها را عوض کنید و از آنها استفاده کنید.
۳. مدیریت هوشمند دادهها و اعلانها: هر فرمی که کاربری برای شما ارسال کند، یک نسخه از آن فرم در پیشخوان وردپرس ذخیره و یک ایمیل اعلان نیز برایتان ارسال میکند. همچنین میتوانید چندین گیرنده برای هر فرم مشخص کنید. برای مثال مدیر سایت, پشتیبانی فنی و.. که آنها نیز در جریان باشند.
4. امنیت بالا و فیلتر ضد اسپم: پشتیبانی از Google reCAPTCHA، hCaptcha و قابلیت honeypot باعث میشود تا فرمها در برابر رباتها مقاوم باشند و تنها دادههای واقعی دریافت شوند.
5. قابلیت پرداخت آنلاین: در نسخه پرو این افزونه فرمها مستقیما میتوانند قابلیت پرداخت آنلاین را داشته باشند. البته متاسفانه این قابلیت فعلا در ایران کارآیی ندارد.
6. سازگاری کامل با وردپرس و سئو: این افزونه سبک بوده و کاملا هماهنگ با قالبهای وردپرس است. فرمهای این افزونه بهینه شده هستند و باعث افت سرعت و یا خطا در کش کردن برگههای سایت نمیشوند.
مقایسه افزونه WPForms با سایر افزونههای فرم ساز
همانطور که پیشتر گفته شد, در کنار افزونه WPForms, 4 افزونه دیگر نیز برای ساخت فرم وجود دارد. در این جا میخواهیم این افزونهها را باهم مقایسه کنیم.
نصب افزونه WP Forms
باز هم مثل مانند گذشته جهت نصب افزونه WP Forms ، از طریق منو افزونه, گزینه “افزودن افزونه” اقدام میکنیم. در قسمت جستجو نام افزونه را نوشته و جستجو کنید.
پس از آن روی گزینه “هم اکنون نصب نمایید” در افزونه WP Forms مورد نظر کلیک کنید. پس از نصب نیز گزینه “فعالسازی” کلیک کنید تا افزونه مورد نظر فعال شود.
پس از فعالسازی افزونه WP Forms ، صفحهای مانند تصویر زیر برای شما باز خواهد شد. در این صفحه نصب موفقیت آمیز افزونه اعلام شده است. اگر در قسمت وسط صفحه محلی که با کادر مستطیل قرمز به شما نشان دادهایم، کلیک کنید فیلم آموزشی برای نحوه کار با این افزونه که به زبان انگلیسی است به شما نمایش داده میشود.
همانطور که در تصویر بالا میبینید, در زیر تصویر ویدیو دو گزینه وجود دارد.
توضیحات این دو گزینه به شرح زیر است:
- گزینه 1: گزینه نارنجی رنگ که مستقیما شما را به ساخت اولین فرم خودتان منتقل میکند.
- گزینه 2: گزینه طوسی رنگ که شما را به صفحه مستندات آموزشی در سایت WP Forms منتقل میکند.
در پایین این صفحه هم یک بخش چالش دارد. با شرکت در این چالش, به صورت گامبهگام در 5 دقیقه آموزش میبینید تا چگونه اولین فرم خود را بسازید
آموزش ساخت فرم تماس با ما توسط افزونه WP Forms
برای ساخت اولین فرم، روی گزینه 1 نارنجی رنگ یعنی گزینه “اولین فرم خودتان را ایجاد کنید” کلیک میکنیم. در صفحه زیر که برای شما باز میشود در این صفحه به ترتیب زیر عمل کنید:
1: در قسمت کادر نامگذاری، نام فرم خود را انتخاب و وارد کنید سپس روی گزینه “انجام شد” کلیک کنید.
2: از میان قالب فرمهای موجود در صفحه مقابل شما، قالب مورد نظر خود را انتخاب کنید. در این قسمت ما قالب “فرم تماس ساده” را انتخاب میکنیم. برای این منظور کافیست روی قالب قرار بگیرید و بر گزینه ” استفاده از الگو” کلیک کنید.
تب فیلدها
پس از انتخاب قالب، به صفحه “فیلدها” میروید. در این قسمت تنظیمات فرم را انجام میدهید. در ابتدا میتوانید چند فیلد را به فرم خود اضافه کنید. دقت داشته باشید که در این قسمت تعدادی از فیلدهای رایگان هستند و تعدادی از آنها در دستهبندی پیشرفته هستند که برای فعالسازی آنها باید نسخه پرو افزونه WP Forms را خریداری کنید. در اینجا ما برای مثال از فیلد “چند گزینهای” استفاده میکنیم.
برای اعمال تغییرات در فرم و گزینههای آن کافی است روی قسمت مورد نظر کلیک کنید. با این کار در سمت راست بخش تغییرات باز میشود. برای جابجایی میان فیلدها هم کافی است از روش کشیدن و رها کردن (drag and drop) استفاده کنید.
- گزینه 1: در قسمت برچسب نام فیلد را تغییر دهید.
- گزینه 2: در این قسمت میتوانید متن فیلد را تغییر دهید.
- گزینه 3: با این گزینه از هوش مصنوعی برای ساخت فرم میتوانید کمک بگیرید. این قسمت در افزونه پیشرفته فعالتر است.
- گزینه 4: با فعال کردن این گزینه برای این فیلد میتوانید از تصویری استفاده کنید.
- گزینه 5: در قسمت توضیحات، میتوانید توضیح مختصری برای فیلد بنویسید. برای مثال “لطفا یکی از دو گزینه بالا را انتخاب نمایید.”
- گزینه 6: اگر این قسمت را روشن و فعال کنید، این فیلد تبدیل به فیلد ستارهدار میشود و پرکردن این فیلد ضروری میگردد.
در کنار هر گزینه علامت مثبت و منفی به رنگ قرمز و آبی وجود دارد. با این گزینهها میتوانید تعداد گزینههای فیلد را کم و زیاد کنید.
در سمت چپ هر فرم علامت سطل زبالهای به رنگ قرمز وجود دارد که با آن میتوانید فیلدها را حذف کنید.
و همچنین علامت دیگری در کنار سطل زباله قرار دارد که مخصوص تکثیر فیلد مورد نظر است.
در بالای نوار ابزار افزونه WP Forms، تب پیشرفته جهت تنظیمات دیگر وجود دارد. گزینههای این تب به شرح زیر است:
- گزینه 1: انتخاب نحوه چیدمان برای گزینهها. برای مثال میتوانید از میان لیست “یک ستونه، دو ستونه، سه ستونه و خطی” یکی را انتخاب کنید. برای مثال اگر ۶ گزینه دارید حالت دو ستونه ظاهر فرم را بهتر نمایش میدهد.
- گزینه 2: این تنظیم کمی پیشرفتهتر است. زمانی که خاموش است، یعنی گزینهها را دستی باید وارد کنید. اما اگر روشن باشد, میتوانید گزینهها را به صورت خودکار از منبعی در سایت بگیرید. برای مثال گزینه “پست تایپ” از نوشتهها و برگه ها و گزینه “طبقهبندی” از دستهها و برچسبها استفاده میکند. کاربرد این گزینه در فرمهای “انتخاب دسته محصول” بیشتر است.
- گزینه 3: این قسمت مخصوص استایل و طراحی متفاوتتری از فرم پیشفرض است. نوع فونت، سایز و رنگهای مختلف را از این قسمت میتوانید تغییر دهید.
- گزینه 4: با فعال کردن این گزینه همان نامی که در تب قبل برای این فیلد گذاشتید، مخفی میشود.
- گزینه 5: در این گزینه کاربر فقط میتواند فیلدها را ببیند اما نمیتواند تغییری ایجاد کند. بیشتر مناسب فرمهای نمایشی یا نسخههای فقط نمایشی (نمایش دادههای پرشده) است.
تب سوم این تنظیمات با عنوان “منطق شرطی هوشمند” مخصوص نسخه پیشرفته افزونه WP Forms است. در این بخش میتوانید فرمها را هوشمند کنید. یعنی بعضی فیلدها فقط وقتی نمایش داده شوند که کاربر گزینه یا شرط خاصی را رعایت کند.
تب تنظیمات
پس از تکمیل این بخش، میتوانید وارد قسمت سوم یعنی “تنظیمات” از منو سمت راست شوید. در این قسمت تنظیمات عمومی فرم از نظر عملکرد را میتوانید مشخص کنید. این بخش گزینههای زیادی را دارد اما تنها 5 قسمت آن در نسخه رایگان افزونه باز است.
این 5 قسمت عبارتند از:
- 1. عمومی
- 2. حفاظت از هرزنامه و امنیت
- 3. پوستهها
- 4. اعلانها
- 5. تاییدیهها
تب اول این بخش یعنی عمومی، مناسب تنظیمات فرم در ویرایشگر افزونه WPForms است. فیلدهای این بخش به شرح زیر است:
گزینه 1: نام فرم
عنوان داخلی فرم، که در ابتدا انتخاب کردیم را از این قسمت میتوانیم تغییر دهیم.
گزینه 2: توضیحات فرم
متن توضیحی که در بالای فرم نمایش داده میشود. برای معرفی فرم یا دادن دستورالعمل به کاربر استفاده میشود. پرکردن این گزینه کاملا اختیاری است.
گزینه 3: تگها
برچسبهای داخلی برای مدیریت و دستهبندی فرمها در پیشخوان که روی ظاهر یا کارکرد فرم تأثیری ندارند.
گزینه 4: متن دکمه ثبت
متن نوشتهای که برروی دکمه ارسال قرار دارد. به صورت پیشفرض کلمه «ارسال» است، اما میتوانید مثلاً «ثبت درخواست» یا «فرستادن پیام» یا هر عبارت دیگری را نیز قرار دهید.
گزینه 5: متن در حال پردازش دکمه ثبت
زمانی که کاربری فرم را ارسال میکند، این متن موقتاً جای متن دکمه ارسال را میگیرد. به طور معمول مینویسند «در حال ارسال…» یا «لطفاً صبر کنید».
گزینه 6: کلاس CSS فرم
در اینجا میتوانید یک یا چند کلاس CSS سفارشی وارد کنید تا بعداً در استایل قالب وردپرس یا در تنظیمات سفارشی (Custom CSS) از آن برای ویرایش ظاهر فرم استفاده کنید.
گزینه 7: کلاس CSS دکمه ثبت
دقیقا مانند گزینه قبل است با این تفاوت که مخصوص دکمه ثبت است.
در پایان این بخش دو گزینه وجود دارد که به صورت خاموش/روشن است. گزینه اول فعالسازی از پیش تکمیلی یا آدرس URL است که هنگامی که فعال باشد، میتوانید از طریق لینک خاصی فیلدهای فرم را از قبل پر کنید. یعنی کاربر قبل از بازکردن فرم، مقداری اطلاعات فرم را از آدرس خاصی گرفته و پر میکند. مثلاً اگر کسی از لینک زیر وارد فرم شود، example.com/contact?name=Ali&email=ali@mail.com نام او علی و آدرس ایمیلش ali@mail.com قرار میگیرد.
گزینه دوم هم فعالسازی AJAX برای ارسال فرم است که این گزینه باعث میشود فرم بدون رفرش شدن صفحه ارسال شود. این گزینه تجربه کاربری بهتری دارد و در حال حاضر فعال است.
قسمت بعدی از تب تنظیمات، حفاظت از هرزنامه و امنیت است. در این قسمت جلوی فرمهای رباتی، اسپم و ارسال خودکار گرفته میشود و ارسالها فقط از طریق انسان انجام میشود. گزینههای موجود در این بخش به شرح زیر هستند:
- گزینه 1: فعالسازی محافظت ضد هرزنامه مدرن: این گزینه با آنالیز رفتار کاربر هنگام پرکردن فرم تشخیص میدهد که آیا انسان در حال پر کردن فرم است یاربات. پیشنهاد میشود فعال بماند زیرا بدون هیچ تنظیم اضافی کار میکند.
- گزینه 2: فعالسازی محافظ ضد هرزنامه Akismet : اگر افزونه معروف Akismet در سایت نصب باشد، میتواند ارسال فرمها را با پایگاه دادهی ضد اسپم خودش بررسی کند. فقط زمانی کارآیی دارد که افزونه Akismet از قبل نصب و کانفیگ باشد.
- گزینه 3: فعالسازی تاخیر زمان ارسال فرم، این گزینه حداقل زمانیکه کاربر باید صرف پرکردن فرم کند را مشخص میکند. مثلاً در تصویر، «۲ ثانیه» تنظیم شده یعنی اگر کسی سریعتر از ۲ ثانیه فرم را ارسال کند، WPForms او را ربات تشخیص داده و ارسال را متوقف میکند. معمولاً بین ۲ تا ۵ ثانیه بهترین تنظیم است.
در پایین این قسمت هم 6 بخش وجود دارد که در تصویر بالا با حروف انگلیسی مشخص کردهایم. توضیحات این بخشها به شرح زیر است:
در ابتدا باید معنی کلمه کپچا را متوجه شویم. کپچا (CAPTCHA) مخفف “Completely Automated Public Turing test to tell Computers and Humans Apart” یعنی آزمونی کوتاه برای تشخیص انسان از ربات.
گزینه A: سرویس hCaptcha
سرویس رایگان و با حفظ حریم خصوصی برای ایران گزینهی مناسبی است.
گزینه B: سرویس reCAPTCHA (گوگل)
معروفترین نوع کپچا. اما گاهی در ایران بهدلیل محدودیت دامنههای گوگل صحیح کار نمیکند و یا کند میشود.
باقی گزینههای زیر نیز در نسخه پیشرفته افزونه فعال هستند و در سرویس رایگان افزونه WP Forms امکان استفاده ندارند.
گزینه C: کپچا سوال ریاضی (Math CAPTCHA)
سؤالهای سادهای مانند «۳ + ۲ » برای تشخیص انسان بودن نمایش میدهد.
گزینه D: فیلتر کلمه (Keyword Filter)
اجازه میدهد ارسالهایی که شامل کلمات خاص (مثلاً اسپم یا تبلیغاتی) هستند، رد شوند.
گزینه E: فیلتر کشور (Country Filter)
مخصوص مسدود کردن ارسال از کشورهایی خاص برای جلوگیری از رباتهای خارجی.
گزینه F: سرویس Cloudflare Turnstil
کپچای جدید و بسیار سبک که ساخت Cloudflare است. حریم خصوصی بالایی دارد و در ایران معمولاً بهتر از reCAPTCHA کار میکند. این سرویس قابل استفاده در نسخه رایگان است؛ فقط باید حساب Cloudflare بسازید و کلید اتصال دریافت کنید.
در ادامه تفاوت hCaptcha و reCAPTCHA را برای شما توضیح میدهیم.
Google reCAPTCHA (تولید گوگل) است. این سرویس سه نسخه دارد.
نسخه اول: سرویس reCAPTCHA v1 که در آن تعدادی حروف و اعداد بهم ریخته بود و کاربر باید متن صحیح را حدس میزد. این سرویس از سال 2018 قدیمی اعلام شده است.
نسخه دوم: سرویس reCAPTCHA v2 که نمایشی و تصویری است. زمانی که فعال باشد معمولا تصاویری به کاربر نمایش داده میشود و از بین این تصاویر باید ماشینها,چراغ راهنمایی یا … را انتخاب کنید. گاهی فقط یک تیک “I’m not a robot” دارد. در پشت صحنه گوگل با بررسی رفتار ماوس, زمان کلیک و IP تصمیم میگیرد انسان هستید یا خیر.
نسخه سوم: سرویس reCAPTCHA v3 که هیچ آزمونی نمایش داده نمیشود و فقط رفتار کاربر حین استفاده از صفحه بررسی میشود. مزیت این سرویس تجربه کاربری بهتر است چرا که هیچ آزمونی برای حل کردن نیست و وقت کاربر کمتر تلف میشود.
سرویس hCaptcha تولید شرکت Intuition Machines در آمریکاست و دقیقا نسخه جایگزین سرویس reCAPTCHA است با این تفاوت که معمولا سریعتر و دردسترستر از سرویس reCAPTCHA است.
تب سوم تنظیمات، پوستهها است. در این تب میتوانید استایل فرمها را بدون نیاز به کدنویسی تغییر دهید. یعنی ظاهر فیلدها، برچسبها (Label)، دکمه ارسال، رنگها و پسزمینه را از همین قسمت میتوانید تنظیم کنید.
استایلهای فیلد: شکل و مرز (گرد یا مربع، ضخیم یا نازک) و رنگ فیلدهای ورودی را مشخص میکند.
استایلهای برچسب: فونت، رنگ و اندازه نوشتهها را مشخص میکند.
استایل دکمه: رنگ، اندازه و شکل دکمهی ارسال را مشخص میکند.
استایل کانتینر: استایل کل فرم (مرز یا رنگ اطراف) را مشخص میکند.
استایل پسزمینه: انتخاب رنگ یا تصویر برای پشت فرم را انجام میدهد.
هرکدام از این موارد تنظیمات مخصوص به خود را دارند که میتوانید براساس نیاز خود ظاهر فرم را شخصیسازی کنید.
در قسمت تب پیشرفته پوستهها هم میتوانید در تب CSS سفارشی، کد سفارشی خود را بنویسید تا فرم به ظاهر سفارشی شما درآید.
تب بازاریابی
این تب که تب چهارم تنظیمات مخصوص افزونه WP Forms است، این بخش مخصوص اتصال فرم به ابزارهای بازاریابی ایمیلی یا CRM (مدیریت ارتباط با مشتری) طراحی شده است.
زمانیکه یک فرم تماس یا اشتراک خبرنامه میسازید، افزونه WP Forms فقط دادهها را ذخیره نمیکند، بلکه میتواند آنها را مستقیماً برای سرویسهای بازاریابی ایمیلی ارسال کند.
متاسفانه به علت تحریمهای ایران، این بخش در ایران کاربرد چندانی ندارد.
تب پرداختها
آخرین تب بخش ساخت فرم, مربوط به پرداختها است. این بخش به شما اجازه میدهد که به صورت مستقیم از فرمها پول دریافت کنید. برای مثال فرم سفارش کالا یا خدمات، فرم ثبتنام دوره آموزشی، فرم رزرو وقت، یا کمکهای مالی (donations).
برای اینکه بتوانید از این بخش استفاده کنید باید بتوانید به سرویس جهانی متصل شوید که متاسفانه این سرویسها در ایران قابل استفاده نیستند. اما با استفاده از افزونههای واسط هنوز هم راه حلهایی وجود دارد. برای مثال افزونه Zarinpal for WPForms فرم شما را به درگاه پرداخت زرینپال وصل میکند.
در نهایت باید روی گزینه ذخیره کلیک کنید و فرم را در یک برگه از برگههای سایت خود بگذارید. در این قسمت آموزش ساخت فرم تماس با ما توسط افزونه WP Forms به پایان رسید. این یک نمونه از فرمی است که با این افزونه ساختهایم.
جمعبندی نهایی
در این مقاله، آموزش ساخت فرم تماس با ما توسط افزونه WP Forms را به شما آموزش دادیم. افزونههای مشابه این افزونه را باهم مقایسه کردیم و گزینهها و تنظیمات این افزونه برای ساخت فرمهای مختلف را به صورت کامل بررسی کردیم.
اگر علاقه مند به ساخت فرمهای حرفهای در وردپرس هستید پیشنهاد میکنیم دوره آموزش جامع افزونه گرویتی فرم از سایت مهارت وب را مشاهده کنید، در این دوره به صورت کامل از 0 تا 100 ساخت انواع فرم با گرویتی فرم توضیح داده شده است.
ستار الماسی نویسنده مطلب
پس از چندین سال طراحی سایت با وردپرس، امروز اینجا با مهارت وب در کنار شما هستم تا با هم بتونیم حرفهایتر و بیشتر از وردپرس استفاده کنیم و سایتهای بهتری را با وردپرس بسازیم و ازش کسب درآمد داشته باشیم.
