آموزش ویدئویی ساخت فرم ورود و ثبت نام با المنتور

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

یک فرم ورود با یک پنجره بازشو ایجاد کنید

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

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

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

برای دریافت Elementor Pro وارد شوید کانال افزونه های اصلی سئو بلند شو

مانند تصویر زیر از داشبورد وردپرس به Elementor رفته و روی Manage Elements کلیک کنید. در صفحه باز شده به دنبال آیتم ورود و ابزارک بگردید و از فعال بودن نور آن مطمئن شوید.

حال با انتخاب و قرار دادن ویجت ورود در صفحه، فرم ورود ما ایجاد شده است. مطابق تصویر زیر می توانید از قسمت تنظیمات ویجت تنظیمات لازم را انجام دهید. ما 3 عنوان فرم ورود قابل تنظیم داریم:

• فیلدهای فرم
• دکمه
• گزینه های اضافی

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

دکمه را به فرم وصل کنید

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

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

یک فرم ثبت نام در المنتور ایجاد کنید

برخلاف فرم ورود، هیچ فرم ثبت نام خارج از جعبه در المنتور وجود ندارد و باید آن را به صورت دستی ایجاد کنیم. برای انجام این کار، به مقداری کد و ابزارک فرم Elementor و مقداری دقت نیاز داریم. در این مرحله، نام‌هایی که به فرم، برچسب‌ها و شناسه می‌دهیم بسیار مهم هستند و باید دقیقاً مشابه آنچه در بخش بعدی می‌بینید باشند.

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

برای ایجاد یک فرم ثبت نام، ابتدا یک ماژول فرم اجرایی را در جایی که می خواهید فرم ظاهر شود قرار دهید. فرم شما باید شامل فیلدهای زیر باشد:

• نام
• نام خانوادگی
• ایمیل
• رمز عبور

حال باید طبق تصویر موارد را پر کنید.

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

با توجه به تصویر بالا مقادیر زیر را برای ID تنظیم کنید:

• نام: first_name
• نام خانوادگی: نام خانوادگی
• ایمیل: ایمیل
• رمز عبور: رمز عبور

در این مرحله، باید قطعه کد را به عنوان یک افزونه در وردپرس خود وارد کنیم. برای این کار ابتدا کد زیر را کپی کرده و در فایلی با پسوند php قرار دهید. نام این فایل باید Elementor-Form-Create-New-User باشد و در نهایت باید آن را فشرده کنید. مطمئن شوید که فایل را آرشیو کرده اید و نه rar. زیرا فایل rar در وردپرس بارگذاری نمی شود.

get_form_settings('form_name');
    
    //در این بخش به جای Sign Up باید نام فرم در المنتور را وارد کنید
    if ('Sign Up' !== $form_name) {
        return;
    }
    
    $form_data  = $record->get_formatted_data();
 
    $username   = $form_data['Email'];
    $email      = $form_data['Email']; 
    $password   = $form_data['Password']; 

    
    $user = wp_create_user($username,$password,$email); 

    if (is_wp_error($user)){ 
        $ajax_handler->add_error_message("مشکلی در ثبت نام به وجود آمده است : ".$user->get_error_message()); 
        $ajax_handler->is_success = false;
        return;
    }

    // اطلاعات ضروری برای ثبت نام و تکمیل پروفایل
    $first_name   =$form_data["First Name"]; 
    $last_name    =$form_data["Last Name"];
    wp_update_user(array("ID"=>$user,"first_name"=>$first_name,"last_name"=>$last_name)); 

    // فیلد های اضافی برای بخش ثبت نام
    $user_phone   =$form_data["Phone"]; 
    $user_bio     =$form_data["Bio"];
    update_user_meta($user, 'user_phone', $user_phone);    
    update_user_meta($user, 'user_bio', $user_bio); 

    /* به صورت خودکار بعد از ثبت نام به صفحه اصلی هدایت و وارد سایت می شود */
    $creds= array(
        "user_login"=>$username,
        "user_password"=>$password,
        "remember"=>true
    );
    
    $signon = wp_signon($creds); 
    
    if ($signon) {
        $ajax_handler->add_response_data( 'redirect_url', get_home_url() );
    }
}

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

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

توجه داشته باشید که این فرم ورود و ثبت نام تا حد امکان برای شما ساده ساخته شده است تا هرکسی بتواند به راحتی وارد سایت خود شده و ثبت نام کند و می توانید از ابزارها و افزونه هایی مانند Powerpack و Digits برای ایجاد یک ثبت نام حرفه ای استفاده کنید. اما به یاد داشته باشید که استفاده از افزونه های زیاد باعث کندی سایت شما می شود.