# Site Search Widget

> Add a search box to your Phox site with the Site Search widget for Elementor: normal or popup layout, placeholder and button settings.

Source: https://phox.wdes.org/docs/site-search-widget/
Last updated: 2021-08-20

![wdes widget search](https://phox.wdes.org/docs/assets/wdes-widget-search.B70vcd_6_16O6JG.webp)

The site Search widget is a control element. It is used to help the user to search and retrieve information from the database.

## Site Search Widget Sample

![wdes search widget](https://phox.wdes.org/docs/assets/wdes-search-widget.CAChJeQn_15e6QE.webp)

#### Content

![site search content](https://phox.wdes.org/docs/assets/site-search-content.BXoDT_gm_1T7PDd.webp)

- **General Settings**

  - **Layouts**: choose the layout for the search box (Normal, Popup).

  - **Search Placeholder**: set the search input placeholder text.

  - **Button**:

    - **Show Submit button:** Turn it off to hide the submit button, in this case, you write then hit enter.
    - **Submit button label**: You can add a text inside the submit button.
    - **Submit button icon**: You can change the icon, upload a custom one, or delete it completely.

  - **Is Product Search**: Switch it on in case that you use **WooCommerce**, and you need to search for the products.

- **Popup Settings**: in case that you choose popup layout

  - **Full Screen Popup:** turn it on to show the search box on full-screen mode.
  - **Popup Trigger Icon:** You can change the icon, upload a custom one, or delete it completely.
  - **Pop Close Button Icon:** You can change the icon, upload a custom one, or delete it completely.
  - **Show Effect:** you can choose from different animation effects or disable them.

#### Style

![phox search widget style](https://phox.wdes.org/docs/assets/phox-search-widget-style.6P9DYrgF_1OKjma.webp)

- **Form**

  - **Background Color:** set the background color for the search form.
  - **Padding**: here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  - **Margin**: specify the margin for the search form.
  - **Border**: here you can select the needed type of border to use for the search form.
  - **Border Radius**: here you can set the border-radius to make the angles more smooth and round.
  - **Box Shadow:** here you can apply the shadow for the search form and change the shadow’s settings, such as color, blur, spread, and position.

- **Input**

  - **Typography**: turn the option on to view the typography settings.

  - **Normal – Focus**: you can switch between the modes for the following options:

    - **Background Color:** set the background color for the input.
    - **Text Color:** set the text color for the input.
    - **Placeholder Color:** set the placeholder text color for the input.
    - **Box Shadow:** here you can apply the shadow for the input and change the shadow’s settings, such as color, blur, spread, and position.

  - **Padding:** here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.

  - **Margin**: specify the margin for the input.

  - **Border**: here you can select the needed type of border to use for the input.

  - **Border Radius**: here you can set the border-radius to make the angles more smooth and round.

* **Submit**

  - **Typography**: turn the option on to view the typography settings.

  - **Icon Size**: set the submit button icon size.

  - **Normal – Hover**: you can switch between the modes for the following options:

    - **Background Color:** set the background color for the submit button.
    - **Text Color:** set the text color for the submit button.

  * **Padding:** here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  * **Margin**: specify the margin for the submit button.
  * **Border**: here you can select the needed type of border to use for the submit button.
  * **Border Radius**: here you can set the border-radius to make the angles more smooth and round.
  * **Box Shadow:** here you can apply the shadow for the submit button and change the shadow’s settings, such as color, blur, spread, and position.

* **Popup Box**

  - **Popup Content Width**: set the popup box width in PX or %.

  - **Background Color:** set the background color for the popup box.

  - **Padding:** here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.

  - **Margin**: specify the margin for the popup box.

  - **Border**: here you can select the needed type of border to use for the popup box.

  - **Border Radius**: here you can set the border-radius to make the angles more smooth and round.

  - **Box Shadow:** here you can apply the shadow for the popup box and change the shadow’s settings, such as color, blur, spread, and position.

  - **Popup Position**

    - **Vertical Position by:** choose Top or Bottom to set the position.
    - **Top Indent**: set the top or bottom indent for the popup.
    - **Horizontal Position by:** choose left or right to set the position.
    - **Left Indent**: set the left or right indent for the popup.

* **Popup Trigger**

  - **Icon Size**: set the popup trigger button icon size.

  - **Normal – Hover**: you can switch between the modes for the following options:

    - **Background Color:** set the background color for the popup trigger button.
    - **Text Color:** set the text color for the popup trigger button.

  - **Alignment**: align the popup trigger button \[left – right – center].

  - **Padding:** here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.

  - **Margin**: specify the margin for the popup trigger button.

  - **Border**: here you can select the needed type of border to use for the popup trigger button.

  - **Border Radius**: here you can set the border-radius to make the angles more smooth and round.

  - **Box Shadow:** here you can apply the shadow for the popup trigger button and change the shadow’s settings, such as color, blur, spread, and position.

- **Popup Close**

  - **Icon Size**: set the popup close button icon size.

  - **Normal – Hover**: you can switch between the modes for the following options:

    - **Background Color:** set the background color for the popup close button.
    - **Text Color:** set the text color for the popup close button.

  * **Padding:** here you can set the preferable custom padding. Fill in the values for the top, bottom, right, and left padding in pixels or % to apply your custom padding.
  * **Margin**: specify the margin for the popup close button.
  * **Border**: here you can select the needed type of border to use for the popup close button.
  * **Border Radius**: here you can set the border-radius to make the angles more smooth and round.
  * **Box Shadow:** here you can apply the shadow for the popup close button and change the shadow’s settings, such as color, blur, spread, and position.