Amazon Affiliates
Now Reading
How to Add Amazon Search Box to WordPress Using HTML

How to Add Amazon Search Box to WordPress Using HTML

updated by MizagornFebruary 20, 2015
by M. K. SafiDecember 3, 2010

There are two ways with which you can add an Amazon search box to your WordPress site (or any site, for that matter).

  1. You can use one of the inflexible search widgets that are provided in the Amazon Associates Central, or
  2. You can create your own Amazon search box using HTML and have total control over how it works

I’ll show how Amazon search box widgets work, but I’ll then talk about the better way to create an Amazon search box using plain HTML and how to add it to WordPress.

Amazon Search Box Widgets

Amazon has two search box widgets. One is simply called Search Box and the second is called Search 2.0.

As you see in the screenshot below, all you can do with the standard search box widget is set its size and embed it somewhere on your site. You don’t have any other configuration options. That’s pretty inflexible, I think.


Amazon Search 2.0 Widget

The second option is using the Search 2.0 widget. It’s a lot different from the standard search box.


As you can see, it has a lot more configuration options, but in my opinion, it provides an awkward search experience to the user. It returns the search results within the widget itself! I, for one, don’t like that.


So, why not just have a normal HTML search box that looks like this?


Or this actual live version:

It is possible. And using this normal HTML, you have complete control over the CSS and HTML.

The Actual HTML

The actual HTML for the search box is simple

<form action="" method="get">
    <input type="hidden" name="tag" value="ms084d-20" />
    <input type="text" name="keyword" size="20" value="" />
    <input type="submit" value="Search Amazon" />

Replace ms084d-20 with your own Amazon Associate ID and embed this HTML where ever you like. You can embed it in the sidebar using the WordPress Text widget that allows you to add any arbitrary text or HTML to the sidebar.

And because this is a simple HTML search box, you can modify its appearance using CSS.

When the user clicks on the Search Amazon button, they’ll be taken to the results page on and the commission for any purchase they make will be credited to you!

