How to make a login form with Fluent Form

Login forms allow users to access their accounts on your website. If you allow user registration, they’ll need a way to log in. With Fluent Forms, you can easily create a custom login form using a small code snippet.

This guide will walk you through the process step by step.

Easily create a login form using the fluentform/before_insert_submission hook.

For a more powerful and secure login solution, we highly recommend our dedicated free plugin, Fluent Auth. It offers features like two-factor authentication, social logins, login security, detailed audit logs, and automatic login/logout redirects without needing any code.

Build Your Login Form #

Start by creating the login form that your users will use. In your Fluent Forms dashboard, click Add a New Form to begin. Click the New Blank Form option.

Add a minimum of two fields to your login form: an Email input field and a Password field (found under Advanced Fields).

Next, you’ll need to update the Name Attribute for each field so the code can identify them correctly. Click on the Email field, open the Advanced Options tab, and set the Name Attribute to email. Then do the same for the Password field, setting its Name Attribute to password.

When you’re done, save your form and copy its shortcode. You’ll need this shortcode later to display the form on a page and to connect it with the code snippet in the next step.

Create a New Page #

Go to the WordPress Dashboard, click on the Add New Page from the left sidebar.
Here, paste your form’s Shortcode and save it.

Add the Custom PHP Code #

After saving your login page, you’ll need to add some PHP code to make the form work. You can do this by editing your site’s functions.php file or by using FluentSnippets.

To set this up, add the code to your theme’s functions.php file. For safety, it’s best to use a child theme or a code snippets plugin so your changes aren’t lost when you update your theme.

Next, find the line that says if($form->id != 23) and replace 23 with your actual form ID. You can find this number in the shortcode you copied earlier.

Once you’ve updated the code, paste it into your functions.php file or your code snippets plugin and save the changes.

Note: In this example, No actual form submission will happen as we are redirecting the user before inserting the data

add_action('fluentform/before_insert_submission', function ($insertData, $data, $form) {

    if($form->id != 23) { // 23 is your form id. Change the 23 with your own login for ID
        return;
    }

    $redirectUrl = home_url(); // You can change the redirect url after successful login

    // if you have a field as refer_url as hidden field and value is: {http_referer} then
    // We can use that as a redirect URL. We will redirect if it's the same domain
    // If you want to redirect to a fixed URL then remove the next 3 lines
    if(!empty($data['refer_url']) && strpos($data['refer_url'], site_url()) !== false) {
        $redirectUrl = $data['refer_url'];
    }

    if (get_current_user_id()) { // user already registered
        wp_send_json_success([
            'result' => [
                'redirectUrl' => $redirectUrl,
                'message' => 'Your are already logged in. Redirecting now...'
            ]
        ]);
    }

    $email = \FluentForm\Framework\Helpers\ArrayHelper::get($data, 'email'); // your form should have email field
    $password = \FluentForm\Framework\Helpers\ArrayHelper::get($data, 'password'); // your form should have password field

    if(!$email || !$password) {
        wp_send_json_error([
            'errors' => ['Please provide email and password']
        ], 423);
    }

    $user = get_user_by_email($email);
    if($user && wp_check_password($password, $user->user_pass, $user->ID)) {
        wp_clear_auth_cookie();
        wp_set_current_user($user->ID);
        wp_set_auth_cookie($user->ID);
        /* user is not logged in.
        * If you use wp_send_json_success the the submission will not be recorded
        * If you remove the wp_send_json_success then it will record the data in fluentform
        * in that case you should redirect the user on form submission settings
        */
        wp_send_json_success([
            'result' => [
                'redirectUrl' => $redirectUrl,
                'message' => 'Your are logged in, Please wait while you are redirecting'
            ]
        ]);
    } else {
        // password or user don't match
        wp_send_json_error([
            'errors' => ['Email / password is not correct']
        ], 423);
    }
}, 10, 3);

Important: This method will not save any form entries in Fluent Forms. The code processes the login and stops the submission before the data is saved to your database. This is expected behavior for a login form.

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our support team. Thank you.