Search form

Search form

Form for plane ticket search

search_form_flight.png

Form for hotel search

search_form_hotel.png

Main properties

  • Form size can be flexibly configured, with the ability to set any width from 200px to 940px.
  • The form is available in seven bundled color themes. You can also manually specify a color for the form (changing the color of the background, border, text, icons, and buttons).
  • The upper part of the form contains a logo (which can be disabled if necessary). We do not recommend hiding the logo since our trademark increases the trust placed in forms and, therefore, improves conversion rates. In addition, when the logo is clicked, an affiliate marker (a cookie) is placed on the client computer, meaning that all sales from the logo are counted for our affiliates.
  • The lower part of the form contains a constantly updated Best Deals section (can be disabled).
  • The form is available in English, Russian, German, French, Spanish, and Italian.

The form code can be copied from your account page, under Tools –> Search forms.

Form builder (for independent development)

You can use our special form builder to create your own form and integrate it into the design of your site. Go to the affiliate account page, then to the Search forms tab. Click the Create new search form button to create a form, then click the Edit button to edit it. In the window that opens, you can configure the appearance and content of the search form:

2017-04-04_11-31-27.png 

2017-04-04_11-32-17.png

To track the ratio of profitable clicks to the total number of clicks for different forms on different sites or pages, add a unique additional marker, which is displayed in the statistics on your account page.

If you need a unique form that fully “meshes” with your design, use HTML. HTML and CSS knowledge is necessary for this customization. You can learn more about this here.

Additional marker

An additional marker is a parameter that allows for the tracking of sales separately for each traffic source/promo material.

links2.jpg

Say that you are using several promo materials on different areas of various sites: a search module in the sidebar, links to ticket searches in site articles, a banner in the footer, etc.

To get separate statistics for each promo material, you must use additional markers.

Statistics on additional markers

For statistics on additional markers, go to Report --> Sales reportInformation can be grouped by markers.

Example of how to place an additional marker in a link: http://www.jetradar.com/?marker=11111.sidebar, where “sidebar” is the additional marker.

In the form builder, the additional marker is set using a special field. You should enter only the marker in the field, without additional characters. The marker can contain numbers, Latin letters, underscores (_), and hyphens (-).

Creation of a text link is similar in this regard: an additional marker can be added to a link through the form builder on the affiliate account page.

How to edit code of search form 

To edit the fields of the search form, uncheck the checkbox "Short code".

1.jpg

The form code becomes:

<script charset="UTF-8" type="text/javascript">
window.TP_FORM_SETTINGS = window.TP_FORM_SETTINGS || {};
window.TP_FORM_SETTINGS["51226f99649ab833e300000a"] = {
"handle": "51226f99649ab833e300000a",
"widget_name": "Wix",
"border_radius": "5",
"additional_marker": "wix",
"width": 940,
"show_logo": true,
"show_hotels": true,
"form_type": "avia_hotel",
"locale": "en",
"currency": "usd",
"sizes": "default",
"search_target": "_parent",
"active_tab": "avia",
"search_host": "www.jetradar.com/searches/new",
"hotels_host": "hotellook.com/search",
"hotel": {
"name": "Ритц-Карлтон Москва",
"location": "",
"hotels_count": " отелей",
"search_id": "333601",
"search_type": "hotel"
},
"hotel_alt": "Hotellook - best prices on hotels worldwide. Compare prices across 30 booking websites and save on your hotel.",
"avia_alt": "",
"id": 316,
"marker": "16886.wix",
"origin": {
"name": "Moscow",
"iata": "MOW"
},
"destination": {
"name": "Berlin",
"iata": "BER"
},
"color_scheme": {
"name": "white_blue",
"icons": "icons_blue",
"background": "#ffffff",
"color": "#000000",
"border_color": "#cccccc",
"button": "#03bae4",
"button_text_color": "#ffffff"
},
"hotels_type": "hotellook_host",
"best_offer": {
"locale": "en",
"currency": "usd",
"marker": "16886.wix",
"search_host": "www.jetradar.com/searches/new",
"offers_switch": false,
"api_url": "//minprices-jetradar.aviasales.ru/minimal_prices/offers.json",
"routes": []
},
"hotel_logo_host": "hotellook.com",
"search_logo_host": "www.jetradar.com",
"hotel_marker_format": "marker=",
"hotelscombined_marker": null
};
</script>
<script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=204"></script>

