Skip to main content
Here’s a detailed guide on making a POST call in JavaScript to Telivy backend form input when a submit button is clicked on your own form:
1

Set Up The HTML Form

Create a form with the method attribute set to POST and a submit button.
2

Attach A JavaScript Event Listener

Use addEventListener to listen for the submit event on the form.
3

Gather Form Data

Use FormData to construct a data object from the form’s input fields. Add the agentId or UTM Source fields to the form data if necessary.
Before you proceed any further, please make sure that the following validations to the data are passed:
Ensure the email has an ”@.”
4

Send The POST Request

Use the fetch API to send the POST request.Here’s the full example:
file.html
<form id="myForm" method="POST">
    <!-- These are Mandatory Fields -->
    <input type="text" name="organizationName" placeholder="Enter the name of your business">
    <input type="text" name="domain" placeholder="Enter your website domain">
    <input type="email" name="contactEmail" placeholder="Enter your email">
    <!-- Optional Fields but good to have  -->
    <input type="text" name="contactName" placeholder="Enter your full name">
    <input type="tel" name="contactPhone" placeholder="Enter your phone number">
    <input type="text" name="zipCode" placeholder="Enter your zip code">
    <input type="number" name="employeeCount" placeholder="Number of employees">
    <input type="number" name="annualRevenue" placeholder="Annual revenue (#)">
    <button type="submit">Submit</button>
  </form>


  <script>
  const form = document.getElementById("myForm");
  form.addEventListener("submit", (event) => {

    event.preventDefault();

    const formData = new FormData(form);
    // Replace with your actual Agent ID.
    formData.append("agentId", "your-agent-id-here");
    // Read next article to learn about utm source tracking
    formData.append("utmSource", "custom-form");

    const dataObj = {};
    formData.forEach(function(value, key){
      if ((key === "employeeCount" || key === "annualRevenue") && value) {
        dataObj[key] = parseInt(value, 10);
      } else if (value) {
        dataObj[key] = value;
      }
    });

    fetch("https://api-v1.telivy.com/api/v1/applications/public", {
      method: "POST",
      body: JSON.stringify(dataObj),
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
  });

  </script>