---
title: "طراحی فرم ورود با فرم ساز المنتور و افزونه Action Pack"
url: "https://elementorfa.ir/action-pack-login-form/"
type: "post"
published: "2020-07-12T16:50:32+04:30"
modified: "2023-07-26T10:50:15+03:30"
author: "المنتور فارسی"
---

5/5 - (16 امتیاز)

در آموزش های قبلی، نحوه طراحی فرم ثبت نام با استفاده از فرم ساز المنتور را توضیح دادیم. می توانید آموزش مرتبط را از طریق لینک [ایجاد فرم ثبت نام با فرم ساز المنتور و افزونه Action Pack](https://elementorfa.ir/action-pack-register-form/) مشاهده کنید.

حالا در این مقاله، قصد داریم تا فرم ورود را توسط فرم ساز المنتور طراحی کنیم. برای طراحی فرم ورود به 2 افزونه زیر نیاز داریم:

- [افزونه المنتور پرو](https://elementorfa.ir/%d8%ae%d8%b1%db%8c%d8%af-%d8%a7%d9%81%d8%b2%d9%88%d9%86%d9%87-%d8%a7%d9%84%d9%85%d9%86%d8%aa%d9%88%d8%b1-%d9%be%d8%b1%d9%88/)
- [افزونه Action Pack](https://elementorfa.ir/item/%d8%a7%d9%81%d8%b2%d9%88%d9%86%d9%87-action-pack/)

## طراحی فرم ورود با فرم ساز المنتور

### ایجاد پاپ آپ فرم ورود

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

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/action-login-form.png)

در صفحه پاپ آپ، به تنظیمات المنتور رفته و عرض پاپ آپ را مشخص کنید.

ما در اینجا یک پاپ آپ با عرض **940 پیکسل** ایجاد کردیم.

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/elementor-login-form-popup.png)

صفحه را به 2 ستون مجزا تقسیم می کنیم. در ستون سمت راست، یک تصویر قرار میدیم. در ستون سمت چپ**ویجت فرم** المنتور.

![](https://elementorfa.ir/wp-content/uploads/2020/07/elementor-login-form-design.png)

بر روی ویجت فرم کلی کنید و فیلد های زیر را به ترتیب ایجاد کنید:

### ایحاد فیلد های ورود

#### فیلد نام کاربری

یک فیلد از نوع **متن** ایجاد کرده و برچسب **نام کاربری** را وارد کنید.

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/usernamer-login-form.png)

#### فیلد رمز عبور

با زدن بر روی دکمه **افزودن آیتم**، یک فیلد دیگر ایجاد کنید. نوع فیلد را روی**کلمه عبور** قرار داده و یک برچسب برای فیلد کلمه عبور بنویسید.

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/elementor-login-password.png)

#### فیلد مرا به خاطر بسپار

برای ایجاد دکمه**مرا به خاطر بسپار**، یک فیلد جدید اضافه کرده و نوع فیلد را روی **پذیرش** قرار دهید.

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/remember-action-form-e1594489223491.png)

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

### واکنش بعد از ارسال

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

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/login-action-form.png)

بعد از انتخاب گزینه ورود، یک تب جدید با همین نام به تنظیمات اضافه می شود.

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

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/select-username-action-pack.png)

در فیلد دوم قسمت **ورود با استفاده**، 3 گزینه دارد.

- **Password**: ورود با رمز عبور کاربر
- **OTP**: ورود با استفاده از کد ارسالی به ایمیل یا SMS
- **OTP & Password**: ورود با استفاده از رمز عبور کاربر و کد ارسالی به ایمیل یا SMS

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/otp-action-pack-login.png)

در اینجا روی گزینه اول یعنی Password قرار می دهیم. بعد از انتاخب این گزینه، فیلد سوم، گزینه **رمز عبور** که ساختید را انتخاب می کنید.

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/select-password-action-pack-e1594488343416.png)

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

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/remember-action-form-elementor.png)

گزینه بعدی **ریدایرکت بعد از ورود** می باشد. با روشن کردن این گزینه می توانید برای هر نقش کاربری در هنگام ورود یک آدرس مجزا دهید.

با روشن کردن گزینه **مخفی کردن فرم ورود**، کاربران وارد شده دیگر این فرم را مشاهده نخواهند کرد. توجه کنید پاپ آپ همچنان نشان داده خواهد شد و فقط فرم ورود نمایش داده نمی شود.

حالا می توانید استایل فرم ورود را به دلخواه تغییر دهید و پاپ آپ را ذخیره کنید.

![فرم ورود با المنتور](https://elementorfa.ir/wp-content/uploads/2020/07/login-form-elementor.png)

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