Office 365 Easy Form Development FORM7

InfoPath alternatives for form designing SharePoint

Sometime back while doing office 365 project development, I came across with FORM7 framework. It really makes easy forms development. The scripts takes care add, edit, display views and people picker, lookup column as well.

You can download the form7 js file from this URL.

Keep all the js file in Style Library or Asset Library. I have developed Leave application request form which is really quick. I am using two custom list Leave Request and Leave Type.

Also check out:
– Automating SharePoint Online using PowerShell and CSOM

– Sharepoint 2013 workflow issues and fixes

– Embed Code example in SharePoint 2013

Leave Type is lookup column to Leave Request list.

Please find the .JS and .CSS file details below.

Requestform.js:
<link type=”text/css” rel=”stylesheet” href=”/SiteAssets/Form7Files/jquery-ui.css” />
<!– Reference jQuery on the Google CDN –>
<script type=”text/javascript” src=”/SiteAssets/Form7Files/jquery-1.8.3.min.js”></script>
<!– Reference jQueryUI on the Google CDN –>
<script type=”text/javascript” src=”/SiteAssets/Form7Files/jquery-ui.min.js”></script>
<!– Reference SPServices on cdnjs (Cloudflare) –>
<script type=”text/javascript” src=”/SiteAssets/Form7Files/jquery.SPServices-2014.02.min.js”></script>

<script type=”text/javascript” src=”/SiteAssets/Form7Files/jQuery.Forms7-0.0.081.js”></script>
<script type=”text/javascript” src=”/_layouts/15/clienttemplates.js” ></script>
<script type=”text/javascript” src=”/_layouts/15/clientforms.js” ></script>
<script type=”text/javascript” src=”/_layouts/15/clientpeoplepicker.js” ></script>
<script type=”text/javascript” src=”/_layouts/15/autofill.js” ></script>
<link type=”text/css” rel=”stylesheet” href=”/SiteAssets/Form7Files/custom.css” />

<style type=”text/css”>
.error
{font-family:’Tahoma’,sans-serif;font-size:10px;text-align:left;color:red;}
</style>

<script type=”text/javascript”>
$(document).ready(function() {
$(“#LeaveRequestForm”).Forms7Initialize({
queryStringVar: “formID”,
listName: “LeaveRequest”
});
$( “#StartDateField” ).datepicker({
changeMonth: true,
changeYear: true
});
$( “#EndDateField” ).datepicker({
changeMonth: true,
changeYear: true
});
$(“#LeaveSelect”).Forms7LoadDDL ({
listName: “LeaveType”,
firstOptionText: “Select Leave Type”,
fieldName: “Title”
});

});

function SubmitForm()
{
$(“#LeaveRequestForm”).Forms7Submit({
listName: “LeaveRequest”,
errorOffsetTop: 10,
errorOffsetLeft: 5,
completefunc: function(id) {
alert(“Save was successful. ID = ” + id);
window.location = window.location.pathname + “?formID=” + id;
}
});

}

</script>

<div id=”LeaveRequestForm” >
<table width=”100%” cellpadding=”10″ cellspacing=”0″ >
<tr><b>Leave Request form</b><td>
</td>
</tr>
<tr >
<td>Leave Title: </td>
<td><input type=”text” id=”TitleField” listFieldName=’Title’ class=’required formInput’ ></td>
</tr>
<tr ><td>Leave Description:</td>
<td> <input type=”text” id=”DescriptionField” listFieldName=’Description’ class=’required formInput’ >
</td>
</tr>
<tr >
<td> Manager:</td>
<td>
<div id=”peoplePicker1″ listFieldName=”Manager” data-Forms7Type=”PeoplePicker”></div>
</td>
</tr>

<tr >
<td>Start Date:</td> <td><input title=”Start Date” id=’StartDateField’ listFieldName=’StartDate’ class=’required formInput’ isDate=”yes” validate=”validDate” onchange=”validDate(this.value,this);”>
</td>
</tr>
<tr >
<td>End Date: </td><td><input title=”End Date” id=’EndDateField’ listFieldName=’EndDate’ class=’required formInput’ isDate=”yes” validate=”validDate” onchange=”validDate(this.value,this);”>
</td>
</tr>
<tr >
<td>Phone Number:</td><td> <input type=”text” id=”PhoneField” listFieldName=’Phone’ class=’required formInput’ >
</td>
</tr>

<tr >
<td>Leave Type:</td><td><select title=”Leave” id=’LeaveSelect’ listFieldName=’LeaveType’ class=’formInput’ ></select></td>
</tr>

</table>
<div class=”button_container”>
<input type=”button” value=”Submit” onclick=”SubmitForm();”><input type=”reset” value=”Reset” >
</div>
</div>

Custom.css:

#LeaveRequestForm{
width: 70%;
margin: 0 auto;
background: #EEE;
/* margin: 0 5px; */
padding: 0 5px;
}

#LeaveRequestForm b{
background: #527794;
color: #FFF;
padding: 5px 2px 5px 8px;
width: 100%;
float: left;
margin-left: -5px;}

#LeaveRequestForm td{
padding: 9px 35px;
}

#LeaveRequestForm td input{
width: 300px;
height: 25px;
}

.sp-peoplepicker-topLevel{
width: 285px !important;
margin-left: 6px;
}

.button_container{
text-align: center;
padding: 20px 0;
}

.button_container input{
background:#527794;
color:#FFF;
}

div#ui-datepicker-div {
background: #CCC;
padding: 15px;
}

a.ui-state-default {
color: #666;
font-size: 16px;
padding: 5px;
}
Now create publishing or web part page. Add content editor web part to the page and provide reference of the Requestform.js. So below screenshot will be the output.

Office 365 Easy Form Development FORM7
Office 365 Easy Form Development FORM7

Similar SharePoint 2013 Tutorials


About Sambita Rath

I have 9 years of exprience into SharePoint implementation, architecture, Administrator, development and Training.Designing Information Architecture in SharePoint 2007, 2010,2013 and Office 365.

View all posts by Sambita Rath →

Leave a Reply