Intro To WebMatrix: Create a Contact Form Part 1
Earlier this week Microsoft released a Beta version of WebMatrix, as web development tool aimed at new developers, hobbyist and those new to the Microsoft web stack. Today I am going to walk through building a standard contact form using WebMatrix. The form will collect a First and Last name, E-mail and Comment. The data will be stored in a database table and e-mail confirmations automatically sent. This is the first installment of three. Today We will build the basic form, tomorrow we will add the database component and finally the E-mail.
Step 1: Create the Site Foundation
For this tutorial I am going to lay an initial foundation we can build upon later. First, open WebMatrix and select Site From Template. In the dialog, and don’t you like the subtle AJAX style dialogs in WebMatrix, select the Empty Site Template.
The next step is to add files to the site that will be used to build common features. This includes CSS and JavaScript files. For the CSS I have added 4 CSS files, the first three are Blueprint CSS and the fourth is the site’s actual CSS rules. The next is the jQuery library, which is simply the current release, 1.4.2 file.
As for Blueprint CSS this is the first time I have used it here on this blog. I was introduced to it at the South Florida UX group this summer. I have heard of it before, just never had the time to work with it, till now. For now, if you want to learn more about how to use Blueprint CSS in your sites please visit the project Wiki.
Blueprint is a grid based CSS framework that breaks a page into vertical 24 columns. There are rules defined in the framework you can assign to your page’s layout elements. Again, I am not going into a Blueprint tutorial today, but the site needs some basic rules to define how the form will layout. The main.css file contains these rules. Simply put they define how the fieldset, legend, li, input and button elements will render.
fieldset{
margin:auto;
margin-top:2.5em;
}
fieldset.span-12{
margin-right: auto;
float: none;
}
legend{
text-align:left;
background-color:#cecece;
}
fieldset li {
display: inline-block;
width: 100%;
}
label {
float: left;
width: 8em;
margin-right: 1em;
text-align:left;
}
input {
float: left;
width: 12em;
margin-right: 1em;
}
button {
float: right;
margin-right: 1.25em;
}
I place the CSS and JavaScript files in the css and js folders respectively. I also created a folder to contain images. I am not going to use that for this tutorial, but eventually it will be used as I progress the site.
Step 2: Create the Form
Now to add the contact form. This is pretty standard, just use HTML markup to layout a form. For me this is an unordered list containing labels and inputs for each field. The HEAD contains references to the CSS files as well as the page’s title. The reference to the JavaScript file(s) are located at the bottom.
<!DOCTYPE html>
<html>
<head>
<title>Simple Contact Form With WebMatrix</title>
<link href="css/print.css" rel="stylesheet"
type="text/css" media="print" />
<link href="css/screen.css" rel="stylesheet"
type="text/css" media="screen, projection"/>
<link href="css/ie.css" rel="stylesheet"
type="text/css" media="screen, projection"/>
<link href="css/main.css" rel="stylesheet"
type="text/css" media="screen, projection"/>
</head>
<body>
<form method="post">
<fieldset class="span-12">
<legend>Simple Contact</legend>
<ul>
<li><label for="firstname">First Name:</label>
<input id="firstName" name="firstName"/></li>
<li><label for="lastname">Last Name:</label>
<input id="lastName" name="lastName"/></li>
<li><label for="email">E-Mail:</label>
<input id="email" name="email"/></li>
<li><label for="Comment">Comment:</label>
<textarea id="Comment" name="Comment"></textarea></li>
<li><button id="btnComment">Submit</button></li>
</ul>
</fieldset>
</form>
</body>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
</html>
Now the form markup is defined we can start adding some code to make it do something. Now we get to the Razor syntax. Above the DOCTYPE tag add a code block, @{ }. Inside this block I added some variables to hold the values for each field. Then I added an if statement to check if the page was in a Post-Back state. Similar to the IsPostBack property of the traditional ASP.NET page the Razor View Engine has the IsPost property. When the page has been posted back you can access the posted field values just you have been able to do since Classic ASP days, Request[variable name].
@{
var firstName = "";
var lastName = "";
var email = "";
var comment = "";
if(IsPost){
firstName = Request["firstName"];
lastName = Request["lastName"];
email = Request["email"];
comment = Request["comment"];
}
}
Using the IsPost variable in the markup you are able to display a different set of markup based on the post-back state. For this demo I chose to display a simple confirmation message to the user.
@if(!IsPost){
<ul>
<li><label for="firstname">First Name:</label>
<input id="firstName" name="firstName"/></li>
<li><label for="lastname">Last Name:</label>
<input id="lastName" name="lastName"/></li>
<li><label for="email">E-Mail:</label>
<input id="email" name="email"/></li>
<li><label for="Comment">Comment:</label>
<textarea id="Comment" name="Comment"></textarea></li>
<li><button id="btnComment">Submit</button></li>
</ul>
}else{
<p>Thanks @firstName; @lastName; for your comment</p>
<p>@comment;</p>
}
Save the cshtml file. Now you can open it in a browser to take it for a spin. Fill in the fields and submit the form. After you submit the form you should get the conformation message in the fieldset.
This is where I will leave this application for now. I will be adding database support in the next post.