How do I add a File Extension Search Box to my website?
Published June 16, 2011•Updated October 20, 2016
The FileInfo Search Box is free and easy to use. Allow your website visitors to look up file extensions by adding the search box below to your website.
Simply place the following HTML5 code in any page where you would like to add the File Extension Search Box.
<!-- Begin FileInfo Search Box -->
<style>
#fileinfo { width: 175px; text-align: center; border: 2px solid #1976D2; border-radius: 5px; margin: 20px auto; overflow: hidden; }
#fileinfo img { width: 175px; height: 40px; padding: 0; border: 0; margin: 0 0 -6px 0; }
#fileinfo #term { width: 116px; height: 25px; font-size: 16px; padding: 0 5px; border: 1px solid #2196F3; border-radius: 5px; margin: 8px auto 6px auto; vertical-align: middle; }
#fileinfo #term:focus { background: #FFFDE7; outline: none; border-color: #1E88E5; }
#fileinfo #submit { width: 30px; height: 25px; color: #FFF; background: #4CAF50; border: 1px solid #43A047; border-radius: 5px; margin: 2px 0 0 0; vertical-align: middle; }
#fileinfo #submit:hover { background: #43A047; }
</style>
<form action="http://fileinfo.com/search" method="get" id="fileinfo">
<a href="http://fileinfo.com/" target="_blank"><img src="http://fileinfo.com/img/main/fileinfo.png" alt="FileInfo Search Box"></a>
<input type="text" name="term" id="term"> <input type="submit" name="submit" id="submit" value="Go">
</form>
<!-- End FileInfo Search Box -->
<style>
#fileinfo { width: 175px; text-align: center; border: 2px solid #1976D2; border-radius: 5px; margin: 20px auto; overflow: hidden; }
#fileinfo img { width: 175px; height: 40px; padding: 0; border: 0; margin: 0 0 -6px 0; }
#fileinfo #term { width: 116px; height: 25px; font-size: 16px; padding: 0 5px; border: 1px solid #2196F3; border-radius: 5px; margin: 8px auto 6px auto; vertical-align: middle; }
#fileinfo #term:focus { background: #FFFDE7; outline: none; border-color: #1E88E5; }
#fileinfo #submit { width: 30px; height: 25px; color: #FFF; background: #4CAF50; border: 1px solid #43A047; border-radius: 5px; margin: 2px 0 0 0; vertical-align: middle; }
#fileinfo #submit:hover { background: #43A047; }
</style>
<form action="http://fileinfo.com/search" method="get" id="fileinfo">
<a href="http://fileinfo.com/" target="_blank"><img src="http://fileinfo.com/img/main/fileinfo.png" alt="FileInfo Search Box"></a>
<input type="text" name="term" id="term"> <input type="submit" name="submit" id="submit" value="Go">
</form>
<!-- End FileInfo Search Box -->
NOTE: You can customize the above code as needed to fit the style of your website.
When your visitors type in a file extension in the search box, they will be able to view the file extension information directly from the FileInfo.com website.
If you have any questions about how to implement the search box or how to link to FileInfo.com, please contact FileInfo.