SharePoint online Adding into a list from an HTML form

Hi Guys, I have been struggling with this thing for day now, 

I am trying to save some form details into a list and i just can not seem to make it work can any one tell me if there is something wrong with my code here.. I have set permissions to Full Control .

'use strict';

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createVisitorDetails);

function manageQueryStringParameter(paramToRetrieve) {
    var params =
    document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve) {
            return singleParam[1];
        }
    }
}
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
   
    






 function createVisitorDetails() {
     var name = $("#name").val();
     var surname = $("#surname").val();
     var email = $("#email").val();
     var msg = $("#message").val();

       // var context = SP.ClientContext.get_current();
       
      
     alert("-----" + name + "\n" + surname + "\n" + email + "\n" + msg);
     //Get app web url
     var hostWebUrl = decodeURIComponent(manageQueryStringParameter("SPHostUrl"));
     //Get Host Web URL

     var appWebUrl = decodeURIComponent(manageQueryStringParameter("SPAppWebUrl"));

       
       
        //Creating the Client Content object using the Url
        var ctx = new SP.ClientContext(appWebUrl);
        var appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
        //Get the Web site
        var web = appCtxSite.get_web();
       
        //Get the List using its name
        var list = web.get_lists().getByTitle("VisitorsQueries");
        
        var listCreationInformation = new SP.ListItemCreationInformation(); //Object for creating Item in the List
        var listItem = list.addItem(listCreationInformation);
        if (listCreationInformation)
        {
            alert("Object existing");
        }
        else { alert("Does not exist"); }
        listItem.set_item("Name", name);
        listItem.set_item("Surname", surname);
        listItem.set_item("Email", email);
        listItem.set_item("Message", msg);
        
        listItem.update(); //Update the List Item
    
        ctx.load(listItem);
        //Execute the batch Asynchronously
        ctx.executeQueryAsync(
            Function.createDelegate(this, success),
            Function.createDelegate(this, fail)
           );

   }

   function success() {
       alert("Successfully inserted");
   }

   function fail() {
       alert("Could not insert into the list");
   }