آموزش افزونه گرویتی فرم فارسی برای ساخت فرم های حرفه ای

حتماً شما هم در وبسایت های مختلف با فرم های مختلف رو به رو شده‌اید: فرم هایی که برای تماس با مدیر سایت، یا عضویت در خبرنامه و یا یک نظرسنجی برای ارزیابی تجربه کاربران بر روی سایت ها قرار می‌گیرد. امکان دارد این سوال برای شما پیش آمده باشد که این فرم ها دقیقاً چگونه طراحی می‌شوند و بر روی سایت قرار می‌گیرند.
پاسخ این سوال تا حد زیادی به سیستم مدیریت محتوایی بستگی دارد که وبسایت مورد نظر استفاده می‌کند. اما از آن جایی که اغلب وبسایت های حال حاضر از وردپرس استفاده می‌کنند، می‌توان با تقریب خوبی حدس زد که آن وبسایت از یک افزونه برای ساخت فرم مثل افزونه گرویتی فرم (Gravity Forms) استفاده می‌کند.

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

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

افزونه گرویتی فرم (Gravity Forms) چیست؟

افزونه گرویتی فرم (Gravity Forms) یک افزونه پریمیوم وردپرسی است که به شما اجازه می‌دهد تا فرم‌های مختلف بسازید و در قسمت‌های مختلف و دلخواه وبسایت خود قرار دهید. با استفاده از این پلاگین شما می‌توانید فرم های تماس، کوییز، نظرسنجی و فرم های ثبت سفارش در وبسایت خود بسازید. استفاده از این فرم ساز بسیار آسان و ساده است و حتی با کم ترین تجربه نیز می‌توانید از این افزونه استفاده کنید.

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

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

این افزونه چه کارهایی انجام می‌دهد؟

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

نخست این که به شما اجازه ساختن و ویرایش انواع فرم‌های مختلف را می‌دهد. این افزونه بیش از ۳۰ فیلد مختلف برای هر فرم در نظر گرفته که با استفاده از افزونه‌های اضافی، حتی بیشترم می‌تواند باشد.

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

مهم ترین و شاید ویژگی ناب این افزونه، داشتن منطق شرطی یا Conditional Logic باشد. به این صورت که بر اساس گزینه‌هایی که کاربر در فرم انتخاب می‌کند، می‌تواند فیلدها دچار تغییر شود. مثلاً با انتخاب یک استان، فیلد بعدی ظاهر می‌شود که در آن شهرهای آن استان قرار گرفته و چیزهای دیگری از این قبیل.

افزونه گرویتی فرم را از کجا بخریم؟

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

اگر به وبسایت این افزونه سر بزنید، می‌بینید که برای خرید نسخه اورجینال این افزونه، سه پلن (Plan) مختلف وجود دارد. پلن نخست، پلن Basic نام دارد که برای وبسایت‌های کوچک مناسب است و هزینه‌اش سالیانه ۵۹ دلار است. در این پلن مشخص شده که از این افزونه فقط در ۱ وبسایت می‌توان استفاده کرد. پلن دوم، پلنی است که برای وبسایت‌ها و سازمان‌های متوسط در نظر گرفته شده و پلن Pro نام دارد. هزینه این پلن سالیانه ۱۵۹ دلار است و در ۳ وبسایت مختلف نیز می‌توان از آن استفاده کرد. پلن سوم، پلن Elite نام دارد و برای وبسایت‌های بزرگ و کمپانی‌های بزرگ در نظر گرفته شده که چندین و چند وبسایت مختلف را با هم اداره می‌کنند. در این نوع پلن هیچ محدودیتی برای تعداد سایت‌ها وجود ندارد و تقریبا تمامی ویژگی‌های افزونه نیز بدون محدودیت است. هزینه این پلن سالیانه ۲۵۹ دلار است.

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

