6/25/12

Office 365 Open Contact Page on Modal Dialog

Office 365 provides the contact gadget which allows visitors of a site to submit contact information. This gadget can be embedded on an ASPX page, and it is usually added to the contact us page. There some instances when we want the users to not have to navigate to another page to submit the contact information and just present them with a modal dialog like the one below:





To provide this feature on your Office 365 public site, you can do the following:

Step one add a new page

Look at the page properties and make sure to uncheck these options:

  • Show this page in the navigation bar
  • Include Header, footer and Navigation




Step two add the contact gadget and add the message that you want to convey to the user

At this point, we have a page that can be navigated, and it displays none of the master page section. This is the page that we use for the modal dialog. Design this page with the width and height that you want to present to the user. This size is the reference that we need to build the modal dialog. The entire page may have the site width, but you should try to make the gadget fit a certain size. Also add any design that you need. Try adding a logo or banner. Name this file contactform.aspx. Load the page on the browser. It should look something like the image below. (Notice no header, footer and navigation menu)


Step three add the JavaScript

For this step, we are using JQuery and JQuery-Blockui. The Blockui widget allows us to create the modal dialog on the page.  Include the references to these JavaScript in the page where you need the dialog.  Ideally, you will do this on the master page, so that it is included in all your pages. For this however, you need to be using a custom master page. Office 365 has some issues with custom master pages. We will also add a reference to the JavaScript that we will create on the next step.

Step four create the widget

We now need to create a JavaScript file that contains our widget implementation. The widget will basically do the following:

On page load, it adds the HTML that contains the modal dialog.  This is done by appending the HTML to the body of the page. The HTML is just a div element with some CSS style and an iframe element. The iframe uses as source the page that was created on step one.  Make sure to style this div to fit the size that you use. This is nothing new. It is just the basic modal dialog pattern for web pages. This is what the HTML looks like: (this is added to the widget script as a property)

<div id="contactForm" style="width:570px; height:715px;display:none;background:#436c99;border:2px #d5d3d3 solid;"><div style="float:left;font-size:16pt;margin:5px;color:#ffffff;">Contact Us</div><div id="closebtn" style="float:right;top:5px;"><a href="#" onclick="CloseContact();"><img src="../images/close.png" alt="close" border="0"/></a></div><iframe src="contactform.aspx" width="100%" height="90%" frameborder="0" scrolling="no"></iframe></div>

Use the following snippet to implement the Widget:

//this function is used by the contact form page to close the modal dialog
function CloseContact(){
contactWidget.CloseDialog();
}
var contactWidget = {
       Init:function(){
         $('body').append(this.html);
      },
      OpenDialog:function(){
                $.blockUI({ message: $('#contactForm'),centerY:true,css: {
                top:  ($(window).height() - 715) /2 + 'px',
                left: ($(window).width() - 570) /2 + 'px', border:'0px',               
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',width:'570px'
                }});
      },
      CloseDialog:function(){
               $.unblockUI();
      },
       html:'<div id="contactForm" style="width:570px; height:715px;display:none;background:#436c99;border:2px #d5d3d3 solid;"><div style="float:left;font-size:16pt;margin:5px;color:#ffffff;">Contact Us</div><div id="closebtn" style="float:right;top:5px;"><a href="#" onclick="CloseContact();"><img src="../images/close.png" alt="close" border="0"/></a></div><iframe src="contactform.aspx" width="100%" height="90%" frameborder="0" scrolling="no"></iframe></div>'
}
$(document).ready(function(){contactWidget.Init();});

The script is basic. On document ready, it calls the Init function. This adds the html to the DOM. Notice that the HTML is contained by the widget. This allows us to reuse it in several pages by just including the reference to the JavaScript. Save the file and name it contactWidget.js. You can now include in the page the reference to this JavaScript file.

Step five wire the widget

With the widget loaded on the page, the next step is to just wire an element’s click event to the function contactWidget.OpenDialog. This opens the modal dialog and displays the contact form.

Step six handle the back button on the thank you page.

If you load the contact page on the modal dialog, you will notice that after submitting the information, the contact page shows a back button and a message. If you click it, it only takes you back to the contact form. The user still needs to click on the close image to close the dialog. You may be ok with this functionality, but we could also close the dialog after the back button is clicked.  You can do this by overriding the click event on the contactform page using JQuery. The event handler can call CloseContact function in the parent page with the following script:

window.parent.CloseContact();

Happy coding