Project Overview

Project 12

In this project your will be introduced to the concept of creating forms with html, css and using as a third part form handler.

You will apply your new knowledge to create two different html 5 webpages that that are responsive and styled to look appealing.

Lecture Note Links

W3 schools has ample notes on this topic and a very good test area to allow anyone to test out the core ideas on this topic.

Form Lecture Notes
Please watch the videos that go over the content in the lecture notes.

Quiz 12

Lecture Videos

Lab Directions

Lab 12

Creating Forms
After viewing and practicing the techniques for creating forms and using bravenet, create a responsive webpage that contains a contact form of your own for a ficticious restaurant of your own design.
Begin with this w3-css template and modify it to only contain the nav, a nice banner image, and the contact section containing a contact form that you create using Bravenet.
Your restaurant can be of any kind of food you want and you can give it your own name, color plaette, typography, etc. It should not look like the original template that you start with. The images below are not to be used as your target design, but just to as an idea of what I am looking for over all content wise. I want you to be creative and think about a type of business you may like or something fun. Use images of your own or free images available online that fit the aesthetic of the restaurant.

Reference image for the Form page

reference image for form page

Reference image for the Thank You page

reference image for thank you page

Required Content

Use the following tools to help choose colors and select color palettes:
Adobe color

To get full credit your final form should function properly and when the form is submitted it should deploy a second Thank you webpage that you design.

You must use at least five different input elements in the form. Each one must be different in how it gathers data. That means you can not have 5 text boxes, or 3 text boxes and 2 check boxes.. If you duplicate, you still need to have five different types on your form.

Your business needs to have a name and a clear design aesthetic that suites the kind of business it is..make sure to think about that. If you need help just do a search like this one:
Ice cream parlor color palette
Italian restaurant color palette


Make sure you validate your code to ensure it is correct. Submit the URL called proj12forms through the dropbox and upload the 2 html documents as an attachment.

All content Copyright © 2017 Derek Dallas all rights Reserved