Blog

I recently had a client that wanted a Feedback tab that you find on a lot of sites now a days.  Something similar to Get Satisfaction or uservoice.

I couldn’t find anything out there that I liked so here is what I came up with. The approach I am about to describe will place the Feedback tab on every page that is using your Master Page.

I am using the ASP.NET AJAX Control Toolkit for the modal.

First we need to set the modal up.

1. Make sure you have the AjaxControlToolkit assembly in your project references.
2. Add the page directive for the Control Kit at the top of your Master Page:

   <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
   

3. Add the ScriptManager to your Master Page:

   <asp:ScriptManager ID="ScriptManager1" runat="server" />
   

4. Place the Feedback tab on your site by adding it as an ASP.NET ImageButton and adding a cssclass to it:

   <asp:ImageButton ID="lbFeedback" CssClass="tab" runat="server" ImageUrl="images/feedback.gif" />
   

5. Add this styling to your css stylesheet:

   .tab{position: fixed; right: 0; top: 250px;}
   

   This will position the tab on the right of the browser window.

6. Now add the Feedback form inside a panel that will appear in the modal to the bottom of your Master Page just before the </form>.

   <asp:Panel ID="pnlModal" runat="server" CssClass="modal">
           <p>Thank you for taking the time to leave us
               feedback. Good or bad we want to know how your experience was at our
               establishment.</p>
           <p><label>Name:</label><br /><asp:TextBox ID="txtName" runat="server" /></p>
           <p><label>Email:</label><br /><asp:TextBox ID="txtEmail" runat="server" /></p>
           <p><label>Message:</label><br /><asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine" Columns="40" Rows="10" /></p>
           <asp:Button ID="btnSubmit" runat="server" Text="Submit"
               onclick="btnSubmit_Click" />
           <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
       </asp:Panel>
   

7. Add the Modal Popup Extender control to handle the modal:

   <ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="lbFeedback" PopupControlID="pnlModal" BackgroundCssClass="modalbg" CancelControlID="btnCancel"></ajaxToolkit:ModalPopupExtender>
   

8. Lets add a Thank you message that is only visible after the feedback form is submitted. I add this at the top of the Master Page:

   <div id="thankyou" runat="server" visible="false" class="thankyoumessage">Thank you for leaving feedback</div>
   

We now have a non-functioning Feedback form appearing inside a modal when the Feedback tab is clicked.  A cancel button is there if they decide not too leave feedback after all.

By adding the ASP.NET Button control in the modal it will do a PostBack back to the page that can be handled in the Master Page’s code-behind.  In the button handler I add the logic to simply email the submitted form to a desired email.  See my previous post on how to do that.

At the end of the Submit Button handler I have a Page Redirect that sends the visitor back to the page they are on.  Two reasons for this:

1. In the redirect I pass a QueryString param to the page letting it know that Feedback has been submitted.  In the PageLoad of the Master Page I check for this param and if it is present display a Thank You at the top of the page.
2. Secondly I do a redirect so the visitor won’t do a refresh to get ride of the Thank You message, thus re-sending the feedback info again.

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack && !String.IsNullOrEmpty(Request.QueryString["fb"]))
        {
            // the feedback form has been filled out, display a thank you message.
            thankyou.Visible = true;
        }
    }

    /// <summary>
    /// Handle the feedback form submit
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // add the logic to handle the submited form fields

        string currentPage = Request.Path;
        Response.Redirect(currentPage + "?fb=1");
    }

To sharpen it up a bit some final touches in the style sheet for the modal and the thank you message:

.thankyoumessage{background-color:#cc0000; color:#fff; padding:20px; font-size:3em; text-align:center}
.modal{background-color:#fff; border:solid 3px gray; padding:8px; width:350px; height:450px;}
.modalbg{filter: Alpha(Opacity=70); -moz-opacity:0.7; opacity: 0.7; width: 100%; height: 100%; background-color: #000000; position: absolute; z-index: 500; top: 0px; left: 0px;}

I’ve put together a simple example website with all this working for download here.

There certainly is more that can be added upon this such as making the thank you message only visible for 3 seconds.  But, I think this is a good foundation.

Filed under: Web Development, asp.net   Tags: .NET,
 No Comments »