خوشبختانه وبسایت‌های معتبر ایرانی زیادی این افزونه را به صورت اورجینال و با هزینه بسیار کمتری عرضه می‌کنند. ضمن این که باید اشاره کرد که افزونه‌هایی که این وبسایت‌ها ارائه می‌کنند به صورت کامل فارسی سازی شده، مرتباً به روز رسانی می‌شود و دارای پشتیبانی است. بنابراین اگر خواستید افزونه را بدون هیچ مشکلی تهیه کنید، می‌توانید از یکی از این وبسایت‌های معتبر این کار را انجام دهید. ضمن این که برخی وبسایت‌ها نیز این افزونه را به صورت رایگان منتشر کرده‌اند. این افزونه‌های رایگان معمولاً فارسی سازی نشده‌اند و دارای پشتیبانی نیستند. از همین رو اگر دارای مشکلات امنیتی باشند، ممکن است مشکلاتی برای وبسایت شما به وجود بیاورند. اما جدا از این‌ها اگر مشکلی با استفاد از افزونه به زبان انگلیسی نداشته باشید، می‌توانید از این نسخه های رایگان عرضه شده نیز استفاده کنید.

در ادامه تعدادی از عرضه کنندگان این افزونه همراه با قیمت افزونه (رایگان و غیر رایگان) را فهرست کرده‌ایم. دقت کنید که قیمت اعلام شده در اینجا مربوط به زمان نگارش این مقاله است و ممکن است در آینده با تغییراتی همراه باشد:

• وبسایت ژاکت که یکی از معروف‌ترین وبسایت‌های ایرانی در زمینه عرضه افزونه‌های پریمیوم وردپرس است، این افزونه را با قیمت ۹۹ هزار تومان عرضه کرده است.
• وبسایت اسکریپت یاب که در زمینه انتشار رایگان اسکریپت، قالب و افزونه فعالیت می‌کند، این افزونه را همراه با تمامی افزونه‌های اضافی آن یعنی Add-ons به صورت رایگان منتشر کرده و معمولاً به صورت مرتب نیز به روز رسانی های آن را منتشر می‌کند.
• وبسایت نال ایکس که در زمینه انتشار افزونه های مختلف وردپرسی فعالیت می‌کند، این افزونه را همراه با افزونه‌های اضافی آن یا Add-onها به صورت رایگان منتشر کرده است.

دانلود و نصب افزونه گرویتی فرم

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

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

ساختن فرم با افزونه

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

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

در بخش اول با گزینه فرم‌ها یا Forms مواجه هستیم که در اینجا می‌توانید فهرست تمامی فرم‌های ساخته شده خود را مشاهده کنید. برای ساخت فرم جدید می‌توانید بر روی گزینه New Form کلیک کنید که در ادامه به آن خواهیم پرداخت.

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

گزینه Settings که مربوط به تنظیمات است و در ادامه به آن خواهیم پرداخت. در بخش Import / Export می‌توانید فرم های آماده و ساخته شده را به این افزونه ایمپورت کنید یا این که از فرم‌های خود اکسپورت بگیرید و آن‌ها را در جای دیگری استفاده کنید. احتمالا تا این جا حدس زده باشید که بسیاری از فرم‌های معمول به صورت آماده در اینترنت وجود دارند و شما می‌توانید آن‌ها را دانلود کنید و در سایت خود ایمپورت کنید و از آن‌ها استفاده کنید.

گزینه Add-Ons نیز مربوط به افزونه‌های اضافی است که در مورد این هم در ادامه توضیحاتی خواهیم داد.

حالا برگردیم به نحوه ساخت فرم جدید. بعد از انتخاب گزینه Add a new form یا New form با چنین صفحه‌ای مواجه می‌شوید که در آن باید نامی برای فرم خود مشخص کنید و همچنین توضیح کوتاهی در مورد آن بدهید. این اطلاعات بیشتر برای خودتان است و این که بعداً به خاطر بیاورید این فرم برای چیست و چه ویژگی‌هایی دارد.

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

بعد از این که چیدن فیلدهای مختلف فرم به پایان رسید، کافی است تا فرم مورد نظر خود را ذخیره کنید.

نحوه اضافه کردن فرم به صفحات سایت

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

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

در صفحه بعدی، از میان فرم هایی که تاکنون ایجاد کرده‌اید، می‌توانید فرم مورد نظر خود را انتخاب کنید. از آن جایی که ما فقط یک فرم به نام «تست» ایجاد کردیم، فقط نام این فرم در بین گزینه‌ها دیده می‌شود. فرم مورد نظر را انتخاب کنید و گزینه Insert Form را انتخاب کنید تا فرم در صفحه قرار بگیرد.

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

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

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

