Search Form Element

Last Updated on

The Search Form element allows you to add a search form anywhere on your website. This element comes really handy when you are building a custom header or footer using Elementor.

Common Uses:

  • Mostly uses in Header, footer, and sidebars.
  • Creating Header and Footer and block templates.
  • Use in Page templates such as 404, maintenance and search page.
  • Use anywhere you want to show a search form (full screen or inline)
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Search Form, you need to look for it in the Elementor knowledgebase

In this article


Displaying a Search Form Element

To add a Search Form element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Search Form”.
4
Drag and drop the Search Form element to your page.
5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
SkinChoose between a Classic or Full Screen style search form.
PlaceholderAdd your custom placeholder inside the search form.
Choose IconAdd your custom icon for the search form.

Adding a Search Form Inside Header

To add a search form inside the header:

1
From the WordPress left menu, click on Elementor.

2
Next to My Templates title, click on the Add New button.

3
For the template type select Header and give your header a name.

4
Click on the Create Template button.
5
Follow the “Displaying a Search Form Element” section in this article to simply add the search form to your newly created header.
6
Assign the header to your page by following this article.

Simply follow the section above called “Adding a Search Form Inside Header“, but on step 3, for the template type select Footer.


Responsive Options

You can choose to have different settings on different screen sizes for some of the Search Form element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket