SharePoint Web Parts
& Office 365 Apps
by VirtoSoftware

Customer Case: Adding a Custom Form into SharePoint Site

Design the custom SharePoint form for user requests, feedback, lead generation on any SharePoint site.

Request FREE 30-mins consultation

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;}

How to insert custom form into a certain Office 365 site

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”.

How to insert custom form into a certain Office 365 site

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

How to insert custom form into a certain Office 365 site

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
office 365sharepoint alertsuse cases