The Search Form Block provides an enhanced search experience for your WordPress site with advanced filtering options, AJAX functionality, and extensive customization controls. This Pro block from the DigiBlocks Theme category is perfect for creating custom header layouts or search pages with the DigiFusion theme and its Site Builder feature from DigiFusion Pro.
Adding the Search Form Block
Navigate to the post or page where you want to add the search functionality. Click the block inserter (+) and search for “Search Form” in the DigiBlocks Theme category. The block will be added with a functional search form that you can customize to match your site’s design.
General Configuration
Search Settings
Configure the basic search functionality in the General section:
Placeholder Text – Set the text that appears in the search input field when empty
Button Text – Customize the text displayed on the search button
Search Type – Choose what content to search:
- All Content – Searches across all post types
- Posts Only – Limits search to blog posts
- Pages Only – Searches only static pages
- Custom – Allows selection of specific post types
When Custom is selected, you can choose from available post types including Posts, Pages, and any custom post types registered on your site.
Enable AJAX Search – Toggle live search results that appear without page reload, providing instant feedback as users type
Layout Options
Button Position
Control where the search button appears:
Inside – Places the button within the search input field for a compact design
Outside – Positions the button adjacent to the input field
Form Layout
When the button position is set to Outside, you can choose the form orientation:
Horizontal – Arranges the input and button side by side
Vertical – Stacks the input above the button
Form Gap – Adjust the spacing between form elements with responsive controls for desktop, tablet, and mobile devices
Color Customization
Normal State Colors
Configure default colors for all form elements:
Input Colors:
Background Color – Set the background color of the search input field
Text Color – Choose the color for entered text and placeholder
Border Color – Define the default border color around the input
Focus Border Color – Set a different border color when the input is focused
Button Colors:
Background Color – Set the search button background color
Text Color – Choose the button text and icon color
Border Color – Define the button border color
Search Results Colors (when AJAX is enabled):
Background Color – Set the background for the results dropdown
Text Color – Choose the text color for search results
Border Color – Define the border around the results container
Hover Effects
Use the Hover tab to define interactive color changes:
Button Background – Background color when hovering over the button
Button Text – Text color change on button hover
Button Border Color – Border color change during hover
Results Hover Background – Background color for individual result items on hover
Typography Settings
Input Typography
Style the text within the search input field:
Font Family – Select from Google Fonts or system fonts
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Choose from available font weights
Font Style – Normal or italic styling
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Button Typography
Configure the search button text appearance independently:
Font Family – Separate font selection for button text
Font Size – Independent sizing controls across devices
Font Weight – Typically set to medium or bold for buttons
Font Style – Normal or italic styling options
Line Height – Button-specific line height settings
Letter Spacing – Character spacing for button text
Results Typography
Style the AJAX search results text:
Font Family – Font selection for search result items
Font Size – Typically smaller than input text for readability
Font Weight – Usually normal weight for content text
Font Style – Text styling for search results
Line Height – Line spacing for multi-line result excerpts
Letter Spacing – Character spacing for result text
Border and Styling Controls
Input Border
Border Style – Choose from solid, dotted, dashed, double, groove, inset, outset, ridge, or none
Border Width – Set thickness for each border side with responsive controls
Input Border Radius – Round the corners of the input field with pixel or percentage units
Button Border
Border Style – Select border style for the search button
Border Width – Control button border thickness on each side
Button Border Radius – Set corner rounding for the button
Spacing Configuration
Element Spacing
Input Padding – Internal spacing within the search input field
Button Padding – Internal spacing for the search button
Block Padding – Outer spacing around the entire search form
Block Margin – External spacing around the search block
All spacing controls include responsive settings for desktop, tablet, and mobile devices.
Advanced Features
Box Shadow Effects
Add depth and visual interest with shadow controls:
Normal Shadow – Default shadow appearance with customizable horizontal offset, vertical offset, blur radius, spread radius, and color
Hover Shadow – Different shadow effect when hovering over the form
Both shadow types support inset positioning for inner shadows.
Animation Effects
Add entrance animations to make the search form more engaging:
Animation Effect – Choose from fade, slide, zoom, bounce, and other animation types
Preview Animation – Test button to preview the selected animation effect
AJAX Search Functionality
When AJAX search is enabled, the block provides:
- Live search results appearing as users type
- Dropdown results showing post titles and excerpts
- Keyboard navigation support for accessibility
- Click-to-navigate functionality for result items
- Automatic result filtering based on selected post types
Visibility Controls
Control when the search form appears:
Hide on Desktop – Hide the form on large screens (992px and above)
Hide on Tablet – Hide on medium screens (768px to 991px)
Hide on Mobile – Hide on small screens (767px and below)
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Additional Settings
HTML Anchor – Add a unique anchor ID for direct linking to the search form
Additional CSS Classes – Include custom CSS classes for advanced styling or third-party integrations
Responsive Design
The Search Form Block includes comprehensive responsive controls:
- Typography scales appropriately across devices
- Spacing adjusts for optimal mobile experience
- Layout automatically switches to vertical on small screens when button position is inside
- AJAX results adapt to smaller screen sizes
- All styling options include device-specific controls
Integration Features
The search form integrates seamlessly with WordPress search functionality and can be enhanced with the DigiFusion theme’s Site Builder for creating custom search result templates and archive pages. When combined with DigiFusion Pro, you can create complete search experiences with custom layouts and advanced filtering options.