FORMfields, the premiere web framework
Login
Support Home | Knowledge Base | Documentation | Forums | Contact Us
FORMfields v3 Tutorials
FORMfields Tutorials
FORMfields Lib Installation
FORMgen Installation
Manually Creating a Form
Load/Unload From a DB
Emailing a Form
Forms on Your Webpage
Creating Tables
Pagifying Data
Using CSS to Format Forms 1
Using CSS to Format Forms 2
Other Tutorials
Forms on Your Webpage
Last Updated: September 20th, 2007
Overview
In this tutorial, we will take an existing HTML page and insert a generated FORMfields form.
1. contact_us.php (generated):
ContactUs
+
2. template.html (existing page):
urShelf
—>
3. template.php (merged page):
Merged
Create the Form
For this example, we used FORMgen to create a Contact Us form, contact_us.php, and in doing so we choose the CSS Template, "gray.css," so that the form's color scheme matches that of our website.
Merge with an Existing Webpage
In this example, we will demonstrate how to merge our new form, contact_us.php, with our existing webpage, template.html.
Step 1: Rename Our Webpage
In this step we rename our webpage from template.html to template.php.
Step 2: Copy the Section Tags to Our Webpage
Let's take a look at the contents of template.php:
<html>

<head>
<title>Template Title</title>
<style type="text/css">
    div.bbsLogo, a.bbsLogo {
        font-family: verdana,sans-serif;
        font-size: 24px;
        color: #DDDDDD;
        background-color: inherit;
        text-align: left;
        margin: 0px 0px 0px 15px;
        text-decoration: none;
    }
</style>
</head>

<body style="background-image:url('http://www.brainbooksoftware.com/images/bbsBg.png');
             background-repeat:repeat-x;">
<div style="width:600px;margin-left:auto;margin-right:auto;">
    <div class="bbsLogo">
        <a class="bbsLogo" href="http://www.brainbooksoftware.com">
            BRAIN BOOK SOFTWARE
        </a>
    </div>
    INSERT FORM HERE
</div>
</body>

</html>
Pages on your website might be more complicated, however the structure of your webpages should always be consistent with that of template.php. Next, let's take a look at the 3 sections that we will be adding to template.php.
Section 1
Section 1 is inserted at the start of your webpage and is responsible for the form structure and actions.
<?php

    
// ---------- CONFIG - BEGIN ----------

    // relativePathToForm is the relative path from this webpage
    // to your form.
    
$relativePathToForm "FORMfields/forms/generated/contact_us.php";

    
// relativePathToFORMfields is the relative path from this webpage
    // to your FORMfields directory.
    
$relativePathToFORMfields "FORMfields";

    
// ---------- CONFIG - END ----------

    
require_once(dirname(__FILE__) . "/" $relativePathToFORMfields
        
"/FORMfields.php");
    
$parts preg_split("'/\\* (BEGIN|END) - SECTION [1-3] \\*/'",
    
file_get_contents(dirname(__FILE__) . "/" $relativePathToForm));

    
// There can be 6 parts or 7 parts depending on the version of FORMgen,
    // which may or may not include the "/* BEGIN - SECTION 1 */" comment.
    // In each case, the parts are formatted differently
    
if (sizeof($parts) == 6) {
        
$section1 "?>" $parts[0] . " ?>";
        
$section2 $parts[2] . " ?>";
        
$section3 $parts[4] . " ?>";
    } else if (
sizeof($parts) == 7) {
        
$section1 $parts[1];
        
$section2 $parts[3] . " ?>";
        
$section3 $parts[5] . " ?>";
    }

    
// Remove the require_once statements that include FORMfields.php as the
    // path may not be correct
    
