How to create own search form

At the request of our affiliates we have created the new search form template, with the help of which one can create an absolutely unique airline tickets or hotels search form for his website.

Such a form supports jquery 1.х & 2.х.

Important comment: the template is offered as is and shall be adjusted by the affiliates. We neither adjust this template, nor teach the bases of html, js & css. Please. If you cannot adjust the template – appeal to the freelancers.

Download archive

The archive with the template includes

  • images – the folder with the icons, used in the search forms;
  • few_forms.html – the file template, which includes the code with the examples of different types of the search forms;
  • jquery.js – the file, required for functioning of the template;
  • jquery.twidget.js – the file with the js code of a search form. This file also includes the code example for localization of the search form’s fields;
  • reset.css, style.css – the style files.

Invocation of a search form in the website code

The following code shall be used for posting of a search form on a website:

<div id="twidget" class="twidget-container"> </div>
<script>
$('#twidget').twidget({
locale: 'en',
marker: 1234,
default_origin: 'SVO',
default_destination: 'ekat',
default_hotel_location: 'rio'
});
</script>

where  twidget – the search form code invocation parameter.

The search form adjustment parameters

The following parameters can be assigned to a search form at its creation:

  • locale – the search form language, it also affects the search results language;
  • marker – the affiliate marker;
  • default_origin – the default point of departure. Both an IATA code and a city name may be used. At the same time, an incomplete name may be entered – the autocomplete function shall offer the required city;
  • default_destination – the default point of destination. Both an IATA code and a city name may be used;
  • default_hotel_location – the default city in a hotels search form;
  • type – the search form type:
    • avia – the airline tickets only;
    • hotel – the hotels only;
    • avia_hotel – the combined form (can be switched using the tabs, the default value).
  • open_in_new_tab – opens the search results in a new tab (the default value is true).

The example of a search form implementation

There is a project on Github, which contains the examples of the search forms: https://github.com/tp-search-form/. A page-example has been created for each repository. You can change any parameters and see the result of such changes. The examples of the search forms:

Was this article helpful?

Have more questions? Submit a request