####Forms
Why are forms so important?
They are a form of interactivity unique to the Internet. The first level of interactivity online is the hyperlink; from the beginning, users were able to interact with the content.
But the form is a second level, which gives users the ability to give information back: The User provides data.
The request is different:
GET: Used for links, means that a request is being made for a resoruce, but no information os provided. POST: Is used for forms, and sends the information given by the user.
These days, we’re not as much interested in telling the customer things. We want information from them. (This is the basis of Google and Facebook’s business.)
(In the next class, we’ll be able to click and update any element on a page without having to reload the whole page.)
This is a class on coding, but also on design. So what is good form design?
Imagine a form as a huge funnel, with fewer and fewer people as we descend down the funnel:
- Everyone in the world.
- Everyone who hears about the site.
- Everyone who visits the site.
- Everyone who stays on the site.
- Everyone who starts to fill out a form.
- Everyone who finishes the form.
The site is shedding massive numbers of people at every step. An increadibly small number of people will stay, start the form, fnish the form, buy something. If you get a million customers to visit your site, maybe 10 or 15 will buy something.
Your job today as a coder: “I want someone to give me money.”
What do you need:
- A credit card.
- An expiration date.
- CVM.
- What are you buying? (And if it’s a physical object, the shipping.)
Every additional field they have to fill out in a form costs sales.
- Minimize the number of fields. (Think of the Amazon One-Click button.)
- Align the fields vertically so that they’re easy to scan.
- Make them easy to fill out by using Autofill. (e.g. automatically add the parentheses to an area code.)
- Give thme prompts and validation.
- If the code fails, don’t make them start over and redo the whole thing.
Remember that you’re “selling an experience,” so make it a pleasant one.
The form brings a site the most opportunity (sales, connection, etc.), but it also brings the greatest danger, in the form of malware. Don’t let in anything that you don’t trust.
Form design is cool: try to have little forms all over the page. (And in our journals, make a form using HTML5 form tags.)
Relative position vs. absolute position. Negative margin.
Start on Treehouse: Javascript Basics
Final Presentations - We will do TWO:
- For the client (3-5 minutes): The goal is to manage the clients’ expectations (critical!) and to explain how our work will help them accomplish their goals.
- A Code Walkthrough (5-10 minutes) - For this, our audience is our peers, people who can understand our code and help. We willl give an overivew of the code base and structure of the project (HTML and CSS). Each person on the team should identify a chunk of code that they liked and explain how it worked and why we like it.
Prefer shorter presentations.
Old production model was the “waterfall.” Projects were developed for a long time (18 months, 2 years); now, the approach is “agile,” with lots of review.
This class is approached in a similar way – updating, evolving. Instead of a “post-mortem” (who has died?!), we’ll do a retrospective every couple of weeks. The idea is to focus as much on the paositive as on what needs to be fixed: what’s working, what could be better.
In the next class (Primer Pro), we’ll work on:
- JavaScript
- Responsive Design (everyone is all excited about FlexBox)
- A Big Project using the framework Bootstrap.