These Instructions are for
NOT using the iFrame Code Snippet method.
The EASIEST
way to make your web form match the general
look of your website is to use the
Web Form
Designer to use the
iFrame Code Snippet Method
which will generate the IFRAME Code Snippet. Then
just paste the snippet into a page you already have.
The page will need to have sufficient space
in it so that the form has room to be
displayed properly.
Then you should be
done.
The next easiest way is to use the
Web Form
Designer to use the
Non-iFrame Method.
Once there, you insert your header and
footer code into their fields. Then you
are done.
But the most difficult way is as follows:
The below few paragraphs explain the
very difficult way to make changes
without using the Web Form Designer and
without using the iFrame Code Snippet
Method.
Make the form look like the other pages
on your website by using the
header.html and
footer.html files in /inc directory.
If you do not wish to (or cannot) use the
Web Form Designer,
then you can follow the steps below.
Create your
header and footer pages. There are samples
you can use at:
/inc/header-sample.html
and
/inc/footer-sample.html
Currently, the script calls the server for
the files "header.html" and "footer.html".
Your header and footer must be named this.
There are 2 examples of the header and
footer. One is blank and one has a sample
menu.
If you wish, you can just rename "header-sample.html"
to "header.html" (switch them). This will drop the form
code right
into the center of the sample header
template provided.
You can do the same thing with the "footer.html".
But if you prefer to (or have to) do it "manually", all you need to do is use
an existing page from your website, delete a
center area AND BOTTOM of the page. Then save it as "header.html"
in the directory: /inc/. You will need to
change the relative paths to your header
images. This all depends on your directory
structure. Sometimes just adding a /
to beginning of your image path is all you
need. Other times, a ../ before
the image path. Or, if you really want to be
sure, you can just insert the full url of
your images. So here are some of the
options:
/your-images/my-nice-graphic.jpg
../your-images/my-nice-graphic.jpg
http://www.insert-your-website.com/your-images/my-nice-graphic.jpg
You can also copy your entire image
directory and css files over the the /inc
directory.
There are many ways to have your images
appear properly on your new header.html
file.
Now this is very important: Remove the
ending/closing code tags from your newly
created header.html file. Make sure to name it header.html,
and place it in the inc/ directory.
Study the end of the file: header-sample.html
in the /inc directory. Make yours like that.
Usually, the code of an html page ends with
something like:
<p> </p>
</body>
</html>
Do not have your new header.html file
end like the above. Instead, using the included /inc/header-sample.html
as an example, the new header should not
"end".
Our example header ends with:
<tr>
<td valign="bottom"> </td>
<td valign="bottom">
Do not end your new header.html file with
code like:
</body>
</html>
If you do, then the form will load
"outside" or "next to" the page.
If you make this mistake, you will see what
I mean. End it similar to header-sample.html.
Lastly, the way you link to your form
will be different using this "non-iFrame"
method.
Instead of the link to your form being
something like:
http://www.insert-your-website.com/contact_me.html,
it will instead being something like:
http://www.insert-your-website.com/your-directory-name/formbwf.php?f=1
or:
http://insert-your-website.com/directory/formbwf.php?f=contactus-classic.html
In the above url
"f=1", the "1" is for the
web form file named
"contactus-classic.html". If your form is a
different one, like "Contact Form -
Complete"
(which is contactus-complete.html), then the
end of this link would be "f=2".
**********************************************************************
Note: Make sure your images and external
JavaScript files (and CSS tables) have
absolute URLs,
like for instance:
|
<img src="http://www.insert-your-website.com/images/image1.gif">
<script
language="JavaScript" src="http://www.insert-your-website.com/script.js/"></script>
<link href="http://www.insert-your-website.com/styles.css"
rel="stylesheet"
type="text/css"> |
|
To make your life easier, try adding:
|
<base href="http://www.insert-your-website.com/"> |
|
right after the opening <HEAD> tag in
header.html.
The slash after .com is important,
so do not leave it out.
That may save you editing all your image's
URLs.
Also, if you do not use the Web Form
Designer at all, then you will need to set
your preferences for text styles, borders,
colors, email addresses, and such directly
into the configbwf.php file. Open it up in a
text editor and insert your choices. Then
upload that file.