فرم های AJAX به کاربران این اجازه را می دهد تا بتوانند فرم مد نظر را بدون بارگیری مجدد صفحه، ثبت کنند. اینکار باعث می شود تا تجربه کاربری در پر کردن و ارسال کردن فرم تا حد بالایی، افزایش یابد!

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

از قابلیت AJAX نیز در دیگر فرم ها مانند فرم ورود و عضویت می توان استفاده کرد تا کاربران بتوانند در سریع ترین زمان ممکن، عملیات ورود یا ثبت نام در وب سایت را انجام دهند.

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

AJAX چیست و چرا باید برای فرم ها استفاده کرد؟

کلمه AJAX مخفف عبارت Asynchronous Javascript و XML است که یک تکنیک برنامه نویسی در JavaScript می باشد که توسعه دهندگان و برنامه نویسان می توانند داده ها را بدون رفرش و بارگیری مجدد صفحه، انتقال دهند.

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

اپلیکیشن های وب مانند Gmail و Facebook از این تکنیک به طور گسترده درحال استفاده هستند تا بتوانند یک تجربه کاربری بسیار مناسب و سریع را برای مخاطبان خود فراهم کنند.

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

قدم اول: نصب افزونه WPForms

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

افزونه WPForms یکی از قوی ترین و محبوب ترین افزونه های فرم ساز وردپرسی است که در دو نسخه رایگان و پولی ارائه می شود. در این افزونه ما قادر هستیم تا فرم های مختلفی با تکنیک AJAX ایجاد کنیم.

قدم دوم: ساخت اولین فرم

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

حال می توانید به راحتی با کلیک بر روی گزینه Create your first form اولین فرم خود را ایجاد کنید. همچنین اگر با این پیام مواجه نشدید، خیلی راحت می توانید از طریق Add new در بخش WPForms در سایدبار پیشخوان وردپرس، یک فرم جدید ایجاد کنید.

حال باید مانند تصویر بالا، یک عنوان برای فرم جدید انتخاب کرد.

حال باید یک قالب برای فرم مورد نظر انتخاب کنید. در WPForms چهار نوع فرم از پیش آماده به شما پیشنهاد داده میش ود که در اینجا ما Simple Contact Form را انتخاب می کنیم.

حال همانطور که مشاهده می کنید، ما توانستیم فرم تماس با ما را با موفقیت ایجاد کنیم.

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

همانطور که مشاهده می کنید، ما بر روی فیلد Name جهت ویرایش مشخصات آن کلیک کردیم و حال می توانیم نام آن را فارسی کنیم.

در بخش Add fields نیز می توانیم فیلد های دیگری به فرم اضافه کنیم:

قدم سوم: فعال سازی تابع AJAX برای فرم

حال پس از اینکه فیلد های فرم مد نظر را مشخص کردید، باید به بخش Settings و سپس به General مراجعه کنید:

سپس باید همانند تصویر زیر، گزینه Enable AJAX form submission را فعال کنید:

حال کاقیست تا بر روی دکمه SAVE برای اعمال تغییرات کلیک کنید.

در بخش Confirmation یکسری تنظیمات مربوط به وقایع پس از ثبت فرم وجود دارد:

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

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

به طور پیش فرض، افزونه WPForms یک پیام پیش فرض پس از ثبت فرم، به کاربران نمایش می دهد که می توانید بر اساس سلیقه خود، این متن را فارسی سازی کنید (متنی که در تصویر بالا وجود دارد).

در بخش Notification نیز یکسری تنظیمات مربوط به اعلانات فرم است که می توان آن ها را به دلخواه تغییر داد.

قدم چهارم: افزودن فرم به صفحه

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

برای آنکه بتوانیم فرم AJAX را در مطالب یا صفحات قرار بدهیم، کافیست در بخش Block ها، بلاک WPForms را انتخاب کرد:

سپس بلاک WPForms ایجاد می شود که باید فرم مورد نظر خودمان را انتخاب کنیم:

همچنین در بخش All forms افزونه WPForms، برای هر یک از فرم ها یک کد کوتاه (Short Code) قرار گرفته است که می توان آن ها را کپی و در محلی که می خواهیم فرم نمایش داده شود، Paste کنیم:

همچنین می توان فرم های WPForms را به ابزارک های وب سایت نیز اضافه کرد:

همانطور که در تصویر بالا مشاهده می کنید، ما در بخش ابزارک ها، ابزارک مربوط به افزونه WPForms را در ستونی که می خواهیم نمایش دهیم، قرار داده ایم. سپس در بخش Title یک عنوان برای ابزارک مشخص کرده ایم و در Form نیز فرم مورد نظرمان جهت نمایش را مشخص کرده ایم.

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

پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .