Using Spectra Login Form Block

On your WordPress website, you have the ability to share different types of content like blog posts, announcements, etc. This content can be seen by anyone who visits your website.

Now, imagine you have content that you want to display on your website like a giveaway post, but you only want it to be seen by a specific group of individuals, such as the regular visitors of your site.

To make this work, you can ask these people to join your website using Spectra’s Registration block and make their own accounts.

After they’ve done that, they will be registered as users and they can log into their accounts as logged-in users.

To help them get into their accounts, you can create a login form using Spectra’s login block.

And this document has all the important information about the Login Form block, explained in a detailed and clear way.

What is Login Form Block?

A login form block allows users to log in to a website. It typically consists of two input fields, one for the username and one for the password.

The user enters their credentials and clicks on a button to log into the website. The form is then processed by the website, and if the credentials are valid, the user will get logged in.

Here are some of the benefits of using a login form block:

• It is a simple and effective way for users to log in to a website.
• It is easy to add and is highly customizable.
• You can place the login form on any page or post it on your website.
• People can reset their password using the login block if required.
• People, who are not registered, can register using a related block – the registration block.

Most importantly, you can hide/display content to users based on their login state.

For example – You can hide or show a welcome video on your website only to people who are logged in.

How to Use the Login Form Block?

You can follow the below-enlisted steps on how to use the Login Form block in Spectra:

• Go to Spectra Dashboard > Block/Extension > Pro > Find Login Block. Check whether the ‘Login Form’ Block is enabled or not. If disabled, enable it.

• Once enabled, you can go to Page/Post and drag and drop the Login Form Block.

• Once you drop the login form block, you see a lot of options available inside general settings and style settings.

General Settings for the Login Form Block

Under the “General Settings” section of the Login Form Block, you’ll find options to customize the following things:

• Login Form
• Login Button
• Success/Error Message
• Redirects
• Google reCAPTCHA

Login Form:

In the “General Settings” section, you have the ability to fine-tune various aspects of the login form. You can personalize the placeholders for both the username and password fields, creating user-friendly cues that guide individuals while filling out the form.

Additionally, you can define the label for the “Forgot Password” link, ensuring that users easily understand its purpose.

For a cleaner design, there’s an option to toggle the visibility of icons associated with the login form. Moreover, you can incorporate a toggle button that reveals registration information.

Login Button

You can adjust the styling and text of the login button to ensure it aligns with your website’s theme.

Success/Error Message

You can customize the messages displayed to users upon successful login or encountering an error.

Redirects

You can set up redirection destinations after login, providing a seamless transition for users.

• Logged In Message Toggle Button: Enable this toggle to display the “Logged In Message” in place of this block on the front end when a user who is already logged in visits the page.
• Redirect After Login: Define the destination to which users will be directed after successfully logging in, ensuring a smooth transition to relevant content.
• Redirect After Logout: Set up the page or location users will be directed to upon logging out, enhancing the overall user experience.

Google reCAPTCHA

You can integrate Google’s reCAPTCHA security feature to enhance login form protection against spam and unauthorized access.

That’s it!

Then you can preview your Login Form on the front end to confirm that it looks as you want it to.

We hope this article has been helpful. If you have any questions, please feel free to leave a comment below.