Home / , / WPResidence Search Form Builder for Elementor

WPResidence Search Form Builder for Elementor

10246 views

Content

What the Search Form Builder Does

The Search Form Builder widget allows you to create a custom property search form inside Elementor.

The form is displayed only on the page where the widget is added. It is a page-specific search form and does not replace the global search configuration.

Using the widget, you can build:

  • a simple search form without tabs, or
  • a tabbed search form where each tab shows different search fields.

Important Scope and Limitations

The Elementor Search Form Builder affects only the page where the widget is used.

All other search instances on the site continue to use the global search configuration set in: Theme Options → Search → Advanced Search Form Advanced Search Form – Theme Options

This includes:

  • Advanced Search Results page
  • Search forms shown in Hero Media, when using the theme default setup
  • Advanced Search shortcodes
  • Advanced Search widgets
  • Mobile search

To keep search behavior consistent across the site, make sure the global search configuration matches the logic used in your Elementor-built search forms.

Important: The Advanced Search Results page is unique. You can create different landing pages or property list pages, but the theme search system still uses the configured Advanced Search Results page to display search results.

Video Tutorials

This video explains how to create a tabbed search form with different fields per tab using the Search Form Builder for Elementor. Watch Video on Youtube
This video explains how to create a Search Form Builder layout WITHOUT tabs using Elementor. Watch Video on Youtube
This video explains the options that help you manage all Advanced Search options available in WPResidence. Watch Video on Youtube
Manage Geo Location and Radius Search in Search Form Builder and global search. Watch Video on Youtube
Add and configure the price field in Advanced Search and Search Form Builder. Watch Video on Youtube

Add the Search Form Builder Widget

  1. Edit the page with Elementor.
  2. In the widgets panel, locate WpResidence Widgets.
  3. Drag and drop Search Form Builder into the page.
  4. Click the widget to open its settings.

Configure Tabs

Tabs allow you to group search fields by taxonomy terms, for example Sale, Rent / Let, or Invest.

  1. Open the Content tab.
  2. Expand Tabs.
  3. Enable Use Multiple Tabs?.
  4. Select the Tab Type. This is the taxonomy used for the tabs.
  5. Select the taxonomy terms to display as tabs.
  6. Use Order by to control the tab order.
Important: After selecting tab items, click Update and refresh the page. This step is required to load tab-specific field and price options.



Use Tabs for Buy / Rent or Sale / Let Searches

You can use the Search Form Builder to create page-specific search forms for separate property journeys, for example Buy and Rent / Let.

For this setup, first organize the properties with the correct taxonomies, for example Sale and Rent / Let.

All About Taxonomies

Then, in the Search Form Builder widget:

  1. Enable Use Multiple Tabs?.
  2. Select the taxonomy used for the tabs.
  3. Select the terms you want to show, for example Sale and Rent / Let.
  4. Use Order by to control which tab appears first.
  5. Set the fields for each tab.
  6. Click Update, refresh Elementor, and test the search.

This is useful when you want separate journeys, such as:

  • Buying page: search only sale properties
  • Lettings page: search only rent / let properties

You can also use different fields per tab, as long as they are supported by the theme search setup.

Advanced Search Custom Fields Setup

Important: The fields used in the Elementor Search Form Builder should match the field logic set in Theme Options → Search → Advanced Search Form. If the forms use different fields or different logic, search behavior can be inconsistent.

Default Advanced Search Form

If you want to use the theme default category/tab search setup, check Advanced Search Type 6.

Advanced Search Type 6

The search results are displayed through the theme Advanced Search Results page.

Advanced Search Results Page

Important: WordPress does not automatically create every possible combination of categories, cities, areas, and actions. If you need landing pages such as Buy in Solihull or Rent in Solihull, create those pages manually and link to them from images, buttons, or menus.

Set Up Search Fields

Search fields are configured in the Form Fields section. Each item represents one field in the form.

  1. Open the Content tab.
  2. Expand Form Fields.
  3. Add, edit, duplicate, or reorder fields.

Field Options

  • Form Field: field type, such as City, Category, Price, Keyword, and others
  • Compare: comparison logic, same as global search
  • Label: field label
  • Placeholder: placeholder text
  • Column Width: layout width
  • Tab Assignment: tab where the field appears, if tabs are enabled



Labels, Amenities, and Section Title

  • Show or hide field labels
  • Show or hide Amenities & Features fields
  • Show or hide the form section title



Configure the Search Button

  1. Open Submit Button.
  2. Set the button text.
  3. Adjust the button width.
  4. Select or upload an icon.



Style the Search Form

All visual styling is handled from the Style tab in Elementor.





Save and Test

  1. Click Update in Elementor.
  2. Refresh the page.
  3. Test the search form.
  4. If you use tabs, test each tab separately.
  5. Test the results on the Advanced Search Results page.

Troubleshooting

  • If tab options do not appear, click Update and refresh Elementor.
  • If tab-specific fields or prices do not appear, update the page and reload the Elementor editor.
  • If search results do not match the expected logic, check that the Elementor fields match the fields set in Theme Options → Search → Advanced Search Form.
  • If the wrong tab appears first, check the Order by option in the widget tabs settings.
  • If styling does not apply, clear cache and reload.