Search boxes that you can brand 10


Our white label hotel platform, Chameleon, contains a user-friendly search widget generator within the control panel allowing you to customize size, colors, and destinations within the widget. However, some of you may want more control over the size and colors used in your search form. To meet your needs, we’ve created this helpful guide enabling you to modify and fully brand search forms on your own. As always, we’ll create a basic example for you to follow, and then you can customize according to your needs – the sky is the limit!

First let’s create a CSS box that contains the search widget

In short, we are going to enclose the search box code in a CSS box that you can embed in any HTML page.

There are numerous free resources available on the Internet, and you should take advantage of them when possible. In this instance, I’m looking for code for a CSS box with a rounded corners and Spiffybox.com comes very handy as it provides the code and background images necessary for creating a custom rounded corners box.

For this example, I’ve selected the following settings, but feel free to adapt them to your needs:

  • Image Width(px): 800
  • Image Height(px): 800
  • Corner Radius(px): 25
  • Forground Color: eaf0f0
  • Border Color: d6dadb
  • Background Color: ffffff

Instructions on how to use Spiffybox are pretty straightforward in the page, so you should have no problems following them.

Next we will copy the code from Spiffybox into a blank HTML file. The code will look something like this:


This is a header

This is for your content.

I have changed the url of the background image to accommodate it to my images folder path.

The next step is to add a couple of styles in the style sheet to define how the text should display in the search widget and apply the styles to the DIVs (layers) that will wrap the content:

#HEADLINE {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size:24px;
	margin-top: 5px; margin-bottom: 0px;
	text-align: left;
        font-weight: normal;
        color: #222;}

fieldset {font-size: 10px; border: 0px;}

#SUBHEADLINE{
        font-family: "Lucida Grande", Tahoma;
	font-size: 10px;
	font-weight: lighter;
	font-variant: normal;
	text-transform: uppercase;
	color: #666666;
        margin-top: 10px;
	text-align: left!important;
	letter-spacing: 0.3em;}
.....

This is a header

This is for your content.

The box should look something like this at this point:

Adding a Search Widget in Our Box

Now we have to paste the code for the search widget. First, copy the code. You can find it here:  http://pastebin.com/MaibMpej, and then paste it right after: div class=”cssbox_body” id=”SUBHEADLINE” Note: you need to erase: “This is for your content.”

Next, you will need to replace the following attributes in the code you just pasted:

  • If you have created a CNAME replace In the form label within the search code replace action=”http://cname.travelnow.com/index.jsp” with action=”http://YOURCNAME.com/index.jsp”. You can find more information about domain masking and CNAMEs in our post about masking urls
  • Replace 9999 with your CID number in the following line: input type=”hidden” name=”cid” value=”9999″

Our search widget should look like this now:

You can use this code for a search box in any HTML page or in a CMS widget.

If you want the entire code of this tutorial you can copy it from the following link:

http://pastebin.com/XERL2DCm

Adding a Logo to Your Search Box

We are going to add a logo to our search box, which will allow you to have a fully branded search box that you can paste in other pages such as your Facebook fan page. For this example, I am using the following image, but feel free to use any image of a similar size:

Adding a logo to our search box couldn’t be easier, you just need to place an image call between the H2 tags of the search box code we’ve just created:

<h2>Search for your Hotel</h2>

And this is how our search box will look like:

Hotel Availability Search Box

If you are creating single hotel pages and would like to have a search box that only searches availability for that particular hotel, this is the code that you must use:

http://pastebin.com/H27dWSR2

You can put this code inside the cssbox_body layer:

<div id="SUBHEADLINE" class="cssbox_body">
This is for your content.</div>
</div>

You can see the code including the CSS box you can copy it from here:

http://pastebin.com/RdXs2q2R

There are a couple of things that you will need to change in this code to customize it for your site. First, search for the following line within the code:

<form action="http://travel.ian.com/index.jsp?pageName=hotAvail&cid=9999&isHotels=true&isCondos=false&hotelID=126913&passthrough=true" method="POST" name="hotForm">

Next, complete the following instructions:

  • You need to change 9999 in the cid=9999 part of the url to you own CID so any bookings received through the search box are allocated to your account
  • • If you created a CNAME to mask the url of your affiliate site, replace travel.ian.com with your CNAME in the line of code mentioned above
  • • Change the hotelID=126913 to the HotelID of the hotel you want to create the search box for. You can locate the hotelID by downloading our properties databases from the Merchandising Resources tab of our Affiliate Center. Another way to perform a search for the hotel in your affiliate site. Simply open the hotels page and copy the HotelID from the url, for example in http://cname.travelnow.com/templates/326659/hotels/126913 the hotelID is the number that comes after /hotels/, in this case 126913.

Also you will want to change the code in the following lines to reflect the name of the hotel

<img src="images/logo.png"> The New Yorker Hotel

Your hotel search box should look like this:

It is very easy to create a branded search box for your affiliate site according to your needs, so feel free to experiment and modify the CSS to create your own version. If you create something you’d like to share it with us, feel free to post in the comments section below, and include the URL where you are using the search widget. We always like to see how our affiliates utilize the tools we provide – so show us what you come up with!

International Search Boxes

If you are planing on using our search boxes in an international site using a language that contains special characters you will need to make sure that the page has the correct encoding for that language, when in doubt use (UTF-8).

Also you will need to change the following tag within the search box code to configure it for the language you want:

<input type="hidden" name="locale" value="">

You will need to enter the language value in the attribute value=””

You can check in this page the values for each language, but bear in mind that some languages many not be implemented on our system.

For example if you want to configure the search box  so it searches in Traditional  Chinese you need to configure the tag as it follows:

<input type="hidden" name="locale" value="zh-TW">

You will also need to translate the different elements of the search box into the language you want to use.

Download the file for a search box that searches for results in Traditional Chinese:

Traditional Chinese Search Form

Examples

These are a few simple examples of effects you can achieve with CSS and our search box code:

[nggallery id=1]

Resources

These are a fre CSS resources that can help you create nice CSS search boxes:


About Jose Truchado

SEO Expert Jose Truchado has been working on Search Engine Optimization since 1996, he is a marketing coach, social media advisor, and entreprenuer founder of several successful start-ups within the travel industry. Jose has been providing SEO and SEM support to EAN partners since July 2009. Google+ profile: Jose Truchado on Google +


Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

10 thoughts on “Search boxes that you can brand