Forms API: from static forms to dynamic php execution

LiveCanvas (v2.3+) offers a convenient shortcode to "ajaxify" ordinary HTML forms.

To show how this works, let's dive into an example, illustrating the built-in "AJAX / PHP Custom Form" block (in "WordPress Integration").

Let's say you have a static HTML form somewhere in your page, for example a classic Bootstrap-style form like the HTML code below.


<form>
<div class="form-group mb-4">
<label>Your Name (optional)</label>
<input name="mouseglue" type="text" class="form-control" placeholder="John Doe" value="" autocomplete="off" hidden="">
<input name="name" type="text" class="form-control" placeholder="John Doe" value="">
</div>
 
<div class="form-group mb-4">
<label>Your Email Address</label>
<input name="email" type="email" class="form-control" placeholder="name@example.com" value="">
</div>
 
<div class="form-group mb-4">
<label>Your Message</label>
<textarea name="message" class="form-control" rows="3" maxlength="300"></textarea>
</div>
 
<button type="submit" class="btn btn-primary btn-lg">Submit Form</button>
  
</form>

This is how it would look like on the frontend:

Of course, such form basically does absolutely nothing upon clicking the Submit Form button.

To make the form "alive", and execute some custom PHP, the lc_form shortcode can be used, placing it before closing the FORM HTML element (before </form>), and specifying the desired action:

[lc_form action="lc_test_action"]

After adding the lc_form shortcode, if you click the button, you will see something is going on (logged as admin, and editor turned off):

This happens because a built in PHP callback is being executed by the plugin.
Here's the responsible code, inside the LiveCanvas plugin. It's just a plain and standard, wp-compliant AJAX implementation:

 


//////////////////////////////////////////////////////////////////////////////// 
///DEMO FORM ACTION /////////////////////////////////////////////////////////
/////copy the code below including the function, and rename lc_test_action to whatever
// Use it in a custom plugin or in your child theme functions.php file

add_action('wp_ajax_lc_test_action', 'lc_test_action_func'); //allow for logged people
add_action('wp_ajax_nopriv_lc_test_action', 'lc_test_action_func'); //allow for unlogged people

function lc_test_action_func()
{
	
	//INPUT VALIDATION
	check_ajax_referer( 'lc_test_action', 'nonce' );

	//sample validation of a honeypot, customize as you want
	if (!empty($_POST['mouseglue'])) die();

	//do your homework and add validation for your fields

	//PRINT SOME FEEDBACK FOR TESTING
    ?>
    	<div class="alert alert-warning my-2 my-3 lead" role="alert">   <h2>Submitted data:</h2>  <?php if (current_user_can("install_plugins")) print_r($_POST); ?></div>
    <?php 
	//
	//DO WHAT YOU NEED TO IN PHP TO PROCESS THE DATA
	//

	//THEN FINISH THE AJAX ACTION
	wp_die(); // this is required to return a proper result
}

////END DEMO FORM ACTION ////////////////////////////////////////////////////////////////////////////

How to craft your own ajax form

  1. Insert a static HTML form in a LiveCanvas page, such as the one shown at the beginning of this post
  2. Before the closing of such form, insert the lc_form shortcode specifying the action parameter, eg [lc_form action="lc_whatever_action"]
  3. Simply grab the PHP code above and replace lc_test_action with lc_whatever_action. Place this code in a custom plugin or in your child theme functions.php file
  4. Customize the PHP as desired adding all your data processing, echo-ing the results accordingly. Remember to terminate the action function with wp_die() as shown in the example.