JAVASCRIPT

how ton give form widget to zoho creaor

function createForm(data='',text){
    if(data==''){
        data = {Student_ID:'',firstName:'', lastName:'', birthdate:'', grade:'', mentor:''};
    }

    let form = `<form  method="POST" id="dataForm">
        <input type="text" name="studentId" class="form-control" value="`+data.Student_ID+`" placeholder="Student ID" /><br/>
        <input type="text" name="fname" class="form-control" value="`+data.firstName+`" placeholder="First Name" /><br/>
        <input type="text" name="lname" class="form-control" value="`+data.lastName+`" placeholder="Last Name" /><br/>
        <input type="date" name="birthdate" class="form-control"  value="`+data.birthdate+`" placeholder="Birth Date" /><br/>
        <input type="text" name="grade" class="form-control" value="`+data.grade+`" placeholder="Grade" /><br/>        
        <input type="text" name="mentor" class="form-control" value="`+data.mentor+`" placeholder="Mentor" /><br/>        
        <input type="submit" value="`+text+`" /><input type="reset" />
    </form><br/>`;
    document.querySelector(".zmodal-header").innerHTML = "<h3>"+text+" Record</h3>";
    document.querySelector(".zmodal-body").innerHTML =  form;

    $("#dataForm").on("submit",function(e){
        e.preventDefault();
        
        record = $(this).serialize();        
        action = text.toLowerCase();

        if(action === 'add'){            
            addRecord(api, { formName: "StudentRecord", data: record });
        }else if(action === 'update'){
            id = record.id;
            delete record.id;
            updateRecord(api, { reportName:'StudentRecord', id:id, data:record });
        }
        
    });
}