Search Form Builder

Our old search form [auto_listings_search] is really helpful and customizable via its attributes. However, it’s not enough, in case you need to change the search form layout, such as ordering the fields, add or delete the new fields. That’s why we create the search form builder.

The Search Form Builder was first introduced in Version 2.3.0. You can view a live example of the search form builder here.

To use it, Go go Listing -> Search Forms, then create a new search form.

View post on imgur.com

There are 3 main components you should notice: the field list, the editor and the shortcode.

View post on imgur.com

Field List

Each button in the field list prints a shortcode. When you click on a button, there will be a popup displayed:

Each field have its own default attribute value already. In case you don’t need to change the label or the placeholder, you can leave those fields blank.

There are two types of field:

• The search form fields, such as Make, Model, Condition. All these fields are self-explained by their name and are displayed as the shortcode [als_field].
• The extra fields, includes Toggle Wrapper, Total Listings, Selected Values.

Toggle Wrapper:

You can use this shortcode like this:

[als_toggle_wrapper]
[als_field name="the_year" multiple="true"]									[als_field name="body_type" multiple="true"]								[als_field name="odometer"]
[als_field name="transmission" multiple="true"]
[als_field name="model_drive" multiple="true"]								[als_field name="engine" multiple="true"]								[als_field name="fuel_type" multiple="true"]																			[/als_toggle_wrapper]

View post on imgur.com

All the fields inside the tag [als_toggle_wrapper] are hidden at first and there is a clickable text that toggles the hidden fields.

Total Listing

If you need to show the total number of listings, you can use [als_total_listings] shortcode

And it will be displayed on the front end like this:

View post on imgur.com

Selected Values

[als_selected] will print the fields that you have selected below the search form

Editor

The Editor has three tabs: Template, CSS and JS.

Template is the place that print the selected shortcodes. You can also write your own HTML here.

If you need to add your own custom CSS and JS for your field, you can put them into CSS tab and JS tab.

Shortcode

This is the shortcode that you use to place wherever you would like to show your search form.

Legacy Search Form

The new version of Auto Listings is backward compatible with the old search form [auto_listings_search]

Available Attributes

• area_placeholder – text to display as the placeholder text in the text input. Default is “State, Zip, Town”
• submit_btn – text to display on the search button. Default is “Find My Car”
• refine_text – text to display on the refinements link. Default is “More Refinements”
• style – 1, 2, 3 or 4
• layout – either leave blank or “standard”.
• exclude – a comma separated list of fields that you don’t want to display. The fields are year, make, model, condition, prices, min_price, max_price, area, refine, body_type, odometer

View a live example of the search shortcode.