The Login Form block allows you to add a fully functional WordPress login form directly to any SeedProd page. This block is ideal for building custom login pages, member portals, and access-restricted areas without relying on the default WordPress login page.
The block includes username and password fields, a login button, a “Remember Me” checkbox, a lost password link, and full control over field styling, typography, and colors — all customizable without writing code.
Adding the Login Form Block to Your Pages
Follow these steps to add a Login Form block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Login Form block into the desired section of your page.
Step 2: Configure Content Settings
Once added, click on the Login Form block to open its settings. The Content tab is organized into four sections: Fields, Button, Success Action, and Additional Options.
Fields:
- Label for User field: Customize the label text shown above the username or email input field.
- Placeholder for User field: Set the placeholder text shown inside the username or email input field when it is empty.
- Label for Password field: Customize the label text shown above the password input field.
- Placeholder for Password field: Set the placeholder text shown inside the password input field when it is empty.
Button:
- Button Text: Customize the label displayed on the login submit button.
Success Action:
- Redirect URL: Enter a URL to redirect the user to after a successful login. Leave blank to use the default WordPress redirect behavior.
- Logged In Text: Enter the message displayed in place of the login form when the user is already logged in. Use
{user}as a placeholder and it will be replaced by the user’s display name.
Additional Options:
- Remember User Label: Customize the label text for the “Remember Me” checkbox (e.g., “Remember Me”).
- Lost Password Link Text: Customize the text for the lost password link shown below the form (e.g., “Lost your password?”).
Step 3: Choose a Template (Optional)
The Templates tab offers a set of pre-designed field style presets. Click any template to instantly apply a combination of field background, border, and radius settings. Available presets include Light, No Border, Wide Border, Grey, Dark, Bottom Border, and Transparent input field styles.
Step 4: Customize the Design
In the Advanced tab, you can fine-tune the colors, typography, and sizing of all form elements. The tab is organized into four sections: Colors, Form, Fields, and Button.
Colors:
- Link Color: Set the color of the “Remember Me” and lost password links.
- Label Text Color: Set the color of the field label text.
- Field Text Color: Set the color of the text typed into the input fields.
- Field Background Color: Set the background color of the input fields.
- Field Border Color: Set the border color of the input fields.
- Button Background Color: Set the background color of the login button.
Form:
- Label Font: Choose the font family and font variant for the field labels.
- Label Text Size: Set the font size of the field labels from 10 to 30px.
- Row Spacing: Set the vertical spacing between form rows from 0 to 30px.
- Alignment: Set the horizontal alignment of the entire form — Left, Center, or Right.
Fields:
- Field Font: Choose the font family and font variant for the text inside the input fields.
- Field Size: Set the overall size of the input fields — Small, Medium, or Large.
- Field Width: Set the width of the input fields as a percentage from 10 to 100%.
- Label Spacing: Set the spacing between the label and the input field from 0 to 30px.
- Field Border Width: Set the border width for each side of the input fields (Top, Right, Bottom, Left) independently.
- Field Border Radius: Set the corner radius of the input fields from 0 to 50px.
Button:
- Button Font: Choose the font family and font variant for the login button text.
- Button Size: Set the overall size of the login button — Small, Medium, or Large.
- Button Border Radius: Set the corner radius of the login button from 0 to 50px.
You can also control spacing, custom CSS classes, device visibility, and entrance animations from the remaining sections in the Advanced tab.
Step 5: Save Your Changes
Once you have finished configuring the Login Form block and customizing its appearance, make sure to save your work.
You’ve successfully added a Login Form block to your page! A well-designed login form builds trust and makes it easy for members to access your content. Use the Templates tab for quick field styling presets, or dive into the Advanced tab to match every color, font, and size to your brand.