Show the Highest Bid on Your Auction Form Using the API

Auction forms come with special considerations for form owners. Silent auctions are those that collect bids without knowing what everyone else bids. The person with the highest bid gets contacted after the auction completes and they typically don’t know by how much they won.

Collecting bids on products and services works by adding a Number item and letting visitors enter their bid. Adding a small amount of Javascript turns the silent auction into a live auction by displaying the highest bidder.

How to Show the Highest Bid

This method uses the Formsite API to look at one form item, sort the results highest to lowest, then return the top value.

Step 1: Start by building the form and adding the auction information. Describe the product or service in the auction, collect the name and contact info, and provide a Number item for the visitors’ bids.

Step 2: After completing the form, go to the Form Settings -> Integrations -> Formsite API page. From there, collect the following information:

• API base URL (X)
• Access token (Y)
• Item value for the bid field (Z)

Step 3: Copy and paste the following code into a text editor to make editing easier. Replace the placeholders X, Y, and Z in the code with the values from step 1. Feel free to also change the text “High bid” and “No responses yet” if you want.

<div id="bid" style="padding:25px;font-size:18px;">High bid: </div>
<script>
  fetch('X?token=Y&sort_id=Z&sort_direction=desc&limit=1')
    .then(response => response.json())
  .then(data => {
    var bid = typeof data.results[0] == "undefined" ? "No responses yet" : data.results[0].items[0]["value"];
    var bidWithCommas = bid.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    document.getElementById("bid").textContent += bidWithCommas;
  });
</script>

The base URL points to your Formsite account and the specific form. The access token is like your account password so take care to protect it from unauthorized access. The item value tells the script which column to find the bid amounts. The sort direction says to sort high-to-low, and the limit says to get the top value.

The rest of the code says what to do if there are no results and if there are, what item to update.