Travelpayouts Blog

How to Create a Flight Search Form

Reading time:  2  min.
10 tips for improving search box or form conversion rates

At our partners’ request we have created a new search form template. With this template, you can create completely unique flight or hotel search forms for your website.

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

Important note: The template is provided “as is”, all the customization is done by the partner. We do not provide customization services for this template and we do not provide training on the basics of html, js and css. Please use the services of freelancers if you have difficulties in customizing the template.

Download the template in an archive.

What’s Included in the Archive

  1. Images: a folder with icons used in the search form.
  2. Few_forms.html: a template file containing a code with examples of different types of search forms.
  3. Jquery.js: a file needed for the template to work.
  4. Jquery.twidget.js: a file with the js code of the search form. This file also contains an example of a code for localizing the search form fields.
  5. Reset.css, style.css: style files.

Calling the Search Form in the Site Code

To place the search form on a site page, use the following code:

<div id="twidget" class="twidget-container"> </div>
locale: 'en',
marker: 1234,
default_origin: 'SVO',
default_destination: 'ekat',
default_hotel_location: 'rio'

where twidget is the parameter for calling the search form code.

Search Form Settings

When creating a search form, the following parameters can be passed to it:

  1. Locale: The search form language; this parameter also controls the search result language.
  2. Marker: An affiliate marker.
  3. Default_origin: The default departure point. Both IATA code and city name can be used. You don’t need to enter the full name – the auto-complete feature will complete the city name for you.
  4. Default_destination: The default destination. Both IATA code and city name can be used.
  5. Default_hotel_location: The default city in the hotel search form.
  6. Type: search form type:
    • Avia: only flight tickets;
    • Hotel: only hotels;
    • Avia_hotel: combined form; tabs are used for switch over; this is the default value.
  7. Open_in_new_tab: open search result in a new tab (the default value is true).

Example of Search Form Implementation

On Github, there is a project created with examples of search forms: An example page is created for each repository. You can change any parameters and see the outcome of such changes.

Examples of search forms: