If you are new to SharePoint Online development the first task as a SharePoint Developer, would be to create a HTML form and create an item in the SharePoint List. In this blog we will create a very basic HTML form and create an item in SharePoint Custom list using SharePoint JSOM, and add the form to the page using Content editor web-part.

Before we begin:

  1. Appropriate permission to create a list, and a web-part to the page.
  2. Some experience with HTML, Javascript(jquery) and SharePoint client side object model.
  3. Create a SharePoint Online Custom List of name JSOM and add the Columns(Firstname(Title),Lastname,Gender) see below.

The HTML Code:

 

HTML
Edit|Remove
<div  First name:<br  <input type="text" name="firstname" id="firstname"  <br  Last name:<br  <input type="text" name="lastname" id="lastname"  <br  <input type="radio" name="gender" value="male" checkedMale<br  <input type="radio" name="gender" value="female"Female<br  <input type="radio" name="gender" value="other"Other   
  <br  <input type="button" value="Submit" id="btnSubmit"  <p></p> 
</div> 
 Javascript Code:
JavaScript
Edit|Remove
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
var siteUrl = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl; 
$(function () { 
bindButtonClick(); 
}); 
function bindButtonClick() { 
$("#btnSubmit").on("click"function () { 
createListItem(siteUrl); 
}); 
} 
function createListItem(siteUrl) { 
    var firstname = $("#firstname").val(); 
    var lastname = $("#lastname").val(); 
    var gender = $("input[name='gender']:checked").val(); 
    var clientContext = new SP.ClientContext(siteUrl); 
    var oList = clientContext.get_web().get_lists().getByTitle('JSOM'); 
 
    var itemCreateInfo = new SP.ListItemCreationInformation(); 
    this.oListItem = oList.addItem(itemCreateInfo); 
    oListItem.set_item('Title', firstname); 
    oListItem.set_item('Lastname', lastname); 
    oListItem.set_item('Gender', gender); 
     
    oListItem.update(); 
 
    clientContext.load(oListItem); 
    clientContext.executeQueryAsync( 
        Function.createDelegate(thisthis.onQuerySucceeded),  
        Function.createDelegate(thisthis.onQueryFailed) 
    ); 
} 
 
function onQuerySucceeded() { 
    $("p").html('Item created: ' + oListItem.get_id()); 
    
} 
 
function onQueryFailed(sender, args) { 
    alert('Request failed. ' + args.get_message() +  
        '\n' + args.get_stackTrace()); 
} 
</script> 

How to use the Code:

  1. Upload the createlist.html file to 'Site-assets' Library in SharePoint Online.
  2. Add the Content web-part to your SharePoint online page and reference the link to the createlist.html file.

Once you will save the page, you will see the web-part below.

 

CONGRATS.. We have just configured, a very basic SharePoint Online Form using HTML and JSOM with Content Editor web-part.

 

Few things to remember:

  1. You need to add <script src="/_layouts/15/sp.runtime.js" type="text/javascript"> </script>If you are using the above code in On Premise Servers, for SharePoint online, because it’s already there in SharePoint online.
  2. Do no use the HTML <FORM> element as it is not allowed in the Content Editor Web Part. If you need to add a Web Part to a page that uses the <FORM> element, consider using the Script Editor webpart.