This tutorial covers all the major features of the DBP Affiliate Program Form block.
The DBP Affiliate Program Form block is a powerful Gutenberg block that creates customizable forms for collecting affiliate IDs from your users. This comprehensive tutorial will guide you through all its features and capabilities.
Getting Started
Adding the Block
- Create a new Page or Post
- In the for that Page or Post, click the “+” button to add a new block
- Search for “DBP Affiliate Program Form” or find it in the Widgets category
Initial Setup
When you first add the block, you’ll see a basic form with default settings. The block is immediately functional, but you can customize it extensively to match your needs and branding.
Core Settings
Form Settings Panel
Affiliate Program Name
- Purpose: Specify which affiliate program this form is for
- Required: Yes – the affiliate ID that is saved through this form is linked to a specific program
- Use case: When you have multiple affiliate programs and need enable users to saev their ID’s for each one
- Example: “Amazon Associates”, “ClickBank”, “Commission Junction”
Button Text
- Purpose: The text displayed on the submit button
- Default: “Save Changes”
- Tip: Use action-oriented text like “Update ID” or “Save Settings”
Placeholder Text
- Purpose: Helper text shown inside the input field
- Default: “Enter your affiliate ID”
- Tip: Be specific about what format you expect (e.g., “Enter your affiliate ID”)
Advanced Options
Input Class (Advanced): Add custom CSS classes to the input field. Only visible when custom styling is disabled.
Button Class (Advanced): Add custom CSS classes to the submit button. Only visible when custom styling is disabled.
Layout Options Panel
| Option | Description | Use Case |
|---|---|---|
| Form Layout | Stacked: Input above button (default) Inline: Input and button side by side | Choose based on design needs and available space |
| Form Alignment | Left, Center (default), or Right | Aligns the entire form within its container |
| Button Full Width | Makes button span full container width | For prominent call-to-action forms |
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 various styling panels
Use Custom Styling Toggle
- Enabled: Allows full customization of form appearance (default)
- Disabled: Uses default theme form styling
- Recommendation: Keep enabled for consistent branding
Input Field Styling
Colors
Background Color: Set the input field’s background color (Default: White #ffffff)
Text Color: Set the color of the text inside the input field (Default: Dark gray #333333)
Border Color: Set the color of the input field border (Default: Light gray #d5d5d5)
Border Styling
Border Width: Controls thickness of the input field border (Default: 1px)
Border Radius: Controls how rounded the input field corners are (Default: 4px)
Spacing
Padding: Inner spacing between text and input field edge (Default: 10px on all sides)
Margin: Outer spacing around the input field
Typography
Font Size: Controls the size of text inside the input field (Default: 16px)
Recommendation: 16px or larger for mobile accessibility
Button Styling
Colors
Background Color: Set the button’s background color (Default: WordPress blue #007cba)
Text Color: Set the color of the button text (Default: White #ffffff)
Border Color: Set the color of the button border
Typography
Font Size: Control the size of the button text (Default: 16px)
Font Weight: Normal, Bold, Light (300), Semi-Bold (600)
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 (default)
- 180° = Right to left
- 270° = Bottom to top
Border & Spacing
Border
Border Width: Controls thickness of the button border (set to 0 for no border)
Border Radius: Controls corner roundness (Default: 4px)
Spacing
Padding: Inner spacing between button text and button edge (Default: 10px top/bottom, 20px left/right)
Margin: Outer spacing around the button
Practical Examples
Example 1: Basic Affiliate Sign-up Form
- Add DBP Affiliate Program Form block
- Set button text to “Join Our Program”
- Set placeholder to “Enter your affiliate ID”
- Choose center alignment
- Use stacked layout for mobile-friendly design
Example 2: Inline Compact Form
- Add DBP Affiliate Program Form block
- Set form layout to “Inline”
- Set button text to “Update”
- Set placeholder to “Affiliate ID”
- Adjust button padding for better proportions
Example 3: Prominent Call-to-Action Form
- Add DBP Affiliate Program Form block
- Enable “Button Full Width”
- Use gradient background (brand colors)
- Increase button padding significantly
- Set bold font weight
- Center align the form
Example 4: Branded Form Design
- Add DBP Affiliate Program Form block
- Set input background to light brand color
- Set button to primary brand color
- Match border radius to your site theme
- Use brand-consistent typography
Example 5: Multi-Program Setup
- Add multiple DBP Affiliate Program Form blocks
- Set different “Affiliate Program Name” for each
- Use different button colors to distinguish programs
- Add descriptive text above each form
Best Practices
Design
- Consistency: Use the same form styles across your site
- Contrast: Ensure text is readable against backgrounds
- Touch-Friendly: Make buttons at least 44px tall for mobile users
- Visual Hierarchy: Make the button stand out from the input field
Content
- Clear Labels: Use descriptive placeholder text
- Action-Oriented: Use button text that describes what happens next
- Help Text: Consider adding explanatory content above or below the form
- Error Handling: Provide clear instructions for ID format requirements
User Experience
- Mobile Responsive: Test forms on various screen sizes
- Loading States: Ensure forms provide feedback when submitted
- Accessibility: Maintain proper color contrast ratios
- Logical Flow: Place forms in logical locations within your content
Security
- Data Validation: Ensure proper server-side validation
- Privacy: Be transparent about how affiliate IDs are used
- Spam Protection: Consider adding CAPTCHA for high-traffic sites
Troubleshooting
Common Issues
| Problem | Solution Steps |
|---|---|
| Form Not Appearing | • Check: Ensure the block is properly added to the page • Check: Verify no conflicting CSS is hiding the form |
| Styling Not Applied | • Check: Ensure “Use Custom Styling” is enabled • Check: Clear any caching plugins to see changes • Check: Verify no theme CSS is overriding your styles |
| Button Not Responsive | • Check: Test the form functionality separately from styling • Check: Ensure the underlying plugin shortcode is working • Check: Verify JavaScript isn’t conflicting |
| Mobile Display Issues | • Check: Test on actual mobile devices, not just browser resize • Check: Consider using stacked layout for narrow screens • Check: Verify button and input sizes are touch-friendly |
Getting Help
If you encounter issues not covered in this tutorial:
- Check your plugin settings and configuration
- Verify your plugin is up to date
- Test with a default theme to isolate theme conflicts
- Contact plugin support with specific error details
Advanced Tips
CSS Customization
For advanced users, you can add custom CSS to further enhance the form:
/* Custom hover effects */
.dbp-affiliate-program-form input[type="text"]:focus {
box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.2);
outline: none;
}
.dbp-affiliate-program-form input[type="submit"]:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Custom loading state */
.dbp-affiliate-program-form.loading input[type="submit"] {
opacity: 0.6;
cursor: not-allowed;
}Form Optimization
Test different form configurations to optimize conversions:
- Try both stacked and inline layouts
- Test different button colors and text
- Experiment with form placement on your pages
- Monitor form submission rates and adjust accordingly
Integration Tips
- Multiple Programs: Use different forms for different affiliate programs
- User Roles: Consider showing different forms based on user permissions
- Analytics: Track form interactions to understand user behavior
- Follow-up: Set up email notifications or redirects after form submission
Form Layout Examples
Stacked Layout (Default)
[Enter your affiliate ID ]
[ Join Program ]Inline Layout
[Enter ID] [Join Program]Full-Width Button
[Enter your affiliate ID ]
[ Join Our Program ]Experiment with different settings to create forms that match your brand and convert well for your specific audience!