/hackers-poulette

Primary LanguagePHP

Hackers Poulette

mockup page 1 mockup page 2 mockup page 3

Instructions

CAUTION: This project will use PHP. And we didn't talk about a GitHub Page. Maybe there is a reason.

Missions objectives

At the end of this challenge you should have improved your:

  • semantical HTML
  • accessibility in HTML
  • Sass
  • Framework CSS or not (bootstrap, bulma, tailwind, ............. )
  • Progressive enhancement
  • PHP programming
  • Project planning
  • Mock-up creation

You should also be able to :

  • display errors

The mission

The company Hackers Poulette ™ sells Raspberry Pi accessory kits to build your own. They want to allow their users to contact their support team. Your mission is to create a fully-functioning online "contact support" form, in PHP. It must display a contact form and process the received answer (sanitize, validate, answer the user).

Hackers logo

The form should be comprised of:

  • name and lastname
  • gender
  • email address
  • country
  • subject (3 possibilities)
  • message

NOTE: All field, except subject, have to be completed. The field subject takes a default value of Other.

Instructions

Must have:

  • the project repository must include a low-fidelity mock-up
  • the form's html code must be semantically valid
  • the HTML must be accessible to blind people
  • in case of wrong input, the form should display a useful visual clue about the error
  • display the error message near the correct input field
  • the error message must be readable (helpful to users)
  • the form has to be sanitised and validated (server side)
  • if all required inputs are valid, the script should respond by email to a given address
  • implement a honeypot anti spam technique.

Optional:

  • client side validation with JavaScript
  • work on a good and clear user experience (UX)
  • respond to the user request with Ajax

Part 0: plan the work ahead

Study all the project aspects, from frontend to backend, then make a mock-up and finally start coding.

Part 1: contact form (html)

Start by creating the HTML of the form, don't forget the progressive enhancement and accessibility to the blinds

Part 2: contact form (css, via framework css)

Use bootstrap, bulma, materialize, ... to quickly get your visual, while respecting the graphic chart below.

Part 3: contact form (PHP)

To help you during development, display the rough data received from the form with the help of the print_r PHP function.

Part 4: process the form data

Finally, sanitize the input from things like <script>, then validate the content (obligatory field, valid email, etc...), ending by an email sent and a feedback for the user.

Resources

Links