The Search Form block lets you add a fully functional search box to any SeedProd page, giving visitors an instant way to find the content they are looking for. Whether you’re building a blog, a landing page, or a full website, adding a search form helps reduce friction and keeps users engaged by surfacing relevant content quickly.
The block offers flexible configuration — choose between an icon button or a text button, set a custom placeholder, control the form height and width, and fine-tune colors for both the search input and the button. You can align the form to any position and adjust spacing for a clean, consistent layout across all screen sizes.
Adding the Search Form Block to Your Pages
Follow these steps to add a Search Form block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Search Form block into the desired section of your page.
Step 2: Configure Content Settings
Once added, click on the Search Form block to open its settings. In the Content tab, the Search Form Setting section lets you configure the placeholder text, button style, form size, and alignment.
- Placeholder: Enter the hint text displayed inside the search input field before a visitor starts typing (e.g., “Search…” or “What are you looking for?”). This guides users on what they can search for.
- Button Type: Choose how the search submit button appears — Icon displays a compact icon button (choose between a magnifying glass or an arrow), while Text displays a full text label button. When Text is selected, a Text field appears so you can set the button label (e.g., “Search” or “Go”).
- Icon: (Visible when Button Type is set to Icon.) Select which icon style to use for the search button — a circular magnifying glass icon or an arrow icon.
- Size: Set the overall height of the search form using the slider (30–80px). This controls how tall the input field and button appear on the page.
- Alignment: Set the horizontal alignment of the search form — Left, Center, or Right.
Step 3: Customize the Design
In the Advanced tab, you can fine-tune the colors and dimensions of the search form, then control spacing and visibility across devices.
Colors & Width:
- Search Background: Set the background color of the search input field.
- Search Text Color: Set the color of the text typed into the search input field, as well as the placeholder text color.
- Button Background: Set the background color of the search submit button.
- Button Color: Set the icon or text color of the search submit button.
- Width: Set the overall width of the search form as a percentage of its container (10–100%). Use a lower value to make the form narrower, or set it to 100% for a full-width search bar.
Spacing:
- Margin: Control the outer spacing around your Search Form block (Top, Right, Bottom, Left). This determines how much space appears between the form and surrounding elements on the page.
- Padding: Adjust the inner spacing within your Search Form block (Top, Right, Bottom, Left). This creates breathing room between the search form and the block edges.
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your Search Form block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting.
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS.
- Custom Attributes: Add any HTML attributes to the block wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-search|enabled).
Device Visibility:
- Hide on Desktop: Hide the Search Form block on desktop screens.
- Hide on Tablet: Hide the Search Form block on tablet devices.
- Hide on Mobile: Hide the Search Form block on mobile devices.
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the Search Form block scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more.
Step 4: Save Your Changes
Once you have finished configuring the Search Form block and customizing its appearance, make sure to save your work.
You’ve successfully added a Search Form block to your page! A well-placed search form improves navigation and keeps visitors engaged by helping them find exactly what they need without leaving your site. Experiment with button styles, input colors, and width settings to create a search experience that fits seamlessly into your page design.