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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
نمایش پیام و طرح دلخواه بعد از ارسال موفق فرم المنتور
پخش ویدیو

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

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

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

متن موفقیت ارسال فرم المنتور

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

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

متن موفقیت ارسال فرم المنتور

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

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

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

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

efa_form_hide

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

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

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

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

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

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

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

efa-form-success-message

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

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

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

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

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

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

برای قرار دادن کد JS کافیست افزونه رایگان Simple Custom CSS and 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.
});
});

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

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

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
متوسط

035-essay

زمان آموزش :
5 دقیقه

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=183375

فهرست مطالب

مسعوو محرابی در 22:16

آقا تشکر آپلود فایل حل شد فقط فایل js اینو بدین دعاتون میکینم 🙂

پاسخ
حامد در 16:24

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

پاسخ
hetra در 16:31

سلام من این آموزش رو انجام دادن ولی نشد، مشکل از کجاست؟

پاسخ
المنتور فارسی در 22:11

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

پاسخ
hetra در 16:23

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

پاسخ
امین ولی پور در 11:46

یه سوال هم دارم
چیزی که شما ساختیدف پاپ اپ نیست؟ یه سکشن جدا ساخته شده؟
ممنونم

پاسخ
المنتور فارسی در 12:01

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

پاسخ
مسعود در 19:11

سلام خسته نباشین چطوری میشه به این فرم یک اپلود فایل هم اضافه کرد برای ارسال عکس

پاسخ
امین ولی پور در 11:43

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

پاسخ
المنتور فارسی در 12:01

با سلام
ممنون از همراهی شما

پاسخ
پرهام سبحانی در 12:24

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

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید