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) 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 aviasales 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