Form Block

The Forms Block is a powerful and flexible form builder that allows you to create custom contact forms, surveys, registration forms, and more directly within the WordPress block editor. With its intuitive drag-and-drop interface and extensive customization options, you can build professional forms without any coding knowledge.

Overview

The Forms Block includes support for multiple field types, advanced styling options, spam protection with reCAPTCHA, customizable email templates, and responsive design. All form submissions are processed securely and can be sent to any email address with beautifully formatted email notifications.

Adding the Forms Block

To add a Forms Block to your page or post:

Open the WordPress block editor
Click the + (Add Block) button
Search for “Forms” or navigate to the DigiBlocks category
Click on the Forms block to add it to your content

Alternatively, you can type /forms in the editor and press Enter to quickly insert the block.

Block Interface

The Forms Block is organized into four main tabs in the block settings panel:

Options: Basic form configuration and email settings
Fields: Add, remove, and configure form fields
Style: Customize colors, typography, and appearance
Advanced: Animation, visibility, and additional options

Basic Form Configuration

Form Settings

Navigate to Options > Form Settings to configure the basic form properties:

Form Name

Enter a descriptive name for your form
This name appears in email notifications and helps identify the form
Example: “Contact Form”, “Job Application”

Recipient Email

Specify where form submissions should be sent
Leave empty to use the site’s admin email address
You can enter multiple email addresses separated by commas

Button Text

Customize the submit button text
Default: “Submit”
Examples: “Send Message”, “Get Quote”

Button Alignment

Choose how the submit button is aligned
Options: Left, Center, Right, Full Width
Full width makes the button span the entire form width

Success and Error Messages

Configure the messages users see after form submission in Options > Messages:

Success Message

Thank you for your message! We'll get back to you soon.

Error Message

Sorry, there was an error sending your message. Please try again.

These messages appear below the form after submission and can include HTML formatting if needed.

Adding and Managing Form Fields

Available Field Types

The Forms Block supports 11 different field types:

Text – Single-line text input
Email – Email address with validation
Number – Numeric input with validation
Phone – Phone number input
Date – Date picker
Textarea – Multi-line text input
Select – Dropdown menu with options
Checkbox – Single checkbox for agreements/confirmations
Radio – Multiple choice with single selection
Hidden – Hidden fields for additional data

Adding Fields

To add fields to your form:

Click the Fields tab in the block settings
In the Add Fields section, click on any field type button
The field will be added to your form and automatically selected

Field Configuration

When a field is selected, you can configure its properties:

Field Label

The visible label that appears above the field
Example: “Your Name”, “Email Address”, “Message”

Field Type

Change the field type using the dropdown
Note: Changing types may reset some field-specific settings

Placeholder

Helper text that appears inside the field when empty
Example: “Enter your full name”, “[email protected]”

Required Field

Toggle to make the field mandatory
Required fields show an asterisk (*) next to the label

Field Width

Control how much horizontal space the field occupies
Options: 100%, 75%, 66%, 50%, 33%, 25%
Use different widths to create multi-column layouts

Special Field Types

Select and Radio Fields

For dropdown (select) and radio button fields, you can add custom options:

Select the field in your form
In the field settings, find the Options section
Edit existing options or click Add Option to create new ones
Each option has a Label (what users see) and Value (what’s submitted)

Example select field options:

Label: “General Inquiry”, Value: “general”
Label: “Technical Support”, Value: “support”
Label: “Sales Question”, Value: “sales”

Hidden Fields

Hidden fields are useful for tracking or including additional data:

Add a Hidden field type
Set the Field Label (for your reference)
Enter the Value that will be submitted
Hidden fields appear grayed out in the editor but are invisible to users

Field Management

Reordering Fields

Click a field to select it
Use the up/down arrow buttons in the field actions to reorder
Fields can also be dragged to new positions

Duplicating Fields

