Code XHTML contact forms and redirect pages. Book: Introduction, Chapter 17.
Extended DUE SATURDAY, August 4: Assignment 6
- Creating forms - Chapter 17
- Assignment 7 - Portal Page table Form and Response pages
- Decide form information needed
- Basic form creation start
- Basic form test
- Basic form Response Thanks page start
- Example: StudioBast
- Capture basic information
- Email contact
- Replacement for e-mail address - required in future SCCC classes
- We're using insecure
- We're using form-to-email, not database
Decide form information needed
- Contact information - first name, last name, email address
- Demographic information - gender, location
- Choices information - visitor needs, preferences, actions needed
- Comment information - for items not listed in form
- Open/close form
- Post/get (we're using post)
- Post lets form be processed with a url like a packet of info. Good for visitors to order items, give contact info, and give feedback.
- Get lets you collect info and append to a web page but we're not doing that. Good for creating a form that will fill in a db so a visitor can in turn GET the info to look at, like a list of past orders.
- Form Handler: A program that runs on the web server, which takes the information entered in the HTML form by the visitor and does something with it .
- Form elements, like text boxes, radio buttons, check boxes, dropdowns, comment areas, selection fields, etc.
- Submit area: Submit and Reset buttons
- Hidden part of submit area: Info for form handler, redirect page info
- Redirect page: The page a visitor is redirected to after s/he clicks the submit button.
Form set-up (for us)
- Form opening tag
- Form method (what form is to do): method="post"
- Form name: name="your_form"
- Form action: URL for form handler: http://www.newmanic.com/formhandler3.asp
Form component code
- Component identifer - labels that name the element.
- Input type - whether it will be a text, radio, or other type of form input.
- Reset button - Allows visitor to clear the form instead of sending
- Submit button
- Hidden submit information fields - info for the Form Handler
- Redirect - Page for Visitor after submitting form
- Must redirect to an absolute URL
Testing the form
- For us, checking email to be sure form info was received.
- W3C Validate the form
- Must have the redirected Thanks page uploaded on the web, not local
- Form handler processes the form info then redirects the visitor to help visitor know something happened
Redirect - thank you page
- Thank you page is a special redirect page
- Use same design 'template' as the form page without the form on it
- Have a message on the thank you page
- Have a link to your portal or assignment page
DEMO: Contact Form - do in class as a short lab
- Open your tabletemplate.html page, save to your web110/demos as formtemplate1.html
- Copy the basic form module from your basicformcode.html which should have this Basic Form code, and paste it into the Content table data cell of your formtemplate1.html page.
- After you type/do all that, make sure the form validates and add the W3C icon.
- Save a copy of formtemplate1.html to your web110/demos as thankstemplate1.html, delete the form info and add "thank you" content
- After you type all that, make sure the thank you page still validates.
- Upload BOTH pages to your remote webhost web110/demos folder.
- Test the form by looking it up on your Edison server space, filling it out, then submitting it. See if you get the Response Thank You page.
- Then, check your email to see if the form infoormation from the newMANIC form handler came through.
TASKS - PRE Thursday work - REQUIRED
- Reading: Chapter 17
- Make sure to completely finish, validate, and test your Tuesday form.
- CODE the Basic Thank-You Redirect Page if you have not finished it.
- Create a basic table structure form SEE CODE IMAGE
- Using tables to lay out a form structure
- Building a template page from Comps
Using nested table to layout form
- Table is a good way to layout information so form components are need at tidy
- Introduce the form in some way
- Left 'column' for the identification of form components
- Right column for form components
- Submit section at bottom row
DEMO Table Form (partial)
- Create a contact.html page from your own Table Template, and save it in your web110/demos folder as tableform.html.
- In the Table Template's content cell, between the opening and closing TD tags, open and close the Form with the form tags
- Between the open and closing Form tags, create an 8 row 2-column table, no borders needed
- In the first "column" cells, type the Question you want your visitor to answer
- In the second "column" cells, type the form input format the visitor will use to answer
- Make sure the form validates and add the W3C icon.
- If you wish to use this same page format, ALSO create a thanks page using the page as a template.
- Upload both files to your remote webhost web110/demos folder.
- Test the form by filling it out, then submitting it. See if you get the redirect Thank You page.
- Then, check your email to see if the form info came through.
DEMO: Comps-based Template Page
- I'll build a quick and dirty starter template for my Example project
- I'll focus on creating the page styles
- I'll show how to style a mid-page fixed table format.
- Assignment 6: Comps Page, 50 points, extension due SATURDAY, August 4.
- Assignment 7: Portal Form and Redirect Page, 50 points, due Thursday, August 9.
- Get cracking on the coding of the template of your final project site.