Home > Administrative Offices > Information Technology > Web Services > VSU Web Services Guides > Creating forms with Expression Web 3
Creating Forms with Expression Web 3 - Part 1
Part 1 - Setting Up Your Form Page
For this example we will make a Contact Form. The form will have examples of text fields, radio buttons, drop down menus, text areas, submit and reset buttons. I have made a word document with the basic layout of what the form will look like. Planning out what the form will look like and what it does ahead of time will save time while making it in Expression Web 3.
Step 1
Open Microsoft Expression Web 3.
Step 2
Go to File > New > PHP
Step 3
In the Design panel in the middle section, type CONTACT FORM at the top of the page. This is a title for the page and the form. Now press the return key to go to the next line on the page.
Step 4
Go to Panels > Toolbox. If Toolbox is checked in the Panels menu, then the Toolbox panel will appear at the right hand side of the screen.
Make sure that Toolbox is selected in the Panels menu.
If Toolbox is checked in the Panels menu, then the Toolbox will appear at the right hand side of the page.
We will be working with the HTML > Form Controls section of the toolbox.
Step 5
In the Toolbox panel, select HTML > Form Controls.
You will see a list of Form Control options. Click and hold down on the Form option and drag your cursor to the next line AFTER your current line in the form. There should now be a section inside of the Designer view that says "form."
Use your mouse to drag the form option into the line after your current line.
Step 6
With your cursor inside of the forms section box, click the Insert Table icon in the top right area. Create a 2 x 6 table (two columns with six rows).
Inserting a table. Make sure your cursor is inside of the form section when you add the table.
Your 2 x 6 table will look like this.
Step 7
Type the text parts of the form ("Name:", "Email:", etc). In this example we will be typing in what I have made in my Word document mock up.
Your table is now set up to insert form fields.
Go to Part 2 - Inserting form fields, buttons, etc