Configure with Custom Form

For a more customized implementation

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:

   Email is Valid

   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">
   <input type="text" name="organizationName" placeholder="Enter the name of your business">
   <input type="email" name="contactEmail" placeholder="Enter your email">
   <input type="text" name="domain" placeholder="Enter your website domain">
   <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){
       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>