kontact
v0.2.2
Published
An extensible contact form in PHP and vanilla JavaScript/AJAX.
Downloads
13
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/exampleOr simply upload this repo onto a web server that can execute PHP.
- Open
example/index.phpon 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.jsandscript.jsJavaScript files are to be placed just before the closingbodytag.The
actionattribute of theformismail.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.
formis a DOM element. User input is sent to the URL specified in itsactionattribute. (In our example,actionismail.php.)Form validation results are returned via the
cb(err, data)callback. The value oferrmay 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.
$schemais anarray, with each element corresponding to a form field. The key is the name of the form field. The value is anarraycontaining the following:
optional— Set totrueif the form field can be empty. Defaults tofalse.validate— Acallablefor validating user input. It must returnfalseif the user input is invalid.err— The error message (astring) that is returned ifoptionalisfalsebut the field was empty, or if thevalidatecallaback returnedfalsefor the given user input.
$cbis acallablethat is passed the results of the form validation (namely, the$errmessages and the user input$data). Do server-side stuff in$cb, eg. send email, or add$datato 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 kontactOr via composer:
$ composer require yuanqing/kontact