What's your reaction?
Wink It
Kill It
About The Author
Profile photo of M. K. Safi
M. K. Safi
  • January 26, 2014 at 7:32 pm

    I tried putting that code into my text/html widget. All that happened was that the code showed up on my page and not the search box.

  • Abhishek
    December 15, 2013 at 9:42 am

    It’s of no use. Because:

    1. When the user searches any item. The tag is placed in the URL at first place.

    2. But when the user click BUY button on amazon website for that product, the tag from URL is gone.

    3. This means that amazon can never pay using just only tag, which is manipulated by some HTML technique.

    4. Proper search technique includes, link to be converter into encoded signature with (TAG+ASSOCIATEID+LINKCODE)

    Your link looks like this:

    It must look like this:

  • July 19, 2013 at 10:45 pm

    How do I center the “search amazon” button under the search box?

  • June 14, 2013 at 9:23 pm


    Is it possible to customize the search function so that when you enter your search query, it produces a list of results, but limited to a keyword?

    For example if I wanted users to be able to search anything “left handed” I would limit the search results to keyword “left handed”.

    Also, I was wondering if you could customize this html so that it returned the results on another frame in your website instead of a new page, and if you could customize how the search results were displayed.

    Any insight would be really helpful!



  • Will
    June 4, 2013 at 9:43 am

    MK, I’m confused where I have that form action code. I already see the wp file through wp dashboard ( widget.php, sidebar.php).. But I don’t know on what file I have to put that form action code.
    Would you mind let me know on what file I should paste that code?


  • Will
    May 30, 2013 at 5:57 pm

    MK, in order to place the search from, you said we have to have complete control of the CSS. I wonder where should we place that HTML you give it to us. I mean on what file of our WP theme?

  • April 28, 2013 at 6:10 pm

    Awsome cool info. I will use it to it’s fullest. thanks.:]

  • April 27, 2013 at 10:10 pm

    Thanks for the simple way of doing this search box! Cheers!

    — Andy

  • February 27, 2012 at 10:52 am

    Hi MK,
    truly awesome tutorial for me anyway can you tell me how to make appeareance of search box more proper…my “search amazon” in the box not centered yet…any suggestion really appreciated.


    • awhill00
      March 21, 2014 at 6:17 am

      The quick and dirty way is to use inline styling with a div tag like this:

      The appropriate way is to find the id of your element and apply the text-align:center in your css.

  • NJD
    December 9, 2011 at 1:37 am

    Can this form be revised to return a list of Amazon “customers who bought similar items”? Thanks!

  • December 8, 2011 at 9:51 pm

    Hi Winkpress, Is it possible if I want to enter specific keywords into the search results?

    • Profile photo of M. K. Safi
      December 9, 2011 at 1:40 am

      What do you mean? This search box is for users to search for stuff on Amazon from your own website. If you want to refer your users to a specific search result page on Amazon based on a certain keyword, perform the search on Amazon yourself and then generate an affiliate link for that results page. Then paste that link on your site.

  • November 25, 2011 at 9:50 am

    Hey M.K. Thanks for the guide. I was wondering if you ever noticed the search field rendering in different widths depending on the browser used. For example when I add the custom html amazon search to my side bar and load it in chrome the field is within the sidebar however when I check it out in firefox the field width escapes the sidebar. I tried altering the size value and when I do that and make it look presentable in Firefox it looks very small in chrome. Could the source of this problem be font related?


    • Profile photo of M. K. Safi
      November 26, 2011 at 4:41 pm

      Hi Alex, There’s an example of an Amazon HTML search box right on this page. If you view that search box in Chrome and Firefox, you’ll notice that there’s small variation in the appearance. But it’s not that bigga deal. It certainly doesn’t mess up the layout of the page. At any rate, this is a CSS/design problem more than anything—and I suck at that. Sorry.

  • Bill
    August 15, 2011 at 7:42 pm

    I tried your script – and it returns results throuigh yahoo – but if I do a “link cvheck” it fails – which means I will NOT get paid – the search is located on a test page

  • July 13, 2011 at 11:52 pm

    While I have your attention, I would like to ask you one question: what has been your experience with the Omakase links? I tried them long ago and the ads they provided were no match for my content, no matter what. Have they improved since then? Just curious :)

    • Profile photo of M. K. Safi
      July 17, 2011 at 3:25 pm

      Honestly, I have never tried Omakase on a live website. But I can totally understand if Omakase links didn’t match your content. It’s not easy analyzing a web page’s content and determining its topic in order to show relevant ads. I guess you have to make sure that the Amazon web crawler can access your pages and read them. If you use too much flash or unsemantic markup, it’s gonna be hard for machines (like Google and Amazon bots) to understand and analyze your content.

  • July 13, 2011 at 11:48 pm

    Awesome! Just the information I have been looking for. You did not mention that their flash widgets terribly slow down the webpage – one of the reasons I don’t like them. And the plain HTML search form does not have a target_blank option so that is also not an option for me. Yours is perfect! 😉

    One thing: I would like to provide a link to Amazon homepage and Amazon’s privacy policy right below the search form: I think I read it somewhere in Amazon TOS that it is a requirement to display either a link/logo (and you can link the logo/text straight to the homepage, tagged with your affiliate ID of course!) as well as a link to privacy information of amazon on any ad/widget you use as part of your affiliate promotion (if I am wrong I would like to be corrected lol, but almost all of their ads have those links anyway, so I would include them just to be on the safe side and also to comply with the “FTC guidelines’ of ‘full disclosure”).

    Other than that, it is great! If I ever write a post on the subject I would be sure to link to your blog 😀

    • Profile photo of M. K. Safi
      July 17, 2011 at 3:21 pm

      Hi Arindam, I’m glad this tutorial meets your requirements. You can go ahead and include any number of links below the search box, even one to the privacy policy. I personally try to not worry about legal stuff until someone complains–usually it’s still not too late to fix stuff then…

  • Mark
    July 7, 2011 at 8:19 pm

    Is it possible to keep the search results showing up on your site as well? Like possibly an iframe or something? The target new option is good but would really like to keep the whole experience on site… thanks in advance.

  • Chelle
    July 3, 2011 at 12:35 am

    Hi there,

    I used your search box html and it works great in using my affiliate link to the amazon general page but I don’t see it after that when a product is clicked on. Also.. is it possible to make the search open on another page instead of moving the reader off of my site?

    Thank you for a great post. I am new to all this [Amazon] and found it very interesting. Excellent.

    • Profile photo of M. K. Safi
      July 3, 2011 at 3:03 pm

      Hi Chelle, You only have to use your Amazon affiliate link once. When your visitor browses Amazon after having used your search box, they will still carry your affiliate information with them, so when they make a purchase it will be credited to you.

      If you want the search results to open in a new window, use this HTML:

      <form action="" method="get" target="_blank">
          <input type="hidden" name="tag" value="ms084d-20" />
          <input type="text" name="keyword" size="20" value="" />
          <input type="submit" value="Search Amazon" />

      The difference is target="_blank".

You must log in to post a comment