Customer Case: Adding a Custom Form into SharePoint Site

Business Requirements

Insert a custom form into a certain SharePoint site page.

Display the dialog box after the successful form filling.

Virto Software Components Used

Virto Forms Designer for Office 365.

Solution Summary

A mining corporation needed to insert a custom form into a certain SharePoint Online site. The company uses the capabilities of Virto Forms Designer for Office 365 to create a custom form, and the following solution allowed to place this form to a predefined site.

After the form configuration in Virto Forms Designer for Office 365, you need to open the form settings and click “CSS” editor to add css code: .ms-dialogHidden { display: none; } #contentBox { min-width: 0px; padding: 0px; margin: 0px; } #contentRow {padding-top: 0px;}

Save and add the following javascript in JavaScript editor:

$(document).ready(function() {
var loc = window.location;
var s = loc.search;
if(s.indexOf(“&isIFrame”)==-1)
{
var css = “.ms-dialogHidden { display: block !important; } #contentBox { margin-right: 20px !important; margin-left: 220px !important; min-width: 703px !important; } #contentRow {padding-top: 19px !important;}”,
head = document.head || document.getElementsByTagName(“head”)[0],
style = document.createElement(“style”);
style.type = “text/css”;
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

}else{
$(“#aspnetForm”).attr(“action”,loc.pathname+”?Source=” + loc.pathname + “&isIFrame=1”);
}
});

Now open the configured form in the browser and copy the URL. At the end of the URL add “&isIFrame=1”

Open the Site Page in edit mode, insert the “Page Viewer” web part and click “Edit Web Part”.

Insert URL to the Link field. Set fixed height and width of Web Part.

Then save changes and save the Page. After that you’ll be able to see your custom SharePoint form on the selected Page.

Related Products:
Office 365 Forms Designer