This tutorial covers all the major features of the DBP Lead Form block.
The DBP Lead Form block is a powerful Gutenberg block that creates customizable lead capture forms with multiple email service integrations. 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 Lead Form” or find it in the Widgets category
- Click to add the block to your post or page
Initial Setup
Important: The lead form will work immediately after adding it, but you should configure email service integrations in the DBP plugin settings for the form submissions to be collected properly.
Core Settings
Form Field Settings Panel
First Name Text
- Purpose: Customize the label for the first name field
- Default: “First Name:”
- Example: “Your First Name”, “Name”, “Given Name”
Email Text
- Purpose: Customize the label for the email address field
- Default: “Email Address:”
- Example: “Your Email”, “Email”, “Contact Email”
Button Text
- Purpose: The text displayed on your submit button
- Default: “Submit”
- Tip: Use action-oriented text like “Get Started,” “Subscribe Now,” or “Download Free Guide”
Redirect URL
- Purpose: Where users go after successful form submission
- Default: Empty (stays on same page)
- Example: “https://yoursite.com/thank-you”
- Use Case: Thank you pages, download pages, special offers
Form Layout Options Panel
| Option | Purpose | Use Case | Notes |
|---|---|---|---|
| Use Placeholders | Shows field labels inside input fields instead of above them | Cleaner, more modern appearance | May reduce accessibility for some users |
| Stack Fields | Fields appear vertically instead of side by side | Better for mobile, narrow containers | Enabled by default |
| Field Order | Controls the order fields appear in the form | Customize field sequence | Format: first_name,email,custom_field |
| Redirect with Referral ID | Includes referral tracking in redirect URL | Affiliate and referral programs | Requires referral system setup |
Email Service Integration Panel
AWeber Integration
- Setup: Configure AWeber API in DBP settings first
- Selection: Choose from dropdown of available AWeber lists
- Result: New subscribers automatically added to selected list
Mailchimp Integration
- Setup: Configure Mailchimp API in DBP settings first
- Selection: Choose from dropdown of available audiences
- Result: Contacts automatically added to selected audience
GetResponse Integration
- Setup: Configure GetResponse API in DBP settings
- Selection: Choose from available campaigns
- Features: Supports automation and segmentation
Additional Services
- Systeme.io: All-in-one marketing platform
- MailMint: WordPress email marketing plugin
- MailWizz: Self-hosted email marketing
- GoHighLevel: CRM and marketing automation
Styling Your 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
Use Custom Style Toggle
- Enabled: Allows full customization of form appearance
- Disabled: Uses default theme form styling
- Recommendation: Enable for consistent branding and control
Form Container Styling
Form Width & Alignment
- Width: 100%, 500px, 80%, etc.
- Alignment: Left, Center, Right
- Tip: Center alignment with fixed width works well
Container Colors
- Background: Form container background color
- Text: Default text color for labels
- Border: Container border color
Container Spacing
- Padding: Internal spacing inside form container
- Margin: External spacing around form
- Border Radius: Corner rounding
Input Field Styling
Input Colors
- Background: Input field background color
- Text: Text color inside input fields
- Border: Input field border color
Input Dimensions
- Width: Control input field width
- Padding: Internal spacing (affects height)
- Margin: Spacing between fields
Input Border & Typography
- Border Width: Thickness of input borders (set to 0 for no border)
- Border Radius: Corner rounding for input fields
- Font Size: Text size inside input fields
Button Styling
Button Colors
- Background: Button background color
- Text: Button text color
- Border: Button border color
- Tip: Ensure good contrast for accessibility
Button Dimensions
- Width: Auto, 100%, or custom (e.g., 200px)
- Alignment: Left, Center, Right
- Padding: Internal spacing that affects button size
Button Gradient Background
- Enable: Creates a gradient background instead of solid color
- Start Color: The beginning color of the gradient
- End Color: The ending color of the gradient
- Gradient Angle: Direction of the gradient (0-360 degrees)
- 0° = Left to right
- 90° = Top to bottom
- 180° = Right to left
- 270° = Bottom to top
Typography & Spacing
Button Typography
- Font Size: Button text size (16px recommended minimum)
- Font Weight: Normal, Bold, Light, Semi-Bold
- Accessibility: Ensure text is readable
Border & Radius
- Border Width: Thickness of borders (0 for no border)
- Border Radius: Corner rounding
• Higher values = more rounded
• 0 for sharp corners
• 50% for pill-shaped elements
Practical Examples
Example 1: Basic Newsletter Signup
- Add DBP Lead Form block
- Change button text to “Subscribe to Newsletter”
- Select your Mailchimp list
- Enable placeholders for cleaner look
- Set form width to 400px and center align
Example 2: Lead Magnet Download
- Add DBP Lead Form block
- Set button text to “Download Free Guide”
- Configure redirect to thank you page
- Select AWeber list for lead magnet subscribers
- Use gradient button for visual appeal
Example 3: Mobile-Optimized Form
- Add DBP Lead Form block
- Enable “Stack Fields” for vertical layout
- Set form width to 100% for full mobile width
- Increase button padding for easier tapping
- Use larger font sizes (18px+) for readability
Example 4: Custom Fields Form
- Configure custom fields in DBP settings first
- Add DBP Lead Form block
- Adjust field order:
first_name,email,phone,company - Stack fields for better organization
- Select appropriate email service integration
Best Practices
Design
- Contrast: Ensure text color contrasts well with background colors
- Consistency: Use the same form styles across your website
- Mobile First: Design for mobile devices, then scale up
- Spacing: Add adequate spacing between form elements
Content
- Clear Labels: Use descriptive field labels and button text
- Value Proposition: Clearly explain what users get for subscribing
- Privacy: Include privacy policy links where appropriate
- Testing: Test your forms regularly to ensure they work
Performance & Optimization
- Minimal Fields: Only ask for essential information (name and email)
- Strategic Placement: Position forms where users are most engaged
- A/B Testing: Try different designs and text to improve conversions
- Analytics: Monitor form performance and submission rates
Troubleshooting
Common Issues
| Problem | Solution Steps |
|---|---|
| Form Not Submitting | • Check: Email service integration is configured in DBP settings • Check: At least one email service is selected in block settings • Check: Required fields are properly filled by users |
| Styling Not Applied | • Check: “Use Custom Style” is enabled in block settings • Check: Clear caching plugins after making changes • Check: Theme CSS conflicts |
| Email Service Integration Issues | • Check: API credentials are valid in DBP settings • Check: Selected lists exist in your email service • Check: Service-specific configuration requirements |
| Custom Fields Not Showing | • Check: Custom fields are configured in DBP settings • Check: Field order includes custom field names • Check: Field IDs match configuration |
| Mobile Display Issues | • Check: “Stack Fields” is enabled for mobile • Check: Form width is appropriate for mobile (100% or auto) • Check: Font sizes are large enough for mobile devices |
Getting Help
If you encounter issues not covered in this tutorial:
- Check the DBP plugin settings for proper email service configuration
- Verify your email service provider’s API status
- Test with a simple form configuration first
- Check browser console for JavaScript errors
- Contact plugin support with specific error details
Advanced Tips
reCAPTCHA Integration
When Google reCAPTCHA is enabled in your DBP settings:
- reCAPTCHA widget automatically appears on forms
- Helps prevent spam and automated submissions
- Users must complete challenge before submission
- Configure site keys in DBP settings for proper functionality
Conversion Optimization
Test different elements to optimize conversion rates:
- Try different button colors and contrast levels
- Test various button text options and calls-to-action
- Experiment with form layout (stacked vs. side-by-side)
- Monitor submission rates and email service analytics
- Test different field combinations and requirements
CSS Customization
For advanced users, you can add custom CSS classes to further customize appearance:
.dbp-lead-form-block input[type="submit"] {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transform: translateY(-2px);
transition: all 0.3s ease;
}
.dbp-lead-form-block input[type="submit"]:hover {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dbp-lead-form-block input[type="text"],
.dbp-lead-form-block input[type="email"] {
transition: border-color 0.3s ease;
}
.dbp-lead-form-block input[type="text"]:focus,
.dbp-lead-form-block input[type="email"]:focus {
border-color: #007cba;
outline: none;
}Multi-Service Integration
You can integrate with multiple email services simultaneously:
- Select different services for different list purposes
- Use one service for newsletters, another for lead magnets
- Segment your audience across multiple platforms
- Test different services for performance and deliverability
Integration Setup Guide
Prerequisites
Before using the DBP Lead Form block, ensure you have:
- Active email service accounts (Mailchimp, AWeber, etc.)
- API credentials configured in DBP plugin settings
- Email lists/audiences created in your email service
- DBP plugin properly installed and activated
Quick Integration Checklist
| Service | Required Setup | DBP Setting Location | Notes |
|---|---|---|---|
| Mailchimp | API Key | DBP Settings → Integrations → Mailchimp | Create API key in Mailchimp account settings |
| AWeber | OAuth Authorization | DBP Settings → Integrations → AWeber | Follow OAuth flow to connect account |
| GetResponse | API Key | DBP Settings → Integrations → GetResponse | Generate API key in GetResponse account |
| MailMint | Plugin Installation | Automatic detection | MailMint plugin must be active |
| Systeme.io | API Key | DBP Settings → Integrations → Systeme | Get API key from Systeme.io settings |
| MailWizz | Plugin + API | DBP Settings → Integrations → MailWizz | Requires MailWizz WordPress plugin |
Form Analytics & Tracking
Measuring Success
Key Metrics to Track
- Conversion Rate: Form views vs. submissions
- Email Open Rates: How many people open your emails
- Click-Through Rates: Email engagement levels
- Unsubscribe Rate: Quality of your email list
Optimization Strategies
- A/B Test: Different button colors and text
- Placement Testing: Try forms in different page locations
- Field Reduction: Test fewer vs. more form fields
- Incentive Testing: Offer different lead magnets
Final Tips for Success
Remember These Key Points
- Start Simple: Begin with basic forms and add complexity as needed
- Test Everything: Always test your forms before publishing
- Mobile Matters: Ensure forms work well on all devices
- Monitor Performance: Regular check your email service analytics
- Keep Iterating: Continuously improve based on data and feedback
Experiment with different settings and configurations to find what works best for your audience and goals. The DBP Lead Form block provides powerful tools for building effective lead capture forms that integrate seamlessly with your email marketing workflow!