نحوه ساخت فرم AJAX وردپرس (در 4 مرحله آسان)

آیا می خواهید فرم تماس AJAX را در وردپرس ایجاد کنید؟

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

این به شما کمک می کند که شما یک وب سایت تجارت الکترونیکی را اداره می کنید و می خواهید بدون جلب توجه کاربر ، بازخورد کاربر را جمع آوری کنید.

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

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

Creating an Ajax contact form in WordPress

Ajax چیست و چرا از آن برای فرم های خود استفاده می کنید؟ h4>

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

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

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

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

همانطور که گفته شد ، بیایید نگاهی به چگونگی ایجاد فرم تماس با وردپرس Ajax در 4 مرحله ساده بیاندازیم.

1 پلاگین WPForms را نصب کنید h4>

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

WPForms بهترین پلاگین فرم ساز WordPress در بازار. این امکان را به شما می دهد تا به راحتی فرم های مجهز به Ajax را نیز ایجاد کنید.

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

WPForms license key

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

اکنون شما برای ایجاد فرم های زیبای آژاکس در وردپرس آماده شده اید.

2. اولین فرم خود را ایجاد کنید h4>

بیایید ادامه دهیم و اولین فرم خود را ایجاد کنیم.

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

Choose form template

به خاطر این آموزش ، ما یک عنوان خواهیم بود = “نحوه ایجاد فرم تماس در وردپرس (گام به گام)”> ایجاد فرم تماس . با این حال می توانید هر نوع فرم دیگری که نیاز دارید ایجاد کنید.

WPForms اکنون فرم شما را با قسمتهای اصلی قبلاً اضافه شده بارگیری می کند. برای ویرایش می توانید به راحتی روی هر قسمت فرم اشاره کرده و کلیک کنید.

Editing form fields in WPForms

همچنین می توانید هر فیلد فرم جدید را از ستون سمت چپ با کلیک ساده بر روی آن اضافه کنید. قسمت جدید در پایین فرم شما دقیقاً بالای دکمه ارسال ظاهر می شود.

Click to add a new form field

می توانید قسمتهای فرم را به راحتی بکشید و رها کنید تا آنها را در فرم بالا و پایین ببرید.

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

3 ویژگی ارسال فرم Ajax را روشن کنید h4>

WPForms به طور پیش فرض ارسال فرم Ajax را فعال نمی کند. شما باید آن را به صورت دستی برای فرم خود فعال کنید.

به سادگی به برگه تنظیمات در فرم ساز بروید و کادر کنار گزینه “فعال کردن ارسال فرم AJAX” را علامت بزنید.

Turn on Ajax form functionality

با علامت زدن کادر ، عملکرد Ajax برای این فرم روشن می شود.

حالا بیایید تنظیم کنیم که چه اتفاقی می افتد بعد از ارسال فرم.

ابتدا ، در بخش تنظیمات به برگه “تأیید” بروید. این جایی است که شما به کاربران خود اطلاع می دهید فرم ارسال آنها را دریافت کرده اید.

Confirmation settings

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

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

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

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

در تنظیمات فرم به برگه اعلان ها بروید و تنظیمات ایمیل اعلان را پیکربندی کنید.

Form notification email settings

پس از اتمام کار ، می توانید فرم خود را ذخیره کرده و از فرم ساز خارج شوید.

4. فرم فعال Ajax خود را در وردپرس اضافه کنید h4>

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

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

Add WPForms block to WordPress post or page

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

Select your form

اکنون می توانید محتوای خود را ذخیره یا منتشر کنید و سپس برای آزمایش عملکرد ajax فرم به وب سایت خود مراجعه کنید.

Ajax contact form preview

همچنین می توانید فرم خود را به یک ابزارک نوار کناری در وردپرس اضافه کنید. برای انجام این کار ، به صفحه Appearance »Widgets بروید و ابزارک WPForms را به یک نوار کناری اضافه کنید.

Add your ajax powered form to a sidebar widget

فرمی را که قبلاً ایجاد کرده اید انتخاب کنید و برای ذخیره تنظیمات ویجت روی دکمه ذخیره کلیک کنید. اکنون می توانید به وب سایت خود مراجعه کرده و فرم مجهز به Ajax خود را در عمل مشاهده کنید.

امیدواریم این مقاله به شما کمک کرده باشد نحوه ایجاد فرم تماس وردپرس Ajax برای وب سایت خود را بیاموزید. همچنین ممکن است بخواهید راهنمای ما را در نحوه ایجاد یک پنجره فرم تماس در وردپرس .

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/plugins/how-to-build-a-wordpress-ajax-form/.

دیدگاهتان را بنویسید