How to create your own search form

At the request of our affiliates, we have created a new search form template through which one can create an absolutely unique airline ticket or hotel search form for his/her website.

This form supports jquery 1.х & 2.х.

Important note: The template is offered as-is and shall be adjusted by affiliates. We will neither adjust this template, nor teach the basics of html, js, and css. If you cannot adjust the template yourself, please hire a freelancer to do so.

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 examples of different types of search forms;
  • jquery.js – the file required for the template’s functioning;
  • 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 to post 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.

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 hotel search form;
  • type – the search form type:
    • avia – airline tickets only;
    • hotel – hotels only;
    • avia_hotel – the combined form (can be switched using tabs, the default value).
  • open_in_new_tab – opens the search results in a new tab (the default value is true).

An example of search form implementation

A project on Github contains examples of 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 results of such changes. Examples of the search forms:

Was this article helpful?

Have more questions? Submit a request