Transferring Search Box From Old Page to New Design (From Scratch)

Question

I am a computer science major and relatively experienced front-end developer (HTML, CSS, Javascript, as well as some development history with PHP, Java, Ruby and Linux Command Line).

Recently I signed on with a team that is doing some webpage redesign for a product-sales company. I have been assigned to take the client's pdf templates and turn them in to working HTML/CSS files that they can implement to their website when they so please. I have got every part of the assignments complete, EXCEPT for the search box found on the header of each page.

My issue is that I need to implement the same search box from their old header design in to the new one. I found a great example that is almost exactly the same as what I am dealing with at this website (http://shop.manorfinewares.com/intro.html). [It is the search bar in the upper right]

I am unsure as to the correct process to take a search bar (such as this one) and transfer it to my new layout that I have coded for them while making sure to maintain all of its functionality when I hand them the finished product. [For sake of argument lets just say it is the EXACT same search bar as the one listed at the site linked to above]

I cannot express how grateful I am to anybody who can help out. Not quite sure what I can offer in return, but if you can think of anything, I will be sure to oblige. Any tips are greatly appreciated. Let me know if there is any other information that you may need to better assist :) Hope this message is read in good spirits and that all is well (Sorry for the length of this btw, it's my first time posting)

Answer 1

Instead of such lengthy post, you could have posted two images, one of what you currently have and one what do you want to achieve. It's very unclear atm.