نمایش پیام و طرح دلخواه بعد از ارسال موفق فرم المنتور

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

هر فرمی که ایجاد می شود، نیازمند نمایش پیامی مبنی برای ارسال موفق یا ناموفق کاربر می باشد.

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

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

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

طراحی فرم المنتور

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

بعد از طراحی کامل فرم، روی بخش اصلی (Section) کلیک کرده و در تب پیشرفته و در قسمت شناسه CSS کد زیر را وارد کنید:

efa_form_hide

تا اینجای کار، فرم المنتور را طراحی کردیم.

طراحی پیام با طرح دلخواه

حالا دقیقا در زیر فرم المنتور که طراحی کردیم، پیام دلخواه را ایجاد می کنیم.

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

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

efa-form-success-message

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

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

عملیات نمایش پیام دلخواه با JS

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

برای قرار دادن کد JS کافیست افزونه رایگان Simple Custom CSS and JS را از مخزن وردپرس نصب کنیم.

بعد از نصب از تب Custom CSS & JS گزینه Add Custom JS را بزنید.

سپس در صفحه باز شده، باید کد JS زیر را وارد کنید:

jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', '#efa_form_hide', function(){
$submitted_form = $( this );
$submitted_form.hide();
$('#efa-form-success-message').show(); // this is the sucess message that I created.
});
});

سپس کد را منتشر کرده و فرم را تست کنید.

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