# Create the example HTML page

Source: https://developer.avalara.com/products/avalara-1099-and-w9/integration-guides/1099-and-w-9/jvb3601872303264/

Guide: 1099 & W-9

# Create the example HTML page

Create a sample W-9 HTML file so you can review and update it in your editor and browser.

Before you begin

Make sure you have a text or code editor and a web browser installed.

About this task

Create a new file named `w9-example.html` and add the following content.

**Sandbox example**

```

 W-9 collection example  
    // Replace `REPLACE_ME` with the Create Form Request entire response
    let formRequest = `REPLACE_ME`;
    const startW9 = (function(statusSelector, formRequest, prefill = {}) {
      // == Instructions and checks for this guide ==
      // You wouldn't need anything like these lines in a production implementation.
      const currentStep = className=>document.documentElement.classList.add(className);
      if(formRequest === "REPLACE_ME") return currentStep('initial');
      if(typeof formRequest === 'string' || formRequest instanceof String) return currentStep('string');
      const data = formRequest.data || formRequest;
      if(!data.attributes?.company_id || !data.links?.action_complete) return currentStep('format');
      if(data.attributes.company_id == "2345678") return currentStep('example');
      currentStep('demo');
      // Private function to show the status of the form request, called on initial load and after completion
      const showStatus = (request, incompleteValue="")=>{
        const attributes = (request.data || request).attributes
        const signedAt = attributes.signed_at && new Date(attributes.signed_at);
        document.querySelector(statusSelector).innerText = signedAt
          ? `Signed ${signedAt.toLocaleString("en-US", {dateStyle: "medium", timeStyle: "short"})}.`
          : incompleteValue;
      }
      addEventListener("DOMContentLoaded",()=>showStatus(formRequest))
      return function() {
        Avalara1099.requestW9(formRequest, {
          prefill,
          // skipCloseConfirmation: true  // Uncomment to disable "Are you sure?" dialog when closing
        })
        .then(newRequest => showStatus(formRequest = newRequest, "Incomplete"))
        .catch(errors => {
          console.log("ERRORS",errors)
          if(errors === "cancel") {}
          else if(errors?.errors?.[0].status == "404") { alert("Session timed out. Please reload and try again."); }
          else { alert("Something went wrong"); }
        })
      }
    })(
      "#w9-status",
      formRequest,
      { // optional form values to pre-fill for your vendor
        name: "John Smith",
        email: "john@email.com"
      }
    )

    body { padding: 2rem; font-family: -apple-system, sans-serif; }
    .gated p { margin:1rem 0; padding: 0.5rem 1rem; font-size: 1.2rem; border-radius: 0.25rem; display: none; }
    .gated p.err { background: #fee; }
    .gated p.initial { background: #eef; }
    .gated p.demo { background: #efe; }
    .initial p.initial { display: block; }
    .string p.string { display: block; }
    .format p.format { display: block; }
    .example p.example { display: block; }
    .demo p.demo { display: block; }

  Looks good so far. Continue to the next step in the guide. You must set formRequest = THE_ENTIRE_API_RESPONSE as JSON, not as a string. This is not a well-formed form_request object.You can get a form_request using the "Create form request" action of the API or in the API's interactive documentation. It looks like you copied the docs' example form_request response. Create your own form_request and use that instead.  Start form W-9   

```

Note

To use this example in a production environment, update the script source URL as shown below.

```

```

All other parts of the HTML file remain the same.

**Production example**

```

 W-9 collection example  
    // Replace `REPLACE_ME` with the Create Form Request entire response
    let formRequest = `REPLACE_ME`;
    const startW9 = (function(statusSelector, formRequest, prefill = {}) {
      // == Instructions and checks for this guide ==
      // You wouldn't need anything like these lines in a production implementation.
      const currentStep = className=>document.documentElement.classList.add(className);
      if(formRequest === "REPLACE_ME") return currentStep('initial');
      if(typeof formRequest === 'string' || formRequest instanceof String) return currentStep('string');
      const data = formRequest.data || formRequest;
      if(!data.attributes?.company_id || !data.links?.action_complete) return currentStep('format');
      if(data.attributes.company_id == "2345678") return currentStep('example');
      currentStep('demo');
      // Private function to show the status of the form request, called on initial load and after completion
      const showStatus = (request, incompleteValue="")=>{
        const attributes = (request.data || request).attributes
        const signedAt = attributes.signed_at && new Date(attributes.signed_at);
        document.querySelector(statusSelector).innerText = signedAt
          ? `Signed ${signedAt.toLocaleString("en-US", {dateStyle: "medium", timeStyle: "short"})}.`
          : incompleteValue;
      }
      addEventListener("DOMContentLoaded",()=>showStatus(formRequest))
      return function() {
        Avalara1099.requestW9(formRequest, {
          prefill,
          // skipCloseConfirmation: true  // Uncomment to disable "Are you sure?" dialog when closing
        })
        .then(newRequest => showStatus(formRequest = newRequest, "Incomplete"))
        .catch(errors => {
          console.log("ERRORS",errors)
          if(errors === "cancel") {}
          else if(errors?.errors?.[0].status == "404") { alert("Session timed out. Please reload and try again."); }
          else { alert("Something went wrong"); }
        })
      }
    })(
      "#w9-status",
      formRequest,
      { // optional form values to pre-fill for your vendor
        name: "John Smith",
        email: "john@email.com"
      }
    )

    body { padding: 2rem; font-family: -apple-system, sans-serif; }
    .gated p { margin:1rem 0; padding: 0.5rem 1rem; font-size: 1.2rem; border-radius: 0.25rem; display: none; }
    .gated p.err { background: #fee; }
    .gated p.initial { background: #eef; }
    .gated p.demo { background: #efe; }
    .initial p.initial { display: block; }
    .string p.string { display: block; }
    .format p.format { display: block; }
    .example p.example { display: block; }
    .demo p.demo { display: block; }

  Looks good so far. Continue to the next step in the guide. You must set formRequest = THE_ENTIRE_API_RESPONSE as JSON, not as a string. This is not a well-formed form_request object.You can get a form_request using the "Create form request" action of the API or in the API's interactive documentation. It looks like you copied the docs' example form_request response. Create your own form_request and use that instead.  Start form W-9   

```

Steps

1.  Save the file as `w9-example.html`.
2.  Open the file in your browser to confirm that the W-9 example page loads.

Result

You created an example W-9 HTML page that you can use in a sandbox or production environment.