The Humble Contact Form, Reconsidered
Clever Contact includes everything one needs to add a simple, clean, and modern contact form to a PHP-powered Web site:
- an HTML5 form, including a demo page that can be customized and deployed in full if desired
- CSS 3 style sheets
- PHP to handle form-processing
Clever Contact was made with current and developing standards, browsers, and techniques in mind, including the following:
- HTML5, including browser-provided input validation
- CSS 3
- XMLHttpRequest level 2
- single-page applications (SPAs) and form submission via API
- modern, evergreen browsers - no legacy cruft
- easy customization and deployment
- clean and valid code, preferably free of unnecessary and possibly conflicting IDs
You may find Clever Contact usable pretty much as presented in the demo directory, in which case you should be able to just customize things to your liking and drop the files where you like on a Web server running a recent version of PHP.
- config.php: Be sure to check that the constant values are to your liking.
- contact.html: Ensure that the "form" element's "onsubmit" attribute includes the proper path to clever-contact-api.php.
After that, you should be able to build Clever Contact and open and serve the front-end demo page (which you can adapt for your own needs) just by running Grunt:
You can also run specific Grunt tasks if you are so inclined. For example, you can delete the build directory like so:
If Clever Contact has already been built, you can skip right to opening and serving the front-end demo page like so:
Please explore Gruntfile.js for more details.
Demo via Browsersync
If you have Browsersync installed, you can have it serve the built demo page and watch for and respond to changes by running the provided npm script like so:
npm run-script demo
Obviously, the build directory will need to exist before that will work.
At some point I plan to replace grunt-serve, which has not as of this writing been updated for recent versions of Grunt, with Browsersync, but for now you can use either.
Room for Improvement
Yes, there is plenty. :)
- User input is currently passed to PHP's mail function with minimal processing. The form-processor should probably have a full security audit, including both input validation and data-handling.
- As Clever Contact is specifically intended to be a modern system, no effort has been made to provide fallback functionality or graceful degradation for old browsers. Supporting obsolete browsers whose ubiquity slows the modernization of the Web is not a particularly compelling use case for me as I do not think of it as an actual improvement, but if you disagree, you can fork Clever Contact and corrupt it to your evil purposes between eating babies or not using turn signals or whatever it is you do to express the darkness in your heart.
- I made several themes and a theme switcher, but I removed them to focus on completing and delivering a minimum viable product. I will likely restore and further develop them later.
There is much more room for improvement, but I am presently more inclined to sleep than to write documentation, so I recommend either embracing the mystery, looking through the code, or just trying things out to see what you think.
- Things look great on some mobile devices, but not very good on others. I may refine the demo appearance and responsiveness soon, although appearance is really secondary to functionality since library users can implement their own user interfaces and styles.
- As alluded to above, I am not asleep. This issue will be addressed as soon as I post this documentation.
You might want to put that form-processor PHP script at a different origin (domain and/or port) from your main site, especially if you are using a crossdomain.xml file.
Why "Clever Contact"?
Because "Susan" would be a silly name for a contact-form library.