$section1 preg_replace("'require_once\\(.*?FORMfields\\.php\"\\)\\;'"""$section1);

    eval(
$section1);
?>
Note: In our example, we assume that our generated form is located at http://www.yourdomain.com/FORMfields/forms/generated/contact_us.php and we assume our existing webpage is located at http://www.yourdomain.com/template.php. The form and the webpage can be in any locations, however we have to configure the $relativePathToForm accordingly. For example, if your form and existing webpage are located in the same directory, then $relativePathToForm = "contact_us.php". Or instead, if your form is located at http://www.yourdomain.com/forms/my_form.php and your webpage is located at http://www.yourdomain.com/template.php then $relativePathToForm = "forms/my_form.php"
Section 2
Section 2 is inserted in the <head> tag of your webpage and is responsible for including the CSS templates and handling form redirection.
<?php eval($section2); ?>
Section 3
Section 3 is inserted in the <body> tag in the location where you'd like your form to be displayed.
<?php eval($section3); ?>
So, by inserting the above 3 sections into template.php, we get our merged webpage:
<?php

    
// ---------- CONFIG - BEGIN ----------

    // relativePathToForm is the relative path from this webpage
    // to your form.
    
$relativePathToForm "FORMfields/forms/generated/contact_us.php";

    
// relativePathToFORMfields is the relative path from this webpage
    // to your FORMfields directory.
    
$relativePathToFORMfields "FORMfields";

    
// ---------- CONFIG - END ----------

    
require_once(dirname(__FILE__) . "/" $relativePathToFORMfields
        
"/FORMfields.php");
    
$parts preg_split("'/\\* (BEGIN|END) - SECTION [1-3] \\*/'",
    
file_get_contents(dirname(__FILE__) . "/" $relativePathToForm));

    
// There can be 6 parts or 7 parts depending on the version of FORMgen,
    // which may or may not include the "/* BEGIN - SECTION 1 */" comment.
    // In each case, the parts are formatted differently
    
if (sizeof($parts) == 6) {
        
$section1 "?>" $parts[0] . " ?>";
        
$section2 $parts[2] . " ?>";
        
$section3 $parts[4] . " ?>";
    } else if (
sizeof($parts) == 7) {
        
$section1 $parts[1];
        
$section2 $parts[3] . " ?>";
        
$section3 $parts[5] . " ?>";
    }

    
// Remove the require_once statements that include FORMfields.php as the
    // path may not be correct
    
$section1 preg_replace("'require_once\\(.*?FORMfields\\.php\"\\)\\;'"""$section1);

    eval(
$section1);
?>
<html>

<head>
<title>Template Title</title>
<?php eval($section2); ?>
<style type="text/css">
    div.bbsLogo, a.bbsLogo {
        font-family: verdana,sans-serif;
        font-size: 24px;
        color: #DDDDDD;
        background-color: inherit;
        text-align: left;
        margin: 0px 0px 0px 15px;
        text-decoration: none;
    }
</style>
</head>

<body style="background-image:url('http://www.brainbooksoftware.com/images/bbsBg.png');
             background-repeat:repeat-x;">
<div style="width:600px;margin-left:auto;margin-right:auto;">
    <div class="bbsLogo">
        <a class="bbsLogo" href="http://www.brainbooksoftware.com">
            BRAIN BOOK SOFTWARE
        </a>
    </div>
    <?php eval($section3); ?>
</div>
</body>

</html>
Here are links to download the example source code: contact_us.php, template.html, template.php. Please recall that contact_us.php should be placed at http://www.yourdomain.com/FORMfields/forms/generated/contact_us.php, template.html placed at http://www.yourdomain.com/template.html and template.php placed at http://www.yourdomain.com/template.php.
Other Methods Of Placing Forms on Your Webpages
We recommend using the above mentioned method for placing forms on your webpages as after this method has been implemented, changes to your form in FORMgen will be automatically reflected in your merged form. There are two other ways to place forms on your webpage, but both these methods have drawbacks: 1. Inserting Your Form Statically and 2. Inserting Your Form Using an Iframe.
Info
Next Tutorial: Creating Tables »
Support | Earn Money
Copyright © 2005-2018 Brain Book Software LLC.
Built with FORMfields, the premiere web framework.