How to change the generated form to work with my own customized backend?

The generated form already has lots of client side form validations, including logic and condition checking; it also comes with backend and form admin panel. It's a fully functional out-of-box web form solution, and it just works.

There are still cases you want more control with all the good parts of the form, to fully control the frontend and your backend. Here are some tips on how you can customize it for your needs.

Below is an example to create a login form and your backend. Your backend has zero dependency of the existing "old" backend. You can even delete all the php files you downloaded, just keep all the html/css/js files.

Download customized backend project

Step 1: create your backend to response to your form submission

In order the form frontend can "talk" to your backend, the backend has to response a JSON telling the form with server side validation result.

<?php

// do server side validation logic
// ......
// then response the result in JSON

$result = array(
    'validated' => true,
    'fieldValues' => $form
);
header('Content-Type: text/html');
echo json_encode($result);

The full source code of the backend login.php:

<?php
/**
 *  JQuery form backend customization demo script
 */
 session_start();

 define( 'DEMO_EMAIL', 'demo@demo.com' );
 define( 'DEMO_PASSWORD', 'demo123' );
$_SESSION['user.authenciated'] = false;


// main
# ---------------------------------------
checkLogin();
# ---------------------------------------


function checkLogin(){

  // convert field names for easy coding
  $fieldMaps = array(
    'f2' => 'email',
    'f5' => 'password'
  );
  $form = convertPostValues($fieldMaps,false);

  $loginOk = DEMO_EMAIL == $form['email'] && DEMO_PASSWORD == $form['password'];
  if( !$loginOk ){
    echo "Failed to login";
    exit;
  }

  // send json back to Ajax response handler
  $result = array(
      'validated' => true,
      'fieldValues' => $form
    );
  header('Content-Type: text/html');
  echo json_encode($result);

  $_SESSION['user.authenciated'] = true;
}


function convertPostValues( $fieldMaps, $keepAll = true ){
  $form = array();
  foreach( $_POST as $field => $value ){
      $value = trim($value);
      if( array_key_exists($field,$fieldMaps) )
      $form[ $fieldMaps[$field] ] = $value;
      elseif ( $keepAll )
      $form[ $field ] = $value; 
  }
  return $form;
}  

Step 2: change the from client side behaviors to comunicate to your backend

Use data-* attributes of <form> to control behaviors

<form data-licenseKey="" 

  data-noAjax="0" 
  data-nocsrf="1" 
  data-thankyou="0" 
  action='login.php' 

  name="jqueryform-a3d094" 
  id="jqueryform-a3d094" 
  method='post' enctype='multipart/form-data' 
  novalidate autocomplete="on">

data-noAjax="0"

Once the front end validation done, the form will be posted with Ajax to the action page (your backend). The Ajax expects a json response, in your backend php, something like below. The "fieldValues" is an array of the form field values. The fieldValues you can use them to customize the client side thank you message if you want.

{
    "validated": true,
    "fieldValues": {
        "email": "demo@demo.com",
        "password": "demo123"
    }
}  

data-nocsrf="1"

Disable the ajax call for backend to create CSRF token. Otherwise you have to build your own CSRF creation and validation.

data-thankyou="1"

Use it with data-noAjax="0", after received the server side validation response and succeed, the form will hide the form and show the thank you message. Set the value to "0" to hide the form but do not show the thank you message.

Optional: Add a javascript ajaxSubmitCallback() function to do more

Here is an example: after the server side login validation succeed, redirect user to the My Account page my-account.php.

<script type="text/javascript">
function ajaxSubmitCallback(res) {
  var data;
  try {
    data = $.parseJSON(res);
  } catch (e) {};

  //console.log(res);
  if (data && data['validated'] === true) {
    location.href = 'my-account.php';
  }
}
</script>

My Account page my-account.php

<?php
/**
 *  JQuery form backend customization demo script
 */

session_start();

if( true === $_SESSION['user.authenciated'] )
    echo "You have logged in. Welcome!";
else
    echo "Access denied!";

---

Test the login form demo project

Or download the source code of the customized backend project