Search Form

Attribute	Required	Default	Description
data-api-key	✅	null	Specifies the API key required for accessing Carpose's services.
data-primary-color	❌	#000000	See --bs-primary @ Bootstrap
data-secondary-color	❌	#5c5c5c	See --bs-secondary-color @ Bootstrap
data-search-url-forward	❌	null	If this attribute is set, the search results are not displayed on the current page. Instead, when the search button is clicked, it redirects to the specified URL, including a hash of the currently selected form inputs.
data-force-scroll-to-top	❌	false	Forces the application to automatically scroll to the top of the page. If set to true, this option overwrites the data-enable-page-load-focus option.
data-enable-feature-360	❌	true	Enabling this feature shows, if licensed, the 360° interior and exterior viewer.
data-enable-page-load-focus	❌	true	When set to true the form is automatically focused on page load. if set to false, the option data-force-scroll-to-top is automatically set to false.
data-disable-url-params	❌	false	Prevents the URL hash from being appended.
data-default-form-state-hash	❌	null	When enabled, the form loads with a predefined initial state, which is also restored upon reset.

Examples

Embedded search form with results

In the initial empty state of the search form, no preselected options are set, allowing users to freely input their search criteria. Once the form is submitted, relevant results are displayed directly on the page. The selected form fields are appended to the URL as a hash, enabling easy sharing and bookmarking of specific search configurations.

<div data-carpose-component="car-search-form"
     data-api-key="your-api-key"
></div>

Embedded search form with redirect

The brand-specific page highlights a particular car model. The search form on this page is configured to not display results directly. Instead, it redirects users to a dedicated results page upon submission. Additionally, the search form loads with an initial preselected state, automatically setting both the brand and model to match the featured car. The search form parameters are not included in the URL, ensuring a clean and focused navigation experience.

<div data-carpose-component="car-search-form""
     data-api-key="your-api-key"
     data-search-url-forward="https://example.org/search-result-page"
     data-disable-url-params="true"
     data-default-form-state-hash="eyJjb25kaXRpb24iOltdLCJtYW51ZmFjdHVyZXIiOiIzNyIsIm1vZGVsIjoiMjg1IiwibWlsZWFnZSI6bnVsbCwicmVnaXN0cmF0aW9uLXllYXIiOm51bGwsImdlYXJib3giOm51bGwsInZlaGljbGUtdHlwZSI6bnVsbCwiZnVlbCI6bnVsbCwiZGVhbGVyIjpudWxsLCJwcmljZS1mcm9tIjpudWxsLCJwcmljZS10byI6bnVsbCwic29ydGluZyI6bnVsbCwiZmVhdHVyZXMiOltdfQ"
></div>

For configuring the initial selection, the form hash can be copied from a different form where the parameters are appended to the URL. This allows for easy customization and consistency across different instances of the form.