jFormer for WordPress

jformer no form provided

jformer no form provided

jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that:
  • Validate client-side
  • Validate server-side
  • Process without changing pages (using AJAX)
This plugin allows the use of jFormer in WordPress.

Installation

  1. Upload ‘jformer-for-wp` to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Set jFormer settings under ‘Settings -> jFormer Plugin’
  4. Set Rewrite String for your forms to be made available under the specified slug, i.e. ‘forms’

Usage

  1. Upload your form in the plugin directory ‘jformer-for-wp/forms/’, this file is included by the plugin and within this file you can:
  2. Create fields and other standard jFormer options by manipulating a $form object (this is a jFormer object created by the plugin).
  3. Process submissions by defining a ‘function onSubmit($formValues)’ function.
  4. Link directly to the form by visiting your WordPress site with the custom slug defined in step 3, followed by the form name, for example: ‘http://www.yourdomain.com/forms/contact’
  5. Display the form within the page/post with the shortcode ‘-1‘ where formid is the name of the form.
  6. Display a link to the form within the page/post with the shortcode ‘-1‘ where text is the text to display and class is the class used for the html link

Notes

Due to an issue with jFormer it cannot send submissions to a URL with a dash in it, therefore keep all form file names to one word without any dashes.

Example

A sample contact form exists in the jformer-for-wp/forms/ directory for your reference:
// contact.php
<?php
    function onSubmit($formValues)
    {
        $response = '<h2>Submission Complete</h2><p>Thanks for contacting us, we will be in touch presently.</p>';
        return array(
        'successPageHtml' => $response, 'successJs' => 'setTimeout("self.close();",2000);');
    }

    $form->addJFormComponentArray(array(
        new JFormComponentSingleLineText('name', 'Name:', array(
            'width' => 'longest',
            'validationOptions' => array('required'),
        )),
        new JFormComponentSingleLineText('email', 'E-mail address:', array(
            'width' => 'longest',
            'validationOptions' => array('required', 'email'), // notice the validation options
        ))
    ));
?>

Frequently Asked Questions

My form just shows ‘Processing’ but doesn’t actually do anything

Check the form being used does not have a ‘-‘ dash in its name.

How Do I use jFormer?

This is only a plug-in not the library, for all other questions on how to use jFormer, please visit www.jformer.com for more information

Download

1.0.0

* Initial release. Download: jformer-for-wp 1.0.0.zip

Notes

In order to integrate jformer.js into WordPress AJAX processing the following changes were required to jformer.js and jformer.php:
= add jformer.js - line 2335 =
// Wrap all of the form responses into an object based on the component jFormComponentType
var formData = $('
').attr('value', encodeURI(jFormerUtility.jsonEncode(this.getData()))); // Set all non-file values in one form object
var formIdentifier = $('
'); formClone.append(formData); formClone.append(formIdentifier);
var formExtra = $('
'); formClone.append(formExtra);
= add jformer.php - line 730 =
function processRequest($silent = false) { ob_start(); /* added manually for WordPress plugin */
print_r($_POST);
= add jformer.php - line 817 =
$output = ob_get_clean();
return $output;