---
title: "نمایش پیام و طرح دلخواه بعد از ارسال موفق فرم المنتور"
url: "https://elementorfa.ir/custom-design-messege-submit-form-elementor/"
type: "post"
published: "2021-06-07T11:50:05+04:30"
modified: "2024-09-05T12:58:49+03:30"
author: "المنتور فارسی"
---

4.5/5 - (22 امتیاز)

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

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

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

![متن موفقیت ارسال فرم المنتور](https://elementorfa.ir/wp-content/uploads/2021/06/simple-message-form-elementor.png)

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

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

![متن موفقیت ارسال فرم المنتور](https://elementorfa.ir/wp-content/uploads/2021/06/elementor-pro-message.png)

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

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

![طراحی فرم المنتور پرو](https://elementorfa.ir/wp-content/uploads/2021/06/elementor-pro-form.png)

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

```
efa_form_hide
```

![طراحی فرم المنتور پرو](https://elementorfa.ir/wp-content/uploads/2021/06/elementor-pro-advanced.png)

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

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

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

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

![طراحی فرم المنتور پرو](https://elementorfa.ir/wp-content/uploads/2021/06/elementor-pro-message-design.png)

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

```
efa-form-success-message
```

![طراحی فرم المنتور پرو](https://elementorfa.ir/wp-content/uploads/2021/06/elementor-pro-messages-hide.png)

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

![طراحی فرم المنتور پرو](https://elementorfa.ir/wp-content/uploads/2021/06/elementor-pro-section-hide.png)

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

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

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

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

![نصب افزونه Simple Custom CSS and JS](https://elementorfa.ir/wp-content/uploads/2021/06/Simple-Custom-CSS-and-JS.png)

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

![](https://elementorfa.ir/wp-content/uploads/2021/06/add-custom-js.png)

سپس در صفحه باز شده، باید کد 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.
});
});
```

![](https://elementorfa.ir/wp-content/uploads/2021/06/add-custom-js-code.png)

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



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