Tutorial: Create a form display template

The form template system is similar to the wordpress theme sytem.  You should first examine the default template, ‘fm-form-default.php’,  located in ‘/templates’ in the plugin’s directory (usually /wp-content/plugins/wordpress-form-manager).

IMPORTANT!!! – Make sure to save your custom template as something other than ‘fm-form-default.php’.  Otherwise, you will lose your changes when you update the plugin.

Step 1: To make a new template, make a new file in the ‘/templates’ directory, within the plugin’s main directory.  The first few lines of the template must look like the following:

<?php /*
Template Name: (Template name goes here)
Template Description: (A brief description of the template goes here)
Template Type: form
*/ ?>

  • Template Name – (required) This is what will appear in the menu to select the template for use by your form.
  • Template Description – This should be a short description of the template.  This won’t show up anywhere, but you should include it anyway.
  • Template Type – (required) This must be ‘form’ for a form template.

Step 2: First, every form template needs appropriate open and close <form> tags.  This can be done in two ways:

<?php fm_form_start(); ?>

or

<form enctype="multipart/form-data" method="post" action="<?php echo fm_form_action();?>" name="<?php echo fm_form_ID();?>" id="<?php echo fm_form_ID();?>" >

The second method gives you more freedom, the first method is simpler.  Either way, you must closeout the form:

<?php echo fm_form_end(); ?>

or

</form>

Either way works, and for now, they are equivalent.  To keep track of the template so far, we have:

<?php /*
Template Name: (Template name goes here)
Template Description: (A brief description of the template goes here)
Template Type: form
*/ ?>
<?php fm_form_start(); ?>

<?php fm_form_end(); ?>

Step 3: The next step is to create the main loop.  This will display the form items.  For this example, and for the default template, we will use an unordered list, but you could use a table, divs, or whatever you can think of instead:

<ul>
<?php while(fm_form_have_items()): fm_form_the_item(); ?>
<li>
<label><?php echo fm_form_the_label(); ?><?php if(fm_form_is_required()) echo "&nbsp;<em>*</em>"; ?></label>
<?php echo fm_form_the_input(); ?>
</li>
<?php endwhile; ?>
</ul>

The mechanism is similar to a wordpress theme.  The fm_form_have_items() function tests if there are more items to display, and fm_form_the_item() loads the next item to be displayed.  The code between the while() and endwhile is repeated for each form item – you will notice that this loop creates <li> tags for each form item.  The current item’s label is given by fm_form_the_label(), and the form’s input is given by fm_form_the_input().

You should test to see if the item is set as ‘required’, and if so, output an asterisk next to the label.  This is done by the statement:

<?php if(fm_form_is_required()) echo "&nbsp;<em>*</em>"; ?>

So far, we have the following for our template:

<?php /*
Template Name: (Template name goes here)
Template Description: (A brief description of the template goes here)
Template Type: form
*/ ?>

<?php fm_form_start(); ?>

<ul>
<?php while(fm_form_have_items()): fm_form_the_item(); ?>
<li>
<label><?php echo fm_form_the_label(); ?><?php if(fm_form_is_required()) echo "&nbsp;<em>*</em>"; ?></label>
<?php echo fm_form_the_input(); ?>
</li>
<?php endwhile; ?>
</ul>

 

 

<?php fm_form_end(); ?>

Step 4: Now you need to add the submit button.  There are two ways to do this:

<?php echo fm_form_the_submit_btn(); ?>

or

<input type="submit" name="<?php echo fm_form_submit_btn_name();?>" id="<?php echo fm_form_submit_btn_id();?>" value="<?php echo fm_form_submit_btn_text();?>" onclick="return <?php echo fm_form_submit_btn_script();?>" />

As with the form tag, the first method is simpler, and the second gives you more freedom.  We will skip the recap of the code so far, and head to the next step.

Step 5: The last piece of required code for a form template is as follows:

<?php echo fm_form_hidden(); ?>

This must be placed just before the end of the form (just before fm_form_end() or </form>).  This contains the scripts required to make the validation and some other features function properly.  Below is what our code looks like so far:

<?php /*
Template Name: (Template name goes here)
Template Description: (A brief description of the template goes here)
Template Type: form
*/ ?>

<?php fm_form_start(); ?>

<ul>
<?php while(fm_form_have_items()): fm_form_the_item(); ?>
<li>
<label><?php echo fm_form_the_label(); ?><?php if(fm_form_is_required()) echo "&nbsp;<em>*</em>"; ?></label>
<?php echo fm_form_the_input(); ?>
</li>
<?php endwhile; ?>
</ul>

<?php echo fm_form_the_submit_btn(); ?>

 

<?php echo fm_form_hidden(); ?>
<?php fm_form_end(); ?>

Step 6: At this point, you will want to make the form look more user friendly.  For example, you may want to add the title of the form somewhere.  This can be done with the following code:

<?php echo fm_form_the_title(); ?>

To use your new template, either choose it from the list of templates in the ‘Advanced’ settings to apply the template to all forms, or choose the template within the form editor to apply the template to a single form.  You will notice that there are no longer any ‘Appearance’ options within the form editor.  This is because these options are part of the default template.  To make your own options, see the tutorial, ‘Adding options to a template’

Below is the the full code of this tutorial:

<?php /*
Template Name: (Template name goes here)
Template Description: (A brief description of the template goes here)
Template Type: form
*/ ?>

<?php fm_form_start(); ?>

<h2><?php echo fm_form_the_title(); ?></h2>

 

<ul>
<?php while(fm_form_have_items()): fm_form_the_item(); ?>
<li>
<label><?php echo fm_form_the_label(); ?><?php if(fm_form_is_required()) echo "&nbsp;<em>*</em>"; ?></label>
<?php echo fm_form_the_input(); ?>
</li>
<?php endwhile; ?>
</ul>

<?php echo fm_form_the_submit_btn(); ?>

 

 

 

<?php echo fm_form_hidden(); ?>
<?php fm_form_end(); ?>