kontact
v0.2.2
Published
An extensible contact form in PHP and vanilla JavaScript/AJAX.
Downloads
11
Readme
kontact
An extensible contact form in PHP and vanilla JavaScript/AJAX.
Quick start
- Clone this repo into a location accessible via
localhost
. For example:
$ cd ~/Sites
$ git clone https://github.com/yuanqing/kontact
$ cd kontact/example
Or simply upload this repo onto a web server that can execute PHP.
- Open
example/index.php
on a web browser, and have a go at submitting the contact form.
Usage
Our contact form is composed of the following:
• example/index.php
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/src/kontact.min.js"></script>
<script src="script.js"></script>
</body>
The
js/src/kontact.min.js
andscript.js
JavaScript files are to be placed just before the closingbody
tag.The
action
attribute of theform
ismail.php
.
• example/script.js
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) {
if (err) {
// do stuff with `err`, eg. manipulate the DOM to show error messages
return;
}
});
kontact(form, cb)
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.
• example/mail.php
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');
Kontact::__construct($schema, $cb)
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.
Kontact::process($input, $origin)
Validates the user $input
. The user is redirected to $origin
if the form was submitted with JavaScript disabled.
Installation
Install via npm:
$ npm i --save kontact
Or via composer:
$ composer require yuanqing/kontact