بررسی صفحه تنظیمات یا Settings

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

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

همچنین می‌توانید تعیین کنید که آیا قالب فرم مورد نظر به صورت پیش فرض در حالت قالب سایت باشد یا از قالب پیش فرض خود استفاده کند. که قاعدتاً بهتر است این گزینه فعال باشد و این افزونه از کدهای CSS قالب سایت برای نمایش استفاده کند. برای این کار باید گزینه Output Default CSS فعال باشد که معمولاً به صورت پیش فرض فعال است.

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

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

گزینه Automatic Background Update هم همان طور که از اسمش مشخص است، افزونه را به صورت اتوماتیک و خودکار به روز رسانی می‌کند.

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

گزینه Output HTML5 نیز اگر فعال باشد، می‌توانید در فرم های این افزونه از فیلد HTML5 استفاده کنید.

قسمت دوم و شاید خیلی مهم‌تر در تنظیمات افزونه گرویتی فرم، مربوط به تنظیمات reCaptcha برای آن است.

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

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

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

همان طور که در تصویر بالا نیز می‌بینید، در این قسمت کافی است تا یک Site key و یک Secret Key وارد کنید تا reCaptcha برایتان فعال شود. اما این موارد را باید از کجا بیاوریم؟ در ادامه توضیح می‌دهیم.

چگونه برای سایت خود از گوگل کد recaptcha بگیریم؟

سرویس reCaptcha گوگل یک سرویس محبوب برای جلوگیری از سواستفاده و اسپم در صفحات مختلف سایت است. برای این که بتوانید از این سرویس گوگل، کد مورد نظر را دریافت کنید، باید دامنه سایت خود را ثبت کنید تا بتوانید کلیدهای API را دریافت کنید.

دو کلید اصلی وجود دارد به نام‌های Site Key و Secret key که به هر دوی این‌ها نیز خواهید داشت. از Site key برای رندر کردن یک reCaptcha در صفحه مورد نظر استفاده می‌شود و Secret key هم برای اجرای یک سری دستورات در سمت سرور مورد استفاده قرار می‌گیرد.

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

1. رفتن به صفحه اصلی سرویس reCaptcha گوگل و ورود به بخش کنسول ادمین
2. اضافه کردن سایت جدید
3. دریافت site key و secret key و وارد کردن آن‌ها در بخش تنظیمات افزونه

با ورود به Google reCaptcha کافی است تا به بخش کنسول ادمین v3 وارد شوید و گزینه افزودن سایت جدید را انتخاب کنید. شما برای هر تعداد سایتی که بخواهید می‌توانید کد اختصاصی reCaptcha دریافت کنید.

دقت کنید که نوع reCaptcha v3 باشد و مربوط به سایت باشد. چرا که در این جا می‌توانید برای اپلیکیشن اندرویدی خود نیز کد بگیرید. ولی در این بخش ما نمی‌خواهیم به آن بپردازیم.

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

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

بهترین افزونه‌های اضافی افزونه گرویتی

همان طور که در بخش‌های پیشین نیز اشاره کردیم، افزونه گرویتی فرم دارای یک سری افزونه‌های اضافی یا add-ons نیز می‌باشد که با کمک آن‌ها، می‌توان ویژگی‌های جدیدی به فرم ها اضافه کرد.

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

۱. Gravity Perks Add-ons

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

۲. Jetsloth Gravity forms add-ons

افزونه Jetsloth پنج اکستنشن مختلف و جدید به افزونه گرویتی اضافه می‌کند. که هر کدام از آن‌ها کارهای مختلفی انجام می‌دهند و ویژگی‌های متنوعی را به افزونه اضافه می‌کنند. اما شاید مهم‌ترینشان گزینه انتخاب عکس است که به فرم اضافه می‌شود. با استفاده از آن دیگر برای اضافه کردن عکس به فرم لازم نیست تا از کد HTML استفاده کنید و صرفاً با انتخاب و قرار دادن عکس می‌توانید این کار را انجام دهید.

۳. Gravity Forms to PDF Auto-Fill Solution

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