This tutorial covers all the major features of the DBP Login Form block.
The DBP Login Form block is a powerful Gutenberg block that creates customizable WordPress login forms with extensive styling options and user experience features. This comprehensive tutorial will guide you through all its features and capabilities.
Getting Started
Adding the Block
- In the WordPress editor, click the “+” button to add a new block
- Search for “DBP Login Form” or find it in the Widgets category
- Click to add the block to your post or page
Initial Setup
Important: The login form will work immediately after adding it. Users who are already logged in will be automatically redirected to the specified redirect URL.
Core Settings
Form Content Settings Panel
Button Text
- Purpose: Text displayed on the login submit button
- Default: “Log In”
- Examples: “Sign In”, “Login”, “Enter”, “Access Account”
Redirect URL
- Purpose: Where users go after successful login
- Default: Home page
- Examples: “/dashboard”, “/member-area”, “/account”
- Note: Already logged-in users are redirected immediately
Field Placeholders
- Username Placeholder: Text shown in username field
- Password Placeholder: Text shown in password field
- Defaults: “Username” and “Password”
- Tip: Use clear, descriptive placeholder text
Form Display Options Panel
| Option | Purpose | Default | Notes |
|---|---|---|---|
| Show Labels | Display field labels above inputs | Enabled | Improves accessibility and clarity |
| Remember Me | Show “Remember Me” checkbox | Enabled | Allows users to stay logged in longer |
| Remember Me Label | Text for the remember me checkbox | “Remember Me” | Customize the checkbox label text |
Form Layout Settings Panel
Form Width & Alignment
- Width: 100%, 400px, 80%, etc.
- Alignment: Left, Center, Right
- Tip: Center alignment with fixed width works well
Custom CSS Classes
- Purpose: Add custom CSS classes to the form
- Use Case: Advanced styling and theme integration
- Example: “my-custom-login-form”
Styling Your Login Form
Accessing Style Settings
- With the block selected, look for the Settings Panel on the right
- Click the “Styles” tab (next to the “Block” tab)
- Open the style panels you want to customize
Form Container Styling
Container Colors
- Background: Form container background color
- Text: Default text color for labels
- Use Case: Create branded login forms
Container Borders
- Border Color: Container border color
- Border Width: Thickness of container border
- Border Radius: Corner rounding
- Individual Sides: Style each border side separately
Container Spacing
- Padding: Internal spacing inside form container
- Margin: External spacing around form (auto for centering)
- Tip: Use padding to give the form breathing room
Input Field Styling
Input Colors
- Background: Input field background color
- Text: Text color inside input fields
- Defaults: White background, dark text
Input Borders
- Border Color: Input field border color
- Border Width: Thickness of input borders
- Border Radius: Corner rounding for inputs
- Individual Sides: Style each input border side separately
Input Spacing & Typography
- Padding: Internal spacing inside input fields
- Margin: External spacing between input fields
- Font Size: Text size inside input fields
- Width: Input field width (100% recommended)
Button Styling
Button Colors
- Background: Button background color
- Text: Button text color
- Defaults: WordPress blue background, white text
Button Dimensions
- Width: Auto (default), 100%, or custom width
- Padding: Internal spacing that affects button size
- Margin: External spacing around button
Button Border & Typography
- Border: Button border color, width, style, and radius
- Individual Sides: Style each button border side separately
- Font Size: Button text size
- Font Weight: Button text weight (normal, bold, etc.)
Practical Examples
Example 1: Simple Login Form
- Add DBP Login Form block
- Keep default button text: “Log In”
- Set redirect to dashboard: “/wp-admin/”
- Enable labels and remember me
- Use default styling for quick setup
Example 2: Member Area Login
- Add DBP Login Form block
- Change button text to “Access Member Area”
- Set redirect to member page: “/members/”
- Customize placeholders: “Email or Username”
- Style with brand colors
Example 3: Minimalist Form
- Add DBP Login Form block
- Disable “Show Labels” for cleaner look
- Use clear placeholders: “Username”, “Password”
- Remove borders from inputs
- Use minimal padding and spacing
Example 4: Styled Card Form
- Add DBP Login Form block
- Set form width to 400px and center align
- Add container background color and padding
- Add container border and rounded corners
- Style button with full width
Best Practices
User Experience
- Clear Labels: Use descriptive field labels and placeholders
- Remember Me: Enable for better user convenience
- Redirects: Send users to relevant pages after login
- Button Text: Use action-oriented, clear language
Design
- Accessibility: Ensure good contrast and readable text
- Consistency: Match your site’s design and branding
- Mobile: Test on mobile devices for optimal experience
- Spacing: Use adequate spacing for better usability
Security & Performance
Built-in Features
- WordPress Integration: Uses standard WordPress login system
- Security: Inherits WordPress security features
- Auto-Redirect: Logged-in users are automatically redirected
- Clean HTML: Prevents paragraph tag wrapping issues
Troubleshooting
| Problem | Solution Steps |
|---|---|
| Form Not Submitting | • Check: WordPress login functionality is working • Check: No JavaScript errors in browser console • Check: Form is not inside another form element |
| Styling Not Applied | • Check: Clear caching plugins after making changes • Check: Theme CSS conflicts • Check: Individual border sides settings are correct |
| Redirect Not Working | • Check: Redirect URL is correctly formatted • Check: Target page exists and is accessible • Check: No other plugins interfering with redirects |
| Auto-Redirect Issues | • Check: User is actually logged in • Check: No JavaScript errors preventing redirect • Check: Redirect URL is properly escaped |
| Remember Me Not Working | • Check: WordPress cookies are enabled • Check: Site SSL configuration • Check: WordPress login cookie settings |
Advanced Styling Tips
Individual Border Sides
You can style individual border sides for containers, inputs, and buttons:
- Use Case: Bottom border only for underlined inputs
- Use Case: Left border accent for form containers
- Use Case: Top border for button highlights
- Settings: Enable “Individual Sides” and configure each side
Responsive Design
Tips for mobile-friendly login forms:
- Form Width: Use percentage or max-width for flexibility
- Touch Targets: Ensure adequate padding for buttons
- Font Size: Use at least 16px to prevent zoom on iOS
- Spacing: Increase spacing between elements on mobile
Final Tips for Success
Remember These Key Points
- Test Functionality: Always test login process after setup
- User-Friendly: Use clear labels and helpful placeholders
- Secure by Default: Inherits WordPress security features
- Mobile Responsive: Test on various devices and screen sizes
- Brand Consistency: Style to match your site’s design
The DBP Login Form block provides a powerful, flexible way to create custom login forms that integrate seamlessly with WordPress. Use the extensive styling options to create forms that match your brand and provide an excellent user experience!