Findeo has an awesome drag and drop forms builder that allows you to edit or build forms structure in minutes. You can easily add, rename or re-arrange fields.

Go to Realteo Editor → Search Forms and choose search form which you would like to customize:

  1. Sidebar Search – the default sidebar search as seen here:
    https://findeo.realty/properties/
  2. Full Width Search – full-width search form as seen here:
    https://findeo.realty/list-full-width/
  3. Search on Half Map – form used on half-screen layouts as seen here:
    https://findeo.realty/half-list-layout/
  4. Search on Home Page – form used on Home Page:
    https://findeo.realty/
  5. Search on Home Page Alt – an alternative version of form on Home Page:
    https://findeo.realty/home-2/

Field Options Explanation

To edit field simply click on “Edit” button or if you want to add new field just drag any from the available searchable elements area.

  1. Type – this option defines what kind of field it will be:
    1. Text – Displays input field
    2. Select – Displays dropdown with options
    3. Min / Max – Displays two fields, one with minimum value and another with maximum value  (e.g. minimum area and maximum area)
    4. Slider – Displays range slider where you can set minimum and maximum value
    5. Checkboxes in column – Displays checkboxes (one in a row) with items from predefinied list e.g. features
    6. Checkboxes in row – Displays checkboxes (side by side with) items from predefinied list e.g. features
    7. Location – Option only for Location field
    8. Submit – Option only for Submit Button (you can change it’s position in Full Width Search and Search on Half Map)
    9. Hidden – Field with this option will be hidden
  2. Placeholder – Text that is displayed in the input field before the user enters something
  3. Field Width – Go to Field Width section to read more
  4. Custom CSS Class – You can add here custom CSS classes (separated by spaces) – for example if you would like to add 20px of top margin you can do it by typing here CSS class name – “margin-top-20”
  5. Placement – Defines whether field will be always visible or will be displayed once”Advanced Search” is enabled
    1. Main – Field will be always visible
    2. Advanced – Field will be displayed once “Advanced Search” is active

Adding New Field

Let’s say that you have added new field for properties – Rooms. You can create a filter for this field by dragging “Rooms” element from “available searchable elements” area then set this field type as “Select” (you can also use range sliders that are used for price filter) and add custom options that users could use for searching:

Field Width

Field Width – You can set here field width using Bootstrap columns

If you’ll choose field width smaller than 12 Columns (Full Width) you’ll see an additional options: First In Row  and Last In Row – if you would like to have e.g. 3 fields in a row then for the first field mark First in Row option and for the last one Last In Row

An example of settings for 3 fields in a row: