Changing Error Message Display

[espressobeanmachine]

I have a working contact form that uses validation.js for validation and PHP to actually send the email. Currently, error messages for empty required fields are displayed right next to the fields but I am looking to get the error messages setup at the top like so:

Can someone help me out in changing this around so where the error messages in a block?

Source Files

index.html
https://hastebin.com/suqocutevu.html

custom.css
https://hastebin.com/etiwiluguh.css

contact.php
https://hastebin.com/oqawukavor.php

contact.js
https://hastebin.com/akizohobal.js

Test Link:
http://contactform.x10host.com/

[c3williams]

not done by me, but this should help.

Create a div in the html and apply appendTo js for the error placement.

Edit fiddle - JSFiddle - Code Playground