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 tickets (search from Aviasales/Jetradar) and hotels (search from Hotellook) search form for your 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 include:

Important notice!

The following problem may occur when you are using the search form: when you're directed to Aviasales / White Label, the search will not start automatically. To fix it, you should comment on this string of code (jquery.twidget.js):  container.find('input[name="with_request"]').remove();. Here is an example:

/* remove with_request input from jetradar form */ 
if(this.settings.locale == 'en') {
/* container.find('input[name="with_request"]').remove();*/
container.find('input[name="oneway"]').remove();
}

Was this article helpful?

Have more questions? Submit a request