An extensible contact form in PHP and vanilla JavaScript/AJAX.
- Clone this repo into a location accessible via
localhost
. For example, do:
$ cd ~/Sites
$ git clone https://github.com/yuanqing/kontact
$ cd kontact/example
Or simply upload this repo onto a web server that can run PHP.
- Open
example/index.php
on a web browser, break out your JavaScript console, and have a go at submitting the contact form.
Our contact form is composed of the following:
This is the HTML for the contact form itself.
<body>
<form action="mail.php" method="post" class="kontact">
<div><label for="name">Name</label><input type="text" name="name" id="name" value="<?php echo @$_GET['data']['name']; ?>" /></div>
<div><label for="email">Email</label><input type="text" name="email" id="email" value="<?php echo @$_GET['data']['email']; ?>" /></div>
<div><label for="message">Message</label><textarea name="message" id="message"><?php echo @$_GET['data']['message']; ?></textarea></div>
<div><input type="submit" value="Send" /></div>
</form>
<script src="../js/dist/kontact.min.js"></script>
<script src="script.js"></script>
</body>
-
The
js/dist/kontact.min.js
andscript.js
JavaScript files are to be placed just before the closingbody
tag. -
The
action
attribute of theform
ismail.php
.
This is the JavaScript that sends the user input via AJAX to mail.php
.
var form = document.querySelectorAll('.kontact')[0];
kontact(form, function(err, data) {
console.log(err, data);
if (err) {
// do stuff with `err`, eg. manipulate the DOM to show error messages
return;
}
});
Listens to the submit
event on the given form
, and sends the user input for validation.
-
form
is a DOM element. User input is sent to the URL specified in itsaction
attribute. (In our example,action
ismail.php
.) -
Form validation results are returned via the
cb(err, data)
callback. The value oferr
may be one of:
0
— No error in user input.array
— There was an error in the user input. Each element in the array corresponds to a form field where there had been an error.
data
is an array containing the user input.
This is the PHP script that processes the submitted form, and returns a response. It requires the file php/src/Kontact.php
.
require_once dirname(__DIR__) . '/php/src/Kontact.php';
use yuanqing\Kontact\Kontact;
$schema = array(
'name' => array(
'optional' => true,
'err' => 'Please enter your name'
),
'email' => array(
'validate' => function($input) {
return filter_var($input, FILTER_VALIDATE_EMAIL);
},
'err' => 'Please enter a valid email'
),
'message' => array()
);
$cb = function($err, $data) {
if (!$err) {
// do stuff with `$data`, eg. send mail($to, $subject, $message)
return;
}
};
$kontact = new Kontact($schema, $cb);
$kontact->process($_POST, 'example.php');
Constructs a new Kontact
instance.
$schema
is anarray
, with each element corresponding to a form field. The key is the name of the form field. The value is anarray
containing the following:
optional
— Set totrue
if the form field can be empty. Defaults tofalse
.validate
— Acallable
for validating user input. It must returnfalse
if the user input is invalid.err
— The error message (astring
) that is returned ifoptional
isfalse
but the field was empty, or if thevalidate
callaback returnedfalse
for the given user input.
$cb
is acallable
that is passed the results of the form validation (namely, the$err
messages and the user input$data
). Do server-side stuff in$cb
, eg. send email, or add$data
to a database.
Validates the user $input
. The user is redirected to $origin
if the form was submitted with JavaScript disabled.
Install via npm:
$ npm i --save kontact
Or via composer:
$ composer require yuanqing/kontact