Select a field and click the duplicate button (page icon)
All field settings are copied to the new field
Useful for creating similar fields quickly

Removing Fields

Select a field and click the trash button
Deleted fields cannot be recovered, so use carefully

Form Layout

Field Gap

Control the spacing between form fields
Adjust in Fields > Add Fields > Field Gap
Range: 0-50px

Label Margin

Set the space between field labels and inputs
Found in Fields > Add Fields > Label Margin
Range: 0-30px

Styling Your Form

Color Customization

Access color options in Style > Colors:

Form Colors

Background Color: Overall form background
Text Color: General text color
Label Color: Color for field labels

Input Colors

Input Background: Background color for form fields
Input Text: Text color inside form fields
Input Border: Border color for form fields
Input Focus Border: Border color when fields are focused

Button Colors

Background Color: Submit button background
Text Color: Submit button text
Hover Background Color: Button background on hover
Hover Text Color: Button text color on hover

Typography Settings

Configure fonts and text styles in Style > Typography:

Form Typography

Controls the overall text styling for the form
Includes font family, size, weight, and spacing

Label Typography

Specific styling for field labels
Can be different from the main form typography

Button Typography

Customize the submit button text styling
Independent of other text settings

Each typography control includes:

Font family selection
Font size (responsive)
Font weight and style
Text transform (uppercase, lowercase, etc.)
Line height and letter spacing

Border and Spacing

Form Border (Style > Form Border)

Border style, width, color, and radius
Box shadow effects for normal and hover states

Input Style (Style > Input Style)

Separate border and spacing controls for form fields
Input padding and border radius
Independent styling from the main form container

Spacing (Style > Spacing)

Padding: Internal spacing within the form container
Margin: External spacing around the form
Both are responsive and can be set differently for each device

Advanced Features

Animation Effects

Add visual appeal with entrance animations:

Go to Advanced > Animation
Select an animation effect from the dropdown
Use Preview Animation to test the effect
Animations trigger when the form enters the viewport

Popular animation options include:

Fade In
Slide Up
Slide Down
Zoom In
Bounce In

Visibility Controls

Control when and where your form appears:

Device-Specific Visibility (Advanced > Visibility)

Hide on Desktop: Form won’t show on desktop devices
Hide on Tablet: Form won’t show on tablet devices
Hide on Mobile: Form won’t show on mobile devices

This is useful for creating device-specific forms or showing different forms to different audiences.

HTML Anchor and CSS Classes

HTML Anchor (Advanced > Additional)

Create a unique anchor ID for the form
Allows direct linking to the form: yoursite.com/page#contact-form
Useful for navigation menus or call-to-action buttons

Additional CSS Classes

Add custom CSS classes for advanced styling
Separate multiple classes with spaces
Useful for theme integration or custom CSS

Email Configuration

Basic Email Settings

Configure how form submissions are emailed in Options > Email Settings:

Email Subject

Customize the subject line for notification emails
Default includes the form name and submission date
Example: “New Contact Form Submission – [Form Name]”

Business Information

Use Site Logo: Include your site’s logo in the email header
Custom Logo: Upload a different logo for email notifications
Business Name: Override the site name in emails
Business Address: Include contact information in the email footer

Email Template Customization

Email Header Text

Custom text that appears at the top of notification emails
Useful for context or instructions
Example: “You have received a new inquiry from your website:”

Email Footer Text

Additional text for the email footer
Can include disclaimers, contact information, or next steps
Example: “Please respond to this inquiry within 24 hours.”

The email template automatically formats submitted data in an easy-to-read table format, including:

All field labels and submitted values
Submission timestamp
User’s IP address (for security)
Form name and page URL

Security Settings

reCAPTCHA Integration

Protect your forms from spam with Google reCAPTCHA:

Go to Options > Security
Toggle Enable reCAPTCHA to on
Configure reCAPTCHA keys in DigiBlocks Settings

Setting up reCAPTCHA:

Visit the Google reCAPTCHA Admin Console
Create a new site registration
Choose reCAPTCHA v3 for invisible protection
Add your domain name
Copy the Site Key and Secret Key
Go to DigiBlocks > Settings > reCAPTCHA Settings
Paste the keys and save

reCAPTCHA v3 works invisibly in the background, analyzing user behavior to detect bots without requiring user interaction.

Form Validation

The Forms Block includes built-in validation for all field types:

Email Fields

Automatically validate email format
Show error messages for invalid emails

Required Fields

Prevent form submission if required fields are empty
Highlight missing fields with error messages

Field-Specific Validation

Number fields only accept numeric input
Date fields use browser date pickers
Phone fields can include format validation

Error messages appear below each field and the form won’t submit until all validation passes.

Best Practices

Form Design

Keep It Simple

Only ask for information you actually need
Use clear, descriptive field labels
Group related fields together using field widths

Mobile Optimization

Test your forms on mobile devices
Consider using full-width fields on mobile
Ensure adequate spacing between fields

Visual Hierarchy

Use typography and colors to guide users
Make the submit button prominent
Use consistent styling throughout

Performance Considerations

Field Optimization

Avoid too many fields on a single form
Consider breaking long forms into multiple steps
Use hidden fields sparingly

Loading Speed

Forms with reCAPTCHA may load additional scripts
Test form loading times on different devices
Consider form placement for optimal user experience

Accessibility

Screen Reader Support

Always provide descriptive field labels
Use proper form structure and semantics
Test with keyboard navigation

Color Contrast

Ensure sufficient contrast between text and backgrounds
Don’t rely solely on color to convey information
Test with accessibility tools

Responsive Design

Forms automatically adapt to different screen sizes:

Desktop (992px+)

Multi-column layouts work best
Use field widths to create efficient layouts
Consider larger padding and margins

Tablet (768px-991px)

Field widths may need adjustment
Test form usability on tablet devices
Consider touch-friendly button sizes

Mobile (767px and below)

All fields automatically become full-width
Stack vertically for easy completion
Ensure adequate touch targets

Troubleshooting Common Issues

Form Not Submitting

Check Email Configuration

Verify recipient email address is correct
Test with a simple email address first
Check spam folders for notification emails

reCAPTCHA Issues

Ensure reCAPTCHA keys are configured correctly
Check domain settings in Google reCAPTCHA console
Try disabling reCAPTCHA temporarily to test

Styling Problems

CSS Conflicts

Check for theme CSS conflicts
Use browser developer tools to inspect styles
Add more specific CSS selectors if needed

Responsive Issues

Test on actual devices, not just browser resizing
Check field widths on different screen sizes
Verify spacing and alignment

Email Delivery Issues

Server Configuration

Ensure your server can send emails
Check with your hosting provider about email limits
Consider using SMTP plugins for better deliverability

Spam Filtering

Form emails may be filtered as spam
Use professional “From” addresses
Include clear subject lines

Integration with Other Plugins

The Forms Block works well with popular WordPress plugins:

SMTP Plugins

WP Mail SMTP
Easy WP SMTP
Post SMTP

Security Plugins

Wordfence
Sucuri Security
iThemes Security

Analytics

Google Analytics (track form submissions as events)
Monster Insights
Form conversion tracking

Form Data Management

Submission Handling

Form data is sent via email notifications
No data is stored in the WordPress database by default
Consider privacy implications and data regulations

GDPR Compliance

Add privacy policy links or checkboxes
Include data processing disclaimers
Implement data retention policies

Backup Considerations

Email-based submissions provide automatic backup
Consider additional storage solutions for important forms
Implement redundant email addresses for critical forms

The Forms Block provides a comprehensive solution for creating professional contact forms and data collection tools. With its extensive customization options and built-in security features, you can create forms that match your site’s design while providing a smooth user experience for your visitors.