Search Form
Transform the search experience on your site with JupiterX's versatile Search Form widget. With the Classic and Full Screen styles available, you're well-equipped to customize the perfect search bar to match your website design and branding. It's common to use search form widget as part of the website header.
Content Tab
Skin: Within the dropdown, pick 'Classic' for a traditional layout, or 'Full Screen' for an immersive search experience.
Placeholder Text: Input the prompt text such as "Search..." that users will see before typing their query.
Icon Selection: Click to access a range of icons, selecting a standard magnifying glass or your choice of visual cue for the search button. Custom icons can also be uploaded.
Style Tab
Input
- Width: Set the width of the search input field, with the option to use percentage or pixels.
- Typography: Customize the font settings for the text inside the search input field.
- Padding: Adjust the padding inside the search input field to increase or decrease the space around the text.
- Alignment: Set the alignment of the text within the search input field; options include left, center, or right alignment.
- Text Color: Choose a color for the text inside the search input field.
- Background Color: Select a background color for the input field.
- Border:
- Border Type: Choose the type of border for the input field such as solid, dotted, dashed, etc.
- Border Radius: Adjust the roundness of the input field corners.
- Box Shadow: Apply a shadow effect to the input field.
Icon
- Icon Size: Set the size of the search icon.
- Padding: Adjust the padding around the search icon to position it within the input field.
- Color: Choose a color for the search icon.
- Background Color: Select a background color for the icon.
- Border:
- Border Type: Define the border style for the icon.
- Border Radius: Modify the border radius for the icon to control corner roundness.