Agenda, Tuesday
Lab: Contact form
Due Thursday: working contact form on your prototype site
Due Thursday: two of your desktop pages
In-class exercise – stand-up report
- What have you accomplished on your prototype?
- What are you working on now?
- What do you need help with?
In-class exercise – building our live sites
We are building a five-page site. One of those pages is a contact page.
If you are going to have an email published on a website, make it a throw-away address that you use only for this purpose. Our best practice is a contact form.
Question: who has already built working forms?
- Download this zipped folder (and extract it)
- Upload the file that is in the “scripts” folder … to your “scripts” folder on the web server. (If you do not have scripts folder, you should. And it should be at root.)
- Open the HTML files in Brackets (or your favorite editor)
- We’ll walk through customization and then you’ll upload the files to your server
- For this exercise, you don’t need to use the header/footer/branding that you’ve developed for your site, but you can if you like
- The purpose of this exercise is to get a working contact form
- Upload your working URLs to tonight’s Slack channel (you’ve all been invited)
- Test the form (so be sure to use an email address you can access in class for the “send to” address)
- Google will warn you:
Tutorials and best practices
- Medium: 10 tips for forms on mobile devices
- Mozilla: your first HTML form
- NN/g: web form usability
“when forms follow basic usability guidelines, the completion time decreases significantly and users are almost twice as likely to submit the form with no errors from the first try (78% one-try submissions in forms compliant with usability guidelines versus only 42% one-try submissions in forms violating them).” - W3C: HTML forms
