How To: Make a nice looking contactform WebPart with AJAX

On my previous project I had to make some contactforms, to allow anonymous users to send an e-mail. I decided to make it as a webpart. I know, you can also do it with an application page (?), user controls with smartpart, etc... But a webpart has the advantage of properties and portability. Please, correct me if i'm wrong. I would really appreciate comments - other suggestions for making a form?

I made the contactform webpart without AJAX & Styling. Just a simple form with some simple validation handling. Everytime I build a customisation for a client, I always wondering if there wasn't a better (more beautiful, faster, other algorithm, etc) approach... In this case I started thinking about a nice looking contactform with AJAX validation and some nifty corners.

I gave it a try and my form looks like this:



After you have submitted the form:







How I did it...

• I downloaded & installed the ASP.NET 2.0 AJAX Extensions 1.0
• I modified my web.config
• I placed a ASP.NET AJAX Script Manager into the masterpage
• I downloaded the ASP.NET AJAX Control Toolkit

After these steps I created a webpart with the following code:

Attention:
On Mike Ammerlaan's blog you'll read the following:

ASP.NET AJAX infrastructure is not compatible with output caching features. This output caching infrastructure is a featured component of managed content pages such as those supported by web content management features in Microsoft Office SharePoint Server. For this reason, many scenarios which involve output cached features may not be able to take advantage of components like UpdatePanel. However, you will be able to successfully use other ASP.NET AJAX features, such as the JavaScript library, combined with your output cached pages.

In my next post I'll show you a way to style the elements inside the webpart...