---
title: Search Form
description: "## Overview The **Search Form widget in SiteCraft** allows you to add a customizable search bar to your website. It helps users quickly find posts, pages, or custom content with a clean and responsive search interface. --- ## Key Features…"
url: "https://sitecraft.themeshala.com/docs/search-form/"
updated: "2026-04-28"
category: Dynamic Widgets
---

# Search Form

## Overview

The **Search Form widget in SiteCraft** allows you to add a customizable search bar to your website. It helps users quickly find posts, pages, or custom content with a clean and responsive search interface.

---

## Key Features

- WordPress native search integration
- Custom search input field styling
- Search button customization
- Icon or text-based button support *(if available)*
- Placeholder text control
- Alignment options (left, center, right)
- Fully responsive design

---

## How to Enable the Widget

Before using the Search Form widget, make sure it is enabled.

**Steps:**

1. Go to **SiteCraft → Dashboard → Widgets**
2. Find **Search Form Widget**
3. Toggle to enable it
4. Click **Save Changes**

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-switcher.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-switcher.png)

---

## How to Add the Widget in Elementor

1. Open your page with **Elementor Editor**
2. Search for **“Search Form”** under SiteCraft widgets
3. Drag and drop it into your section
4. Customize layout and styling

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-el-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-el-scaled.png)

---

## Content Settings

Control search behavior and layout.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-el-content-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-el-content-scaled.png)

**Options:**

- **Placeholder Text** – Customize input placeholder
- **Search Button** – Enable/disable button
- **Button Type** – Icon or text *(if available)*
- **Alignment** – Left, Center, Right

---

## Style Settings

Customize the appearance of the search form.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-el-style-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-el-style-scaled.png)

**Available Controls:**

- **Input Field Styling** – Padding, border, background
- **Typography** – Input and button text styling
- **Button Styling** – Color, hover effects, border
- **Icon Styling** *(if available)* – Size and color
- **Spacing** – Gap between input and button
- **Border Radius** – Rounded input/button

---

## Advanced Settings

Fine-tune layout and responsiveness.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-el-advanced-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/search-form-el-advanced-scaled.png)

**Includes:**

- Margin & padding
- Responsive visibility
- Motion effects
- Positioning
- Background & border

---

## Use Cases

Perfect for:

- Blog headers
- Website navigation
- Sidebar search
- Content-heavy websites

---

## Result

You can now add a clean and functional search experience using the **SiteCraft Search Form Widget**, helping users quickly navigate your content.