If your website or online store is built using WordPress or Shopify (or some other popular tool for eCommerce sites), then it should be relatively easy to add a FedEx tracking box to your site. And you should be able to do that without any need to write any code at all. WordPress and Shopify have a huge library of plugins that provide this functionality out of the box.
However, what if your website is fully custom and you just need some quick code to get you going on adding that FedEx tracking box? Or maybe you actually use WordPress but just can’t find any plugin that offers you this basic feature without unnecessary bloat (yeah, it may be hard to find a simple plugin that gives just this feature and nothing else).
This article addresses custom situations like those and guides you on how to write no nonsense HTML code to display your FedEx tracking box. I even have a working example on this page for you to play with. So let’s start…
Creating Your FedEx Tracking Box
When you visit the FedEx homepage, you will see a tracking box that looks like this:
Your goal is to create a similar (but bare bones) form on your own custom site so that your customers don’t have to go to the FedEx website to track shipments from your business.
A textbox and button HTML form is pretty basic. There are just a couple of things you need to note in order to get this working:
- You need to know where to point the form action. And for this purpose, the url for the form action is: https://www.fedex.com/apps/fedextrack/index.html
- You must correctly set the name property of the textbox because this property needs to be passed as a parameter name to the FedEx server in the form of a GET request. The parameter that the FedEx server expects here is “tracknumbers” – if you use a different name, the tracking won’t work.
Here’s the HTML code you need:
<form method="get" target="_blank" action="https://www.fedex.com/apps/fedextrack/index.html"> <input type="text" name="tracknumbers" placeholder="Enter your FedEx tracking ID(s)" /><br\> <br\> <input type="submit" value="Track" /> </form>
What the above form effectively does is that it submits a HTML GET request to the FedEx server. The full GET request url looks like this:
A Live Example Of A FedEx Tracking Box
This live FedEx tracking box works with the exact same code above. No modifications.
Multiple tracking IDs are supported too. Just separate your tracking numbers with commas.
You can test it using these mock tracking codes provided by FedEx for test purposes: 111111111111 and 123456789012
If you don’t want the results opening in a new browser tab, just remove target=”_blank” from the form tag.
Want To Email Your Customers A FedEx Tracking Link? Easy!
To allow your customers track FedEx shipments via email, you just need to send them a link in the same format as was discussed above.
So if for example, your customer’s tracking ID is 123456789012, just send them this link via email: https://www.fedex.com/apps/fedextrack/index.html?tracknumbers=123456789012
And if your customer is tracking say 2 items with IDs 123456789012 and 111111111111, send them a link in this comma separated format: https://www.fedex.com/apps/fedextrack/index.html?tracknumbers=123456789012,111111111111
And so on for even more tracking numbers… Enjoy!