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.
Name Email Message<?php echo @$_GET['data']['message']; ?>
-
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 = document0;;
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