Intro To WebMatrix: Create a Contact Form Part 1

WebMatrixEarlier 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.

WebMatrix

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.

WebMatrix

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;


}

WebMatrixI 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

>



WebMatrix

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.

WebMatrix

This is where I will leave this application for now. I will be adding database support in the next post.

Share This Article With Your Friends!