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>
locale: 'en',
marker: 1234,
default_origin: 'SVO',
default_destination: 'ekat',
default_hotel_location: 'rio'

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: 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 Jetradar / 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();*/

Was this article helpful?

Have more questions? Submit a request