WordPress custom page with self calling form

Introduction:

Self calling forms are very useful when we want to display form and its result on the same web page. Using this concept there is no need to write code on two programs – one for taking input from the user and another for processing data received from the form as well as display result after processing of form data. Using the concept of self calling form, code for both purposes can be written in the same program. We only need to keep track of the fact that whether the program has been called for the first time or it has been called after submitting the form. For this purpose generally a hidden variable with name “caller” and value “self” is used in the form. So for the first time the value of the variable $caller becomes null and if the page has been called through submission of the form then the value of the variable $caller becomes “self”.

Implementation in WordPress:

This concept can also be easily implemented in the page of WordPress using the facility of Custom Page Template. Please follow the steps written below to implement this concept in WordPress:

1. Install the plugin WPIDE from https://wordpress.org/plugins/wpide/ so that coding can be done from within the Dashboard of WordPress.
2. Click on WPide menu.
3. Click on themes folder in the right side panel.
4. Click on the name of folder corresponding to active theme.
5. Click on the file page.php.
6. Select all content of this file and then copy it.
7. Create a new file in current theme folder and then save it with name sum.php.
8. Click on the name of the file sum.php and then paste the copied content into it.
9. Then just below the PHP staring tag (<?php), write a comment as written below:

/*
Template Name: Sum Form
*/
foreach($_REQUEST as $var=>$val) $$var=trim(stripslashes($val));

10. Then search for the div tag wrapping the main content of the page. Such div tag should be found inside the tag <div class=”container”>

11. Make empty the content of that wrapper tag and write the code of your own form. For example following form tag can be used for this purpose:

<?php
if($caller==”self”)
{
$errors=array();
if(empty($n1)) $errors[n1]=”Empty”;
if(empty($n2)) $errors[n2]=”Empty”;
if(empty($errors)) $sum=$n1+$n2;
}
?>
<form action=”<?php echo get_permalink($post->ID); ?>” method=post>
<fieldset>
<legend>Sum Form</legend>
<input type=text name=n1 value=”<?php echo $n1; ?>” placeholder=”Enter first number”>
<font color=red><?php echo $errors[n1]; ?></font>
<br>
<input type=text name=n2 value=”<?php echo $n2; ?>” placeholder=”Enter second number”>
<font color=red><?php echo $errors[n2]; ?></font>
<br>
<input type=submit value=Add>
<input type=hidden name=caller value=self>
</fieldset>
</form>
<?php
if($caller==”self” and empty($errors)) echo “Sum is $sum”;
?>
</div>

In this code the PHP section above the form tag contains the error checking and processing part on submission on the form. Similarly the PHP section below the form tag contains the result section. This is a simple form to add two numbers. However it can be generalized for any other purpose also.
12. Then save this page and click on Pages menu to create a new page.
13. While creating a new page, write the title of the page and from the drop down menu of Template select the template “Sum Form”. Remember that this name was given in the file sum.php.
14. Finally publish the page and start adding two numbers by visiting this page.
15. You can see this form in action at the URL http://glug4muz.org/?page_id=96.

Please note very carefully that while writing the name of HTML form variables we MUST avoid the WordPress reserve words whose list is given at https://codex.wordpress.org/Reserved_Terms.

Conclusion:

The main benefit of developing forms in this way is that the look and feel of the page is controlled by the WordPress theme and the logic of the form is controlled by our own PHP code. In this way the form of any custom web page can be easily integrated in WordPress based website.

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook Auto Publish Powered By : XYZScripts.com