جشــــنــــــــــــــواره نوروز 1403

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

پخش ویدیو
4.6/5 - (20 امتیاز)

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

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

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

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

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

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

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

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

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

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

بعد از طراحی کامل فرم، روی بخش اصلی (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

5 دقیقه

امتیاز دهید

4.6/5 - (20 امتیاز)

اشتراک گذاری

آخرین مقالات

برچسب ها

لینک کوتاه

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

فهرست مطالب

16 پاسخ

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

  2. سلام
    آموزش قشنگی بود. ممنون از شما
    من بر اساس آن کار کردم و جواب گرفتم و یک دکمه OK هم پایین پیغام نمایش داده شده گذاشتم، حالا چه کدی باید بنویسم که با زدن دکمه OK، پیغام بره و دوباره فرم خالی نمایش داده بشه؟

    این رو راهنمایی کنید، خیلی ممنون میشم.

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

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

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

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

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

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

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *