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 “General” settings on the ribbon, select “Hide Ribbon”.

How to insert custom form into a certain Office 365 site

Now click “CSS” editor on ribbon of Forms Designer and 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 browser and copy url. At the end of the url add “&isIFrame=1”

Open the Site Page in edit mode, insert “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
Share
About the author linkedin

user_img

Tatiana Sushchenko is the product owner at VirtoSoftware. She started her IT career with the famous ABBYY Lingvo back in 2006 in Moscow. Then she moved to Microsoft performing strongly in various marketing management roles across Visio, SharePoint, Office 365 and Project for almost 10 years. Tatiana is a graduate of the Institute of Business Studies and holds a mini-MBA degree. She also graduated from Microsoft marketing excellence university.

All publications of the author

office 365sharepoint alertsuse cases

Leave a Reply

Your email address will not be published. Required fields are marked *