Parameters of search form

  • handle - unique ID form (can't be modified!).
  • widget_name - form name.
  • border_radius - rounding radius of borders.
  • additional_marker - additional marker.
  • width - width of the form.
  • show_logo - display a logo of Aviasales (if true).
  • show_hotels - display search tab hotels.
  • form_type - type of form (only air, only hotels and mixed).
  • locale - language of form.
  • currency - select the currency to display in search results. 
  • sizes - responsible for size of the form (a / compact). 
  • search_target - how search is opening (in a new window, in a new tab, in the same window). 
  • active_tab - the name of the active tab by default. 
  • search_host - service parameter. 
  • hotels_host - service parameter. 
  • hotel - information about the default hotel. 
  • id - service parameter. 
  • marker - affiliate marker. 
  • origin - name or IATA code for the point of departure. The IATA code is shown in uppercase letters, for example,
  • destination - name or IATA code for the flight destination. The IATA code is shown in uppercase letters, for example,
  • trip_class - the class of the flight, economy or business.
  • color_scheme - color scheme of a form.
  • hotels_type - service parameter.
  • best_offer - settings of a block "Best Offer".
  • hotel_logo_host - service parameter.
  • search_logo_host - service parameter.
  • hotel_marker_format - service parameter.
  • hotelscombined_marker - service parameter.

Attention! If you are working with a full version of a code form, you must make changes in code directly on the page where it is embedded.

How to integrate a search form in LiveJournal

1, Create a search form on your account page.

2. Copy the ID of the code from "Code for posting on the site":

6.jpg

3. Insert the ID of the search form into the code:

<lj-template name="shop" shop="aviasales_flights_hotels" api="ID_search_form" width="342" height="293" />

4. Edit the width and height of the form if required. The maximum width of the form is 940 px.

5. Place this code in your blog.

6. Don't delete the search form in your account; otherwise, it will be lost in your blog.

How to place the search form in a Jimdo site

Log into the section"Head" and enter the first part of the form code. The illustration shows how to enter the section "Head".

jimlla1.jpg

Paste the code:

<link rel="stylesheet" type="text/css" href="//www.travelpayouts.com/assets/widgets/partners/init.css?v=44">

After that switch to HTML mode (in the post editing, the body of the site or any other part where you want to insert the form) and insert the second part of the code.

jimlla2.jpg

Here is an example of this form of the "Affiliate Tools" - "Search form":

<script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=102"></script>

After that, save the changes and the form will be displayed.

How to place a plugin and search form in a WordPress blog

Download the plugin to your computer from the WordPress site. After that, read our instructions about installing and setting the plugin.

How to place a search form in a Wix site

This article describes how to place the code for the search form on a Wix site.

1. Create and configure the search form in your account page on travelpayouts.com.

2. Log into Wix and open the page editor. In the left menu click "Add" and select "Apps".

1.jpg

3.  In the next menu select "HTML".

2.jpg

4. To add the code of the search form, select the mode "HTML code".

3.jpg

5. In the box "html" add this code:

<html> 
<body>
<script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=204"></script>
</body>
</html>

where instead of

<script charset="UTF-8" src="//www.travelpayouts.com/widgets/51226f99649ab833e300000a.js?v=204"></script>

paste the code of the search form from your account in the travelpayouts.com.

5.jpg

The result will be:

4.jpg

Click "Update". The search form will be displayed on the page of your site.

Was this article helpful?

Have more questions? Submit a request