The Newsletter Block is a comprehensive subscription form component designed to help you build and grow your email list effectively. This block offers flexible layout options, extensive customization capabilities, and seamless integration with popular email marketing platforms to create professional newsletter signup forms that convert visitors into subscribers.
Key Features
The Newsletter Block includes a robust set of features for email list building:
Form Components: Email field, optional name field, and customizable submit button
Layout Styles: Choose between Stacked and Inline form layouts
Content Management: Customizable title, description, placeholders, and response messages
Platform Integration: Direct integration with major email marketing services
Visual Customization: Complete control over colors, typography, borders, and spacing
Responsive Design: Fully responsive with device-specific controls
Interactive States: Normal, hover, and focus states for all form elements
Animation Effects: Choose from various entrance animations
Form Validation: Built-in validation with customizable success and error messages
Accessibility: Proper form labels and keyboard navigation support
Adding the Newsletter Block
To add a Newsletter Block to your page:
- Click the “+” icon to open the block inserter
- Search for “Newsletter” or navigate to the “DigiBlocks” category
- Click on the “Newsletter” block to add it to your page
- The block will appear with default content that you can customize
Important: Before using the Newsletter block, you must configure your email marketing platform in the DigiBlocks Settings. The block will display a warning notice until platform integration is set up.
Platform Integration Setup
Configuring Email Marketing Platforms
The Newsletter block requires platform configuration in DigiBlocks Settings > Newsletter Settings:
- Navigate to your WordPress admin panel
- Go to DigiBlocks > Settings
- Scroll to the Newsletter Settings section
- Select your preferred email marketing platform
- Enter your API credentials and configuration details
- Save the settings
Supported Platforms
The Newsletter block integrates with major email marketing services:
MailChimp: Requires API key, Audience ID, with optional tags and double opt-in settings
ActiveCampaign: Requires API URL, API key, List ID, with optional tag management
Brevo (formerly Sendinblue): Requires API key and List ID
Klaviyo: Requires Private API key and List ID
ConvertKit: Requires API key, Form ID, with optional tag assignment
MailerLite: Requires API token and Group ID
Content Configuration
Title and Description
Show Title: Toggle to display or hide the newsletter title
- Edit the title directly in the block by clicking on it
- Use rich text formatting for emphasis
- Title appears above the form and description
Show Description: Toggle to display or hide the descriptive text
- Add compelling copy to encourage subscriptions
- Rich text editing with formatting options
- Positioned between title and form fields
Form Fields
Email Field: Always present and required for subscriptions
- Customize the placeholder text to guide users
- Includes email icon for visual clarity
- Built-in email validation
Name Field: Optional field for collecting subscriber names
- Toggle “Show Name Field” to enable/disable
- Customize placeholder text when enabled
- Includes user icon for visual identification
- Useful for personalized email campaigns
Form Messages
Success Message: Displayed when subscription succeeds
- Customize to match your brand voice
- Appears with green styling by default
- Can include additional instructions or next steps
Error Message: Shown when subscription fails
- Provide helpful guidance for users
- Appears with red styling to indicate issues
- Should include troubleshooting suggestions
Button Configuration
Button Text: Customize the call-to-action text
- Edit directly in the block interface
- Use action-oriented language like “Subscribe,” “Join Now,” or “Get Updates”
- Keep text concise but compelling
Layout Options
Layout Styles
Stacked Layout:
- Fields and button arranged vertically
- Each element takes full width
- Better for mobile devices
- Ideal for detailed forms with descriptions
Inline Layout:
- Fields and button arranged horizontally
- Space-efficient design
- Better for desktop viewing
- Creates a more compact appearance
Alignment Options
Control the horizontal alignment of your newsletter form:
Left Alignment: Form elements align to the left side
Center Alignment: Form elements center on the page
Right Alignment: Form elements align to the right side
Note: Alignment affects the entire form container and all its contents.
Spacing Controls
Content Spacing: Control vertical spacing between form elements
- Responsive controls for desktop, tablet, and mobile
- Adjusts spacing between title, description, and form
- Units: pixels (px), em, or rem
- Default: 20px on all devices
Field Spacing: Control spacing between form fields and button
- Independent responsive settings
- Affects gaps between input fields and submit button
- Helps create visual breathing room
- Default: 10px desktop, 8px tablet, 6px mobile
Styling Options
Color Customization
The Newsletter block offers comprehensive color controls organized by component:
Text Colors
Title Color: Set the color for the newsletter title
Description Color: Control the color of descriptive text
Input Field Colors
Input Text Color: Color for text entered in form fields
Input Background: Background color for input fields
Input Border: Border color for form fields in normal state
Input Border Focus: Border color when fields are focused/active
Placeholder Color: Color for placeholder text in empty fields
Button Colors
Button Text: Text color for the submit button
Button Background: Background color for the submit button
Button Border: Border color for the button
Container Colors
Background Color: Overall background color for the newsletter block
Border Color: Border color for the newsletter container
Hover States
Title Hover Color: Title color when container is hovered
Button Text Hover: Button text color on hover
Button Background Hover: Button background color on hover
Button Border Hover: Button border color on hover
Background Hover: Container background color on hover
Border Hover: Container border color on hover
Typography Controls
Complete typography customization for each text element:
Title Typography
- Font Family: Choose from available fonts
- Font Size: Responsive sizing (desktop: 24px, tablet: 22px, mobile: 20px default)
- Font Weight: Control text weight (default: 600)
- Font Style: Normal or italic styling
- Text Transform: Uppercase, lowercase, or capitalize options
- Text Decoration: Add underlines or other decorations
- Line Height: Control vertical spacing (default: 1.4 desktop, 1.3 tablet, 1.2 mobile)
- Letter Spacing: Adjust character spacing
Description Typography
- Similar controls to title typography
- Default sizing: 16px desktop, 15px tablet, 14px mobile
- Default line height: 1.5 desktop, 1.4 tablet, 1.3 mobile
Input Typography
- Controls the text appearance within form fields
- Affects both placeholder and entered text
- Default sizing matches description typography
Button Typography
- Typography for the submit button text
- Default font weight: 500 for emphasis
- Consistent sizing with other form elements
Border and Radius Options
Container Borders
Border Style: Choose from None, Solid, Dashed, Dotted, or Double
Border Width: Responsive width controls (0-10px range)
Border Radius: Responsive corner rounding with dimension controls
- Independent corner control (top-left, top-right, bottom-left, bottom-right)
- Units: pixels (px) or percentage (%)
Input Field Borders
Border Style: Independent styling from container borders
Border Width: Responsive controls for input field borders
Border Radius: Control corner rounding for form fields
Button Borders
Border Style: Separate border styling for the submit button
Border Width: Independent width controls for button
Border Radius: Button-specific corner rounding options
Box Shadow Effects
Add depth and visual interest with shadow controls:
Container Shadows
Normal Shadow: Default shadow state for the newsletter container
Hover Shadow: Shadow effect when hovering over the container
Input Field Shadows
Normal Shadow: Default shadow for form fields
Focus Shadow: Shadow effect when fields are focused
Button Shadows
Normal Shadow: Default button shadow
Hover Shadow: Button shadow on hover state
All shadow controls include:
- Position (inset/outset)
- Horizontal offset
- Vertical offset
- Blur radius
- Spread radius
- Color selection with opacity
Spacing Controls
Padding
Control internal spacing within the newsletter container:
- Responsive dimension controls
- Individual control for top, right, bottom, left
- Units: pixels (px), em, rem, or percentage (%)
Margin
Control external spacing around the newsletter block:
- Responsive dimension controls
- Individual side controls
- Units: pixels (px), em, rem, or percentage (%)
Advanced Features
Animation Effects
Add engaging entrance animations to draw attention to your newsletter signup:
Available Animation Types:
- Fade Effects: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
- Slide Effects: slideInUp, slideInDown, slideInLeft, slideInRight
- Zoom Effects: zoomIn, zoomInUp, zoomInDown
- Bounce Effects: bounceIn, bounceInUp, bounceInDown
- Rotation Effects: rotateIn, rotateInDownLeft, rotateInDownRight
Animation Preview: Use the preview button to test animations in the editor before publishing.
Responsive Design
All styling options include responsive controls for optimal display across devices:
Desktop (992px and up): Full-featured display with inline layout options
Tablet (768px to 991px): Adjusted spacing and typography for medium screens
Mobile (767px and below): Automatically switches to stacked layout for better usability
Visibility Controls
Hide the newsletter block on specific devices when needed:
Hide on Desktop: Hide the block on desktop screens
Hide on Tablet: Hide the block on tablet screens
Hide on Mobile: Hide the block on mobile screens
Note: Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.
Additional Options
HTML Anchor: Create a unique anchor link for direct linking to the newsletter section
Additional CSS Classes: Add custom CSS classes for advanced styling or theme integration
Form Functionality
Subscription Process
- User Input: Visitor enters email (and optionally name)
- Validation: Built-in client-side validation ensures proper email format
- Submission: Form data sends to configured email marketing platform
- Response: Success or error message displays based on platform response
- Integration: Subscriber added to specified list/audience with configured tags
Error Handling
The Newsletter block provides robust error handling:
- Validation Errors: Client-side validation for email format and required fields
- Platform Errors: Server-side error handling for API issues
- Network Errors: Timeout and connection error management
- User Feedback: Clear error messages guide users to successful submission
Security Features
- Nonce Verification: WordPress nonce protection against CSRF attacks
- Data Sanitization: All form data sanitized before processing
- Rate Limiting: Protection against spam submissions
- API Security: Secure handling of platform API credentials
Best Practices
Content Strategy
Compelling Headlines: Create titles that clearly communicate value proposition
Clear Descriptions: Explain what subscribers will receive and how often
Value Proposition: Highlight benefits like exclusive content, discounts, or early access
Action-Oriented Buttons: Use persuasive language like “Get Weekly Tips” instead of generic “Subscribe”
Design Considerations
Visual Hierarchy: Use typography and spacing to guide user attention
Color Contrast: Ensure sufficient contrast for accessibility compliance
Mobile Optimization: Test on various screen sizes for optimal mobile experience
Call-to-Action Prominence: Make the subscribe button visually prominent
Performance Optimization
Platform Selection: Choose a platform that offers reliable API performance
Form Placement: Position newsletter signups strategically without overwhelming content
Loading Speed: Monitor impact on page load times
Error Handling: Provide clear feedback for all possible form states
Conversion Optimization
A/B Testing: Test different headlines, descriptions, and button text
Incentive Offers: Consider offering lead magnets or exclusive content
Social Proof: Add testimonials or subscriber counts when appropriate
Friction Reduction: Minimize required fields (email only vs. email + name)
Email Marketing Integration
List Segmentation: Use tags to segment subscribers based on signup source
Welcome Sequences: Set up automated welcome emails for new subscribers
GDPR Compliance: Ensure compliance with data protection regulations
Double Opt-in: Consider enabling double opt-in for higher engagement quality
Platform-Specific Setup
MailChimp Configuration
- Get API key from MailChimp account settings
- Find Audience ID in audience dashboard
- Set up tags for subscriber segmentation (optional)
- Configure double opt-in preferences
ActiveCampaign Setup
- Obtain API URL from account settings
- Generate API key with appropriate permissions
- Identify target List ID for subscribers
- Configure tags for automation triggers
Other Platforms
Each platform requires specific configuration details available in the DigiBlocks Settings panel. Refer to your email marketing platform’s documentation for API credential generation and list identification.
Troubleshooting
Common Issues
Newsletter Platform Not Configured: Ensure platform credentials are correctly entered in DigiBlocks Settings
Submissions Not Working: Verify API credentials and test platform connectivity
Styling Issues: Check for theme conflicts and CSS specificity problems
Mobile Display Problems: Test responsive settings and adjust spacing accordingly
Animation Not Working: Ensure animation is selected and preview functionality works in editor
Testing Your Setup
- API Connection: Test platform connection in DigiBlocks Settings
- Form Submission: Submit test email addresses to verify integration
- Response Messages: Confirm success and error messages display correctly
- Mobile Testing: Test form functionality on various devices
- Email Delivery: Verify welcome emails and list integration work properly
The Newsletter Block provides a comprehensive solution for email list building with professional design flexibility and reliable platform integration. With proper configuration and optimization, it becomes a powerful tool for growing your subscriber base and engaging your audience through email marketing.