back to

Contact Us

Contact Form using HTML5, CSS3, Javascript, Jquery and PHP

All the code for this form is my own code as an example of the my ability to use the above languages.The structure and styling uses HTML5 and CSS3, The client-side form validation and textarea charater count uses JQuery and Javascript and the server-side validation and submission message (which displays the details the user entered) are done with PHP.

The name field does not accept numbers or blank values. If this is the case on submit, an error message will be displayed next to the name heading and the border of the input field will change colour.

The email field also will only accept valid email addresses (based on a regex pattern) and can't be blank. If this happens, an error message will also be displayed and the border of the input field will change

The message can not be blank and an error message and border colour change will also happen upon submit. In addition, the field is limited to 1000 characters. If a user pastes more than 1000, it will trim the field to the first 1000 characters. A character count is provided which will update on input (mouse or keys).

If all the fields validate the form will submit and the PHP code will validate the form. If the code doesn't meet the PHP validation an error message will show above the form detailing which fields did not pass the validation - this can be tested by entering "david", "" and "david" in the name, email and message field - as the PHP validation does not allow these values for test purposes. If the code passes the validation a success message will display above the form and the users input